-
可以参考微信开放文档
官网例子 个人项目案例
- 按照官网说明，使用官网的开放标签【wx-open-launch-weapp】
2.1. wx.config中需要增加openTagList:['wx-open-launch-weapp']
2.2. 在需要使用到该标签的界面增加该标签，修改样式等 - 遇到的问题：
修改默认按钮的样式
需要根据官网说明，因为我使用的是vue，本想着该标签应该是预留的slot，我可以通过template来修改样式，结果微信开发者工具调试Console面板中显示【The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-weapp> is missing】
error
于是，按照官网方式，通过script嵌入按钮样式（以下代码中的layout是我们项目中的组件）
<template>
<!-- 导航界面 -->
<!-- 第三方公众号界面跳转至该导航界面-显示3个跳转按钮，分别跳转至居民、物业、民警三个小程序端 -->
<!-- 采用方式： -->
<!-- https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 -->
<!-- 使用 *微信开放文档* - *公众号* -【微信网页开发】-【开放标签说明文档】 - wx-open-launch-weapp -->
<!-- wx-open-launch-weapp 标签中使用的属性说明：-->
<!-- username: 小程序原始id-可以在 *微信公众平台* 扫码进入小程序，【设置】菜单 - 账号信息 - *原始ID* -->
<!-- path: 小程序跳转过去的界面的路由-可以携带参数 -->
<layout
:page-state="pageState"
:retry="init"
:error-text="errorText">
<div class="navigator">
<img src="../../assets/icmpNavigator/navbackground.png">
<div class="icmp-title">
<img src="../../assets/icmpNavigator/icmptitle.png">
</div>
<div class="buttons-wrapper">
<div class="jump-button"
v-for="(item, index) in navList"
:key="index">
<img :src="item.icon">
<span>{{item.label}}</span>
<wx-open-launch-weapp
:id="item.btnid"
:username="item.username"
:path="item.path"
@launch="afterOpen(item)"
@error="openError">
<script type="text/wxtag-template">
<div style="
height: 82px;
width: 290px;
border-radius: 46px;">
</div>
</script>
</wx-open-launch-weapp>
</div>
</div>
</div>
</layout>
</template>
<script>
import Layout from '../../components/layout/layout';
import { Button } from 'vant';
// global config info
const globalConfig = window.g_Config;
export default {
name: 'icmpnav',
components: {
Layout,
[Button.name]: Button
},
data () {
return {
// 界面状态
pageState: '',
// 出错提示信息
errorText: '',
// 导航菜单-跳转到小程序
navList: [
// 居民-小程序
{
btnid: globalConfig.NAV_CONFIG.RESIDENT.BUTTON_ID,
icon: require('../../assets/icmpNavigator/resident.png'),
label: globalConfig.NAV_CONFIG.RESIDENT.LABEL,
username: globalConfig.NAV_CONFIG.RESIDENT.MINI_PRO_ORG_ID,
path: globalConfig.NAV_CONFIG.RESIDENT.MINI_DIRECT_URL
},
// 物业-小程序
{
btnid: globalConfig.NAV_CONFIG.PROPERTY.BUTTON_ID,
icon: require('../../assets/icmpNavigator/property.png'),
label: globalConfig.NAV_CONFIG.PROPERTY.LABEL,
username: globalConfig.NAV_CONFIG.PROPERTY.MINI_PRO_ORG_ID,
path: globalConfig.NAV_CONFIG.PROPERTY.MINI_DIRECT_URL
},
// 民警-小程序
{
btnid: globalConfig.NAV_CONFIG.POLICE.BUTTON_ID,
icon: require('../../assets/icmpNavigator/police.png'),
label: globalConfig.NAV_CONFIG.POLICE.LABEL,
username: globalConfig.NAV_CONFIG.POLICE.MINI_PRO_ORG_ID,
path: globalConfig.NAV_CONFIG.POLICE.MINI_DIRECT_URL
}
]
};
},
methods: {
// init page
init () {
// nothing to do now
},
afterOpen (item) {
// after open mini Program need to do something
// at present nothing need to do
switch (item.btnid) {
case this.residentConfig.BUTTON_ID:
// resident mini program opened, do something
break;
case this.propertyConfig.BUTTON_ID:
// resident mini program opened, do something
break;
case this.policeConfig.BUTTON_ID:
// resident mini program opened, do something
break;
default:
// nothing to do
break;
}
},
openError (e) {
console.log(e.errMsg);
this.util.showToast(this.lang.NAVIGATOR_PAGE.MESSAGE.ERROR.OPEN_MINI_ERROR);
}
}
};
</script>
<style scoped lang="scss">
.navigator {
$button-wrapper-height: 60%;
$button-height: 82px;
$button-width: 82%;
$button-img-height: 43px;
$button-img-width: 39px;
@mixin centerDisplay {
display: flex;
align-items: center;
justify-content: center;
}
@include centerDisplay();
height: 100%;
width: 100%;
background: #fff;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
.icmp-title {
position: absolute;
top: 0px;
height: 160px;
width: 100%;
@include centerDisplay();
img {
margin-top: 15px;
width: 298px;
height: 30px;
}
}
.buttons-wrapper {
position: absolute;
top: 160px;
flex-direction: column;
height: $button-wrapper-height;
width: 100%;
background: transparent;
@include centerDisplay();
.jump-button {
margin: 15px;
height: $button-height;
width: $button-width;
border-radius: 46px;
background: linear-gradient(90deg, #7AC7FF 0%, #3863E5 100%);
box-shadow: 0px 7px 7px 0px rgba(80, 118, 255, 0.21);
@include centerDisplay();
img {
position: absolute;
width: $button-img-width;
height: $button-img-height;
left: 120px;
}
span {
position: absolute;
right: 130px;
height: 29px;
font-size: 22px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #FFFFFF;
line-height: 29px;
}
}
}
}
</style>
效果如下图
效果图
