微信公众号跳转小程序 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 中的内容。

另外，需要注意以下几点：

1. 页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
2. 对于有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'];