官方文档:微信网页开发-开放标签说明文档
示例代码
#launch-btn {
width: 50%;
background: transparent;
}
<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxxxxxx"
path="pages/home/home.html">
<template>
<style>.btn{
display: inline-block;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
box-sizing: border-box;
height: 44px;
line-height: 44px;
font-size: 16px;
width: 100%;
background: #d84e43;
border-color: #d84e43;
border-radius: 4px;
}</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
/* cfg从后端接口获取 */
function weixinJsConfig(cfg) {
wx.config({
debug: true,
appId: cfg.appId,
timestamp: cfg.timestamp,
nonceStr: cfg.nonceStr,
signature: cfg.signature,
jsApiList: [],
openTagList: ['wx-open-launch-weapp']
});
wx.checkJsApi({
jsApiList: [],
success: function (res) {
}
});
wx.error(function (res) {
});
};
weixinJsConfig();
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
注意事项
<wx-open-launch-weapp>
作为普通标签使用,建议设置一个宽度。
最佳实践:
将<wx-open-launch-weapp>
的外观调整为你需要的按钮的样式(不必设置高度),即除了高度之外,所有样式在此标签上设置好。
template内部的<button>
只根据需要设置height,并将background设置成transparent即可。
这样做,是因为<wx-open-launch-weapp>
的样式可以很容易从外部进行控制,页面的中的一些class可以很好地复用。
-
username
属性指定需要跳转小程序的原始Id(一般是以gh_打头),而不是appId。 -
path
属性指定跳转到小程序内部哪个页面,需要加.html
后缀。 -
引入
weixin.js
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
-
wx.config()
的时候指定openTagList
wx.config({ ... openTagList: ['wx-open-launch-weapp'] });