Vue2使用微信wx-open-launch-app唤起App

注意的点：1. 域名要与公众号后台配置的安全域名一致2. wx-open-launch-app标签在调试的时候不会显示，真机上wxconfig初始化ok后才会显示开发流程：1. JS：从接口获取wxconfig配置(appId、timestamp、nonceStr、signature)进行wx.config初始化const {wxconfig} = res; // 接口获取的wxconfigwx.

qq_32624607

1557人浏览 · 2022-04-25 10:03:10

qq_32624607 · 2022-04-25 10:03:10 发布

注意的点：

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>