uniapp开发h5,引入微信开放标签实现h5跳转小程序功能,全网最全最细踩坑记录

先贴上微信开放标签的官方文档

一、概述流程

首先需要在项目中引入微信的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。可能我的描述还有遗漏,也可能我的表述不清晰。如有疑问,可以评论区告诉我。看到必回!   码字不易,还请一键三连!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柑橘乌云_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值