使用wx-open-launch-app跳转app踩坑历程

MAYOHA
4,681 阅读4分钟

前言

记录自己使用wx-open-launch-app跳转app踩坑历程，方便自己以后查阅，每个人际遇不一样，分享出来仅共大家参考。
Android版本：11
微信版本：8.0.10

准备工作

  1. 已认证的服务号

image.png
公众号右上角可查看自己的是否认证，不过我们这个它不是没有认证成功，是因为咱们的名字里有视频两个字所以他的状态显示未认证而已，实际上是认证完了的。如果自己不太确定可以问相关负责人。

  1. 已认证的开放平台账号

image.png
可在账号中心查看是否已认证

  1. 服务号与开放平台账号必须同主体

服务号可在公众号设置里查看主体，开放平台账号可在账号中心里查看主体

  1. 开放平台绑定服务号

在开放平台的管理中心/公众账号中查看

  1. 开放平台服务号设置网页跳转移动应用关联

在开放平台的管理中心/公众账号中点击查看进行操作
image.png
JS接口安全域名在服务号公众号设置/功能设置中
移动应用Appid在开放平台管理中心/移动应用中，根据自己的应用进行选择
image.png

这里额外说一下关于AppID的问题，开放平台绑定的每个移动应用都有一个AppID（为了方便后面的描述，这里我们把他叫做移动应用ID）,然后服务号那边有一个AppID（这里我们叫做开发者ID），千万不要把这两个搞混了！！！！我就吃过这个亏。。。。

  1. 确定安全域名只绑定了一个移动应用

开始开发

获取签名

获取签名这一块由后段的同事来完成，原因很简单，因为获取access_token要的ip必须加入服务号的ip白名单中，而我们本地的IP不是固定的。关于这一块，官方文档写的详细。
获取签名
调用这个接口我们会获取到如下参数appId、timestamp、nonceStr、signature

config配置

  1. 引入js文件--res.wx.qq.com/open/js/jwe… （支持https）
  2. 填写config配置
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开
  appId: '', // 必填，开发者ID
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表, 我们这里填个这个就能唤起app了
  openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
});

完整示例

// 此处appID为应用ID！应用ID！应用ID！！！
<wx-open-launch-app id="openApp" appid="xxx" extinfo="">
  <!-- template为必选项 -->
  <template>
    <button>App内查看</button>
  </template>
</wx-open-launch-app>

<script>
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开
    appId: '', // 必填，开发者ID
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
    openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
  });
  wx.ready(() => {
      console.log("ready")
  })
  wx.error(() => {
    console.log("error")
  })
  var btn = document.getElementById('openApp');
  btn.addEventListener('launch', () => {
    console.log('success');
  });
  btn.addEventListener('error', (e) => {
    console.log('fail', e.detail);
  });
</script>

关于 extinfo 通常传入的是一个url，用来打开指定的页面，这里有一点需要注意的是，我们应使用一个自定义的scheme，否则我们在打开App 的过程中会出现一个选取浏览器的过程
到了这一步，除了样式以外，前端的工作已经全部完成。
若进入调试页面弹窗{"errMsg":"config:ok"}，则说明没有问题了

关于未成功唤醒App

当我们完成上述工作之后，准备唤起我们的app的时候，发现居然不好使！！
你遇见的问题可能是这样的

  1. IOS能成功唤起，Android无法唤起
  2. Android在后台运行时，能成功唤起app，当结束app进程时，无法唤起
  3. Android唤起app之后，出现一层蒙版导致无法点击

出现这一系列问题，大概率是SDK关于Android和IOS的接入配置有问题，找相关同事处理。参考以下文档
IOS接入指南
Android接入指南
当然你也可以在微信开放社区里搜寻答案

样式设置

  1. wx-open-launch-app 这个标签可以加样式style
  2. wx-open-launch-app 标签外部样式和内部样式是隔离的
<wx-open-launch-app id="openApp" appid="wxf192a1452e01ee9c">
  <template>
    <!-- 外部的样式无法作用到template内 -->
    <style>
      .btn{
        padding: 100px;
      }
    </style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

参考

开放标签说明文档
微信内网页跳转APP功能

avatar
文章
阅读
粉丝