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

本文详细介绍了微信H5唤起App的配置步骤和开发流程,包括在JS中获取并初始化wxconfig,设置wx-open-launch-app标签,并在HTML中处理launch成功和失败的回调。特别指出在vue2中处理script标签的注意事项,以及launch-app标签的appid配置。
摘要由CSDN通过智能技术生成

注意的点:

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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值