最近接到一个需求，要求实现从微信公众号h5页面跳转到指定的小程序页面。就查到微信开放标签，但是使用起来真的是有点。。。。，分享下我的实现过程；
补充一点：所要跳转的小程序必须要是正式版。
步骤一：绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载
（我用框架是Vue，如果是类似的框架在index.html标签 引入即可）
步骤三：获取签名及wx.config参数所需的参数
以Vue框架为例，wx.config所需要的的参数有如下：
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: \'\', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: \'\', // 必填，生成签名的随机串 signature: \'\',// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [] // 可选，需要使用的开放标签列表，例如[\'wx-open-launch-app\'] });
以上的除了jsApiList，openTagList，其他的内容都是由后端返回，调用接口直接使用就好。
created() { http({ method: \'POST\', url: "xxxxxxx",// 请求接口的url
data: { url:window.location.href.split(\'#\')[0] }, headers: { "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8" } }).then(res => { console.log(wx) wx.config ({ appId:res.data.appId, timestamp:res.data.timestamp, nonceStr: res.data.noncestr, signature:res.data.signature , jsApiList: ["onMenuShareTimeline"], openTagList: [\'wx-open-launch-weapp\'] }); // 通过ready接口处理成功验证 wx.ready(() => { var btn = document.getElementById(\'launch-btn\'); btn.addEventListener(\'launch\', function (e) { }); btn.addEventListener(\'error\', function (e) { console.log(\'fail\', e.detail); }); }); // 通过error接口处理失败验证 wx.error(function (res) { console.log(res) }); }).catch(err =>{ console.log(err); }); }
想要使用微信开放标签的第一步是config得成功，不然后出现各种错误，
步骤四：使用标签
HTML代码如下：
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxx" path="pages/index/index.html" > <script type="text/wxtag-template"> <div> <style> .btn{ outline: none; width: 300px; height: 45px; border: 1px solid rgba(240, 131, 0, 1); } </style> <button class="btn">立即跳转</button> </div> </script> </wx-open-launch-weapp>
1.username：是所要跳转的小程序的原始Id，不是appId
2.path：是所要跳转的小程序的页面，页面路径后面必须要加.html后缀。
微信开放标签有最低的微信版本要求，以及最低的系统版本要求。
如果开发过程中出现以下情况的，要确认一下，微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
