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。可能我的描述还有遗漏，也可能我的表述不清晰。如有疑问，可以评论区告诉我。看到必回!   码字不易，还请一键三连！