先贴上微信开放标签的官方文档
一、概述流程
首先需要在项目中引入微信的sdk,具体引入方式详见我写的另一篇文章,里面包含了引入sdk以及配置wx.config的详细教学以及踩坑记录。如果引入完微信sdk的前提下接下来就是根据微信文档提供的demo来引入开放标签
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp']
});
<wx-open-launch-weapp
id="launch-btn"
appid="wx12345678"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
别以为就这么简单的结束了!! 接下来 才是关键的的时候!!!
上面提到的引入微信sdk文章中用自己申请的测试号进行本地测试微信sdk的接口是否可用,这种方式不能完全测试开放标签,因为微信官方提到开发使用者必须是已认证的服-务-号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。这就意味着测试号只能通过wx.config来判断微信sdk是否引入成功,但是不代表开放标签是可用的。然后之后的测试只能用公司提供的认证过的服务号来测试,也就是要发布线上然后去真机测试。
接下来是需要特别注意的点:
1、开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、开发使用者必须是已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
3、必须部署到正式服务器,测试公众号不显示图标。
4、必须是在已认证的服务号中做JS接口安全域名验证,“JS接口安全域名”和“IP白名单”都要,IP是指获取微信签名的服务器的IP。
注意:1、2两个条件必须满足其中一个;3、4两个条件必须满足,否则标签中的按钮不会显示
问题一:openTagList 是空数组
如果log里面返回的openTagList 是空数组的话,那么肯定是你使用的公众号,不是认证过的服务号(所以上面提到测试号是不能测试开放标签的),并且一定要用真机测试。
问题二、在Vue中使用
开放标签属于自定义标签,Vue会给予未知标签的警告,可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。
//main.js
Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']
开放标签模板中需要注意不能使用rem单位。
问题三、跳转小程序的按钮不显示、
这个引起的原因有很多种,如果wx.config配置首先都报错了,那就先解决这个,如果wx.config调用成功的前提下,那么需要检查使用的服务号是否是认证过的,服务号绑定“JS接口安全域名”下的网页才可以使用开放标签跳转任意合法合规的小程序。
动态渲染开放标签:
<div v-for="(item,index) in list" :key="index" v-html="renderDom(item)"></div>
// 动态渲染微信开发标签 跳转小程序
renderDom (item) {
let script = document.createElement('script')
script.type = 'text/wxtag-template'
let image = item.imgUrl
script.text = `<div style="height:100%;width:100%;text-align:center;"> <img src="${image}" width="46px" height="46px"/><p style="color: #333;font-size: 12px;">${item.name}</p></div>`
let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="小程序原始id"path="小程序页面路径和参数">${script.outerHTML}</wx-open-launch-weapp>`
return html
}
最后需要注意几点:
1.微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上
2.小程序的web-view不支持wx-open-launch-weapp。
到这里就结束了。主要是细心xdm。可能我的描述还有遗漏,也可能我的表述不清晰。如有疑问,可以评论区告诉我。看到必回! 码字不易,还请一键三连!