使用微信开放标签＜wx-open-launch-weapp＞的踩坑日记

最近在完成H5跳转小程序需求时，使用到了微信官方退出的开放标签<wx-open-launch-weapp>，来谈一谈使用的心得和不足。

1、适用环境

微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

2、接入微信的JS-SDK

按微信JS-SDK要求绑定安全域，并通过config接口注入权限验证配置

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [], // 必填，需要使用的JS接口列表openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

这里附录微信官方教程微信开放文档

贴个我用的方法

    /*** H5跳转小程序*/registerWXJumlSDK (that, callback) {const jsApiList = ['onMenuShareTimeline','onMenuShareAppMessage','closeWindow','showMenuItems','hideOptionMenu','showOptionMenu','hideAllNonBaseMenuItem','onMenuShareQQ','chooseWXPay',]// console.log(Vue.$api);const _this = thatconst openTagList = ['wx-open-launch-weapp']let weapp = {originid: '', // 所需跳转的小程序原始id，即小程序对应的以gh_开头的idpath: '', // 所需跳转的小程序内页面路径及参数}let urls = ""let u = navigator.userAgentif (/ipad|iphone|mac/i.test(u)) {urls = _this.$store.state.configUrl.split("#")[0]} else {urls = encodeURIComponent(location.href.split("#")[0])}// 签名算法的接口_this.$api.jsTicket({ url: urls }).then((res) => {var resData = res.contentif (resData.resultCode == 1) {wx.config({appId: '', // 必填，公众号的唯一标识timestamp: '', // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '', // 必填，签名，见附录1debug: false,jsApiList: '',openTagList: openTagList})callback(weapp)// return weapp }}).catch((e) => {})},

在微信开发者工具内打开你的页面如果显示

{errMsg: "config:ok”}

就说明你已经介入wx的js-sdk成功了

3.使用开放标签(vue)

贴个最简单的应用

<wx-open-launch-weappid="launch-weapp1"username="xxxxxx"path="xxxxxx"@launch="onLaunch"@error="onError"
><script type="text/wxtag-template"><div style="font-size: 14px;margin-top: 10px;text-align: center;">打开小程序</div></script>
</wx-open-launch-weapp>

坑的地方来了：你会发现在微信开发者工具中没有显示还报错

在微信开发者工具中没有显示是因为微信开发者工具还是无法支持微信开放标签的调试功能，只能在手机上调试并且是在加了微信安全域名的服务器环境下调试(￣︶￣)

报错是在提示你没有在vue中注册过改组件，你只需要在main.js中写上下面一句代码就可以了

Vue.config.ignoredElements = ['wx-open-launch-weapp']

除了这点外还有以下几个坑点

不能用js来模拟点击，有了局限性
样式无法写在外面中，只能在script标签内内链写或者行内样式
无论是内链还是行内都不支持rem
不会继承样式
如果开发标签内需要使用图片，不能用本地图片，得用外网可以访问的图片，要不然会不显示

4.动态渲染

经过实验发现是可以动态渲染的

<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
}

这样就实现了动态渲染

最后在贴个官方的适用用例

<wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx"path="pages/home/index.html?user=123&action=abc"
><template><style>.btn { padding: 12px }</style><button class="btn">打开小程序</button></template>
</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>

使用微信开放标签＜wx-open-launch-weapp＞的踩坑日记相关推荐

微信开放标签wx-open-launch-app唤醒app踩坑记录,launch:fail问题解决
微信开放标签调试了一天,各方面都正常,但是一直报错launch:fail,百思不得其解,早网上搜答案,辛得指点,原来问题如下如果要唤醒app,必须使用sdk生成的卡片,或者使用微信开发者工具的浏览功 ...
微信开放标签--H5唤醒手机app/跳转微信小程序
木剑前提代码注意前提微信版本要求为:7.0.12及以上系统版本要求为:iOS 10.3及以上.Android 5.0及以上与微信小程序绑定的微信公众号必须为已认证的服务号让专门管理微信 ...
微信开放标签使用注意说明
先放上微信开放标签开发文档链接目录 | 微信开放文档开放对象已认证的服务号,服务号绑定"JS接口安全域名"下的网页可使用此标签跳转任意合法合规的小程序. 已认证的非个人主体的 ...
微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
一.微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤.如果是公众号身份的网页,需要绑定安全域名.具体参见微信开放文档二.vue.config.js配置因为在vue项目中,直接使 ...
微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞
微信开放标签说明文档使用微信开放标签前置条件 1.绑定域名登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名" 2 ...
微信开放标签＜wx-open-launch-app＞之Vue项目H5唤醒APP
微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP 在微信开放标签出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link ...
vue3项目中使用微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
一.使用前置条件微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤.如果是公众号身份的网页,需要绑定安全域名.具体参见官方文档. 二.vue.config.js配置在vue项目中 ...
微信开放标签踩坑记录
先上微信官方文档微信文档以下要注意的点: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 微信sdk版本需要在1.6.0以上,版本过低 ...
vue与微信开放标签，调起app
使用微信开放标签 <wx-open-launch-app></wx-open-launch-app>调起分享到微信网页中的app 此开放标签只能在线上显示,本地与测试环境均不显 ...