实际项目中，我们期盼微信内置的h5网页能够拉起微信小程序，终于在2020年3月份，微信推出了开放标签，能够让我们在微信端调起小程序；

微信配置

1.测试公众号

非常重要：必须是已经认证成功的服务账号；个人测试账号是不可以的；

上面标注必须是已认证

2.配置微信接口

微信jsSdk的版本 1.6.0
获取已经认证的服务账号的appid等信息，进行配置；

 wx.config({
   debug: false,
     appId: data.data.appid,
     timestamp: data.data.timestamp,
     nonceStr: data.data.noncestr,
     signature: data.data.signature,
     jsApiList: jsApiList, //微信配置
     openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
})

此时我们已经获得了微信给我们的开放的标签；wx-open-launch-weapp;

3.配置标签

在vue的框架中进行配置

  <div class="button-wrapper" >
          <wx-open-launch-weapp 
            id="to-webapp small"
            :username="webappConfig.username"
            :path="webappConfig.path"
            @launch="launch"
            @ready="ready"
            @error="error"
          >
            <script type="text/wxtag-template">
              <style>
              .to-lead{
                width: 140px;
                height: 190px;
               }
              </style>
              <div class="to-lead"></div>
            </script>
          </wx-open-launch-weapp>
        </div>

• username 是所需跳转的小程序原始id，即小程序对应的以gh_开头的id
• path 所需跳转的小程序内页面路径及参数
• 文档中的template 在框架中需要改成script标签的形式；
• wx-open-launch-weapp内的内容为插槽格式，因此需要给标签自定义上样式
• 样式中的px在移动端可能存在适配的问题，因此可以进行简单的适配

4.兼容性

微信的开放标签是在2020年才支持的，因为对于微信的老版本而言可能存在适配的问题，所以需要进行版本的适配；

获取微信的版本

 var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);

比较版本

 // comVersion(wechatInfo[1], "7.0.12")
 function comVersion(version1, version2) {
      version1 = version1.split(".");
      version2 = version2.split(".");
      for (var i = 0; i < version1.length; i++) {
        if (version1[i] > version2[i]) {
          return true;
        }
      }
      return false;
    }

5.配置成功

自己进行回调即可，微信的标签中 提供了几个方法，

问题坑点记录

1.微信开发工具中不显示按钮

目前微信开放标签只支持微信真机中的内容查看，不支持微信开发工具

2.微信真机中标签不显示

2.1.查看微信配置是否正确 此时涉及到微信公众号的相关配置

• 配置失败

当微信配置失败时候，原因有很多，可自行查找微信对应api进行排除；

• 配置成功

2.2 配置成功 查看当前公众号权限

当所有的内容均配置成功了，但是还是没有调起小程序----

• 微信服务号 必须要认证成功
• 微信公众号中的开发者配置，里面的获取js的权限域名添加，需要加上当前的域名
• 可申请一个线上的服务号用于测试呀～

3.微信小程序样式坑点

在微信端的wx-open-launch-weapp的标签需要在script中写内容，因此对于复杂的样式，是非常难调试的，比如按钮的宽度，按钮中文字居中的样式，因此在标签内部的样式可以采用图片的格式进行固定，不过任何都是有风险的，所以还是需要一步一步的进行调试和整合；

参考文档

微信开放标签配置