通过微信开放标签唤起APP操作

1、背景

通过APP分享到微信中,在微信默认浏览器打开H5页面后,点击页面按钮,跳回APP并打开分享出去的对应页面。

2、技术路径

通过微信开放标签实现在微信默认浏览器打开后唤起APP操作。

3、具体实现路径

3.1 按照微信开放标签的使用步骤

(1)在公众号的功能设置中填写js安全域名

将XX.txt文档下载,然后上传到域名服务器的根路径下。

(2)引入微信js接口

js 复制代码
npm install weixin-js-sdk

安装完成后,引入

index.js 复制代码
import wx from 'weixin-js-sdk';

(3)通过config接口注入权限验证配置并申请所需开放标签

index.js 复制代码
// 微信配置
wechatConfig(data) {
  // 通过config接口注入权限验证配置并申请所需开放标签
  let { timestamp, nonceStr, signature } = data
  wx.config({
    appId: this.weixinFwhID,//服务号(或者公众号)id
    timestamp: timestamp,// 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature,// 必填,签名
    jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],// 必填,需要使用的JS接口列表
    openTagList: ['wx-open-launch-app'] //需要使用的开放标签列表
  })
  wx.error(function (err) {
    console.log('err--->' + err)
  })
},

其中签名校验必填字段可以通过服务端接口提供直接获取即可。

(4)使用开放标签 wx-open-launch-app 跳转APP

index.vue 复制代码
<wx-open-launch-app
    v-if="isWeixin"
    id="launch-btn"
    :appid="weixinYDId"//移动开发平台ID(移动appid)
    :extInfo="extinfoStr"//参数
    @error="handleErrorFn"//失败回调
    @launch="handleLaunchFn"//成功回调
  >
    <script type="text/wxtag-template">
      <style>
      .btn {
        height: 30px;
        line-height: 30px;
        padding:0 13px;
        text-align: center;
        background: #2E78FA;
        border-radius: 15px;
        font-weight: 500;
        font-size: 15px;
        color: #FFFFFF;
        border:none;
      }
      </style>
      <button class="btn">跳回APP</button>
    </script>
  </wx-open-launch-app>

成功和失败的回调函数。例如:跳转失败提示进入下载APP页面;跳转APP成功埋点上报等。

index.js 复制代码
// 监听error 函数
handleErrorFn(e) {
  console.log('跳转失败---e' + JSON.stringify(e))
  if (e.detail.errMsg === 'launch:fail') {
    // 引导用户跳转下载页
    window.location.href = this.downloadUrl
  } else if (e.detail.errMsg === 'launch:fail_check fail') {
    console.log('appid未绑定未关联到微信');
  }
},
// 监听launch 函数
handleLaunchFn(e) {
  console.log('跳转成功', JSON.stringify(e))
  //埋点上报操作等
},

至此,微信公众号绑定域名正确,服务号id,APP的id,以及服务端接口签名校验通过,前端H5项目打包部署。一切流程都无异常后,通过APP端内分享到微信好友或者朋友圈的卡片链接点击查看详情后,点击详情中的"跳回APP"按钮,能跳回到指定的APP中。

3.2 跳回APP中并打开指定的页面

这一步需要和APP约定好传递的参数,APP获取到这些参数后再传给指定页面就可以在微信唤起APP的时候打开指定的页面。

相关推荐
程序员是干活的9 分钟前
Java EE前端技术编程脚本语言JavaScript
java·大数据·前端·数据库·人工智能
南囝coding32 分钟前
Coze 开源了!所有人都可以免费使用了
前端·后端·产品
CDwenhuohuo33 分钟前
滚动提示组件
java·前端·javascript
说码解字40 分钟前
Kotlin 内联函数
前端
PineappleCoder40 分钟前
性能优化与状态管理:React的“加速器”与“指挥家”
前端·react.js
_一两风42 分钟前
深入理解React中的虚拟DOM与Diff算法
前端
GoodTime43 分钟前
CodeBuddy IDE深度体验:全球首个产设研一体AI工程师的真实使用报告
前端·后端·架构
前端的日常1 小时前
说说你对 React Hook的闭包陷阱的理解,有哪些解决方案?
前端
t_hj1 小时前
Scrapy
前端·数据库·scrapy
小唐快跑1 小时前
🚀 2025 VS Code前端开发环境搭建指南:从入门到精通(含插件推荐+配置代码)
前端