微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app

以前微信浏览器内想要直接唤醒 app 要么接微信的应用宝要么你是腾讯的干儿子。 而在微信在2020年5月分推出了“微信开放标签”功能 wx-open-launch-app 用于微信浏览器内直接唤醒 app ，也可通过携带参数直接进入app相应的内页。 现在不是干儿子，只要按照规定接入微信SDK就直接可以使用此功能。     真机演示 1、微信浏览器内 h5 网页   2、点击后会弹出微信 Native 的弹层提示确认是否唤起 app   3、成功唤起 app 并进入相应的页面       一、适用环境 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上   二、接入微信JS-SDK 按微信JS-SDK要求绑定安全域，并通过config接口注入权限验证配置 接js-sdk可参见我加一篇博文  微信JS-SDK“分享信息设置”API及数字签名生成方法（NodeJS版本） https://www.cnblogs.com/willian/p/4254963.html  

wx.config({
    appId: '',
    debug: true,
    timestamp: '',
    nonceStr: '',
    signature: '',
    jsApiList: [
        'onMenuShareTimeline', // 分享给好友
        'onMenuShareAppMessage', // 分享到朋友圈
    ],
    openTagList: ['wx-open-launch-app’] // 获取开放标签权限
});

需要注意的点： 1、符合开放平台列出的要求 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html 2、app 需要根据接入微信 sdk https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html 3、wx.config 内列出使用到的 openTagList   在微信开发者工具内打开你的网页测试如果显示

{errMsg: "config:ok”}

说明你已经接入JS-SDK成功了

遗憾的是截至2020年7月13号为止，微信开发者工具还是无法支持微信开放标签的调试功能，只能在手机上调试并且是在加了微信安全域名的服务器环境下调试，着实麻烦

三、在 VUE 项目内使用 wx-open-launch-app 由于 wx-open-launch-app 这个标签在VUE项目编译时识别不了会报错，得在main.js文件内加上忽略报错的代码

// 忽略自定义元素标签抛出的报错
Vue.config.ignoredElements = [
    'wx-open-launch-app',
];

new Vue({

    el: '#app',

    template: '',

    components: { app }
})

wx-open-launch-app 标签组件

app
    :id="id"
    class="launch-btn"
    :appid="appId"
    :extinfo="extinfoStr"
    >
    

注意 1、标签内的原本的