微信公众号跳转小程序 wx-open-launch-weapp (最全指南及坑)
微信公众号使用 wx-open-launch-weapp 开放标签跳转小程序
注意事项
微信开放标签有最低的微信版本要求，以及最低的系统版本要求。
- 微信版本要求为：7.0.12及以上
- 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
使用步骤
1. 绑定域名
微信安全域名只能修改绑定3次/每月
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2. 引入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）
注：Vue 项目在入口 index.html 文件中引入，且注意 JS 版本，如若之前引入过低版本，wx-open-launch-weapp 标签会无法使用，无法正常跳转小程序
3. 通过config接口注入权限验证配置并申请所需开放标签
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: "XXXXXXXXXXX", // 必填，公众号的唯一标识
timestamp: this.timestamp, // 必填，生成签名的时间戳
nonceStr: this.nonceStr, // 必填，生成签名的随机串
signature: this.signautre, // 必填，签名
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",
"checkJsApi",
"scanQRCode"
], // 必填，需要使用的JS接口列表
openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
});
wx.ready(function() {
//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function(res) {
console.log('res',res);
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
开放标签使用
属性
| 名称 | 必填 | 默认值 | 备注 |
|---|---|---|---|
| appid | 是 | 所需跳转的小程序appid，即小程序对应的以wx开头的id |
|
| username | 否 | 所需跳转的小程序原始id，即小程序对应的以gh_开头的id（跳转时，有 appid 会优先使用appid，没有 appid 才会使用username） |
|
| path | 否 | 所需跳转的小程序内页面路径及参数 （假如 path="pages/home/index" 的路径无法实现跳转，可在后面加上.html，如 path="pages/home/index.html"） |
插槽
| 名称 | 必填 | 默认值 | 备注 |
|---|---|---|---|
| default | 是 | 跳转按钮模版及样式 |
事件
| 名称 | 冒泡 | 返回值 | 备注 |
|---|---|---|---|
| ready | 否 | 标签初始化完毕，可以进行点击操作 | |
| launch | 否 | 用户点击跳转按钮并对确认弹窗进行操作后触发 | |
| error | 否 | { errMsg: string } | 用户点击跳转按钮后出现错误 |
用例（html 页面）
// appid 是所需跳转的小程序appid，即小程序对应的以wx开头的id
// username 是所需跳转的小程序原始id，即小程序对应的以gh_开头的id
// 跳转时，有 appid 会优先使用appid，没有 appid 才会使用username
使用说明
所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。
如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。
插槽模版及样式均需要通过 进行包裹。
对于Vue等视图框架，为了避免template标签冲突的问题，可使用
进行代替，来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，以上用例中标签插槽中的default插槽为默认插槽，可不声明插槽名称。
对于标签事件，均可通过 event.detail 获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代 event.detail 中的内容。
另外，需要注意以下几点：
- 页面中与布局和定位相关的样式，如
position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上； - 对于有CSP要求的页面，需要添加白名单
frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。
（以上是官方文档使用说明）通俗点解释就是
html 页面可以用 标签包裹，
Vue 页面要改用 包裹
以下是 Vue 页面使用方法
注：
1. 标签中的内容在浏览器及开发工具中都无法显示，需要真机调试才有效
2. 正常情况下，会出现如下提示，大致意思是 wx-open-launch-weapp 标签未注册
需在 main.js 里面忽略编译自定义元素，否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于
Unknown custom element的警告，即如上图所示提示Vue.config.ignoredElements = ['wx-open-launch-weapp'];
