注意的点:
1. 域名要与公众号后台配置的安全域名一致
2. wx-open-launch-app标签在调试的时候不会显示,真机上wxconfig初始化ok后才会显示
开发流程:
1. JS:从接口获取wxconfig配置(appId、timestamp、nonceStr、signature)进行wx.config初始化
const {wxconfig} = res; // 接口获取的wxconfig
wx.config({
debug: true, // 开启调试模式
appId: wxconfig.appId, // 必填,公众号的唯一标识
timestamp: wxconfig.timestamp, // 必填,生成签名的时间戳
nonceStr: wxconfig.nonceStr, // 必填,生成签名的随机串
signature: wxconfig.signature, // 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: ["wx-open-launch-app"] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
2. HTML:launch成功回调,error失败回调,extinfo携带给App的参数,appid如代码所示(这里的appid和上面接口获取的appid不一致)
需要注意的是vue2不能直接用script标签,这里需要用component处理一下
<wx-open-launch-app
id="launch-btn"
@error="handleError"
@launch="handleLaunch"
:extinfo="JSON.stringify(extinfo)"
appid="App的应用id,App从微信拿取"
>
<component is="script" type="text/wxtag-template">
<button>微信H5唤起App</button>
</component>
</wx-open-launch-app>