微信外部浏览器唤起微信小程序

目的：通过发送短信召回流失用户。

官方文档地址

• https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

步骤一

• 该API我们主要用到的配置如下：
• jump_wxa：跳转到的目标小程序信息。该对象内包含两个字段。
• path：通过scheme码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带query
• query：通过scheme码进入小程序时的query。

步骤二

• 需要注意的是，query必传，然而如果我们需要跳转的页面不需要参数，也需要配置上query，默认我们填写的是from=sms, 用于统计是从短信渠道来的。

步骤三

• 与后端约定access_token 通过前端传递appKey进行区分，传哪个微信小程序的appKey 就生成对应小程序的access_token。

步骤四

• 支持设置scheme的过期时间，默认永久，我们的应用场景很少，暂不详说。

步骤五

• 代码里操作如下，由后端聚合参数信息。

let postData = {
  appKey: 'QTSHE_MINI_APP',
  path: 'pages/partdetails/partdetails',
  query: 'partJobId=123456' || 'a=1'
}
this.$axios.post('xxx', postData).then((res) => {
  if (res.success) {
    const url = res.data.openlink
    // 将scheme转为我们平台的短链接，否则在安卓手机上无法打开微信小程序，会默认打开浏览器搜索。
    this.$axios.get(`xxx`, {url}).then((res) => {
      if (res.success) {
        this.shortLink = res.data // 将weixin://xxxx 转换为 https://b.qtshe.com/xxx
      }
    })
  } else {
    this.$Message.error('获取失败，请稍后重试')
  }
}).catch((err) => {
  console.log(err)
  this.$Message.error('获取失败，请稍后重试')
})

微信内部浏览器唤起小程序

官方文档地址

• https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

步骤一

• 首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，未配置会导致wx.config签名失败，导致无法使用开放标签。

步骤二

• 在需要调用JS接口的页面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js，1.6.0版本内才增加了上述标签，低于该版本的都无法显示。

步骤三

• 通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签，内置两个开放标签 wx-open-launch-app 微信h5唤起本地已经安装的app，以及 wx-open-launch-weapp 微信h5唤起小程序，操作如下：

wx.config({
  debug: false,
  appId: window.g_info.wx_appid, // 全局变量appId
  timestamp: data.data.timestamp, // 调用微信接口返回的
  nonceStr: data.data.nonceStr, // 调用微信接口返回的
  signature: data.data.signature, // 调用微信接口返回的
  jsApiList: ['openLocation', 'getLocation'], // 这里需要任意填写api，不能为空
  openTagList: [
    'wx-open-launch-app',
    'wx-open-launch-weapp'
  ]
})

注意点

• 对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"></script>进行代替，来包裹插槽模版和样式。
• 页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
• 对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

// Vue里操作代码如下，如果需要写样式，最好是外部包一个div进行样式编写，内部的内容宽高100%即可，调试样式可使用微信开发者工具的网页模式：

.quick-btn {
  // 这里写样式
  width: 3.43rem;
  height: 0.96rem;
  display: flex;
  img {
    width: 100%;
    display: block;
  }
}

<div class="quick-btn">
  <img src="https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" />
</div>

示例效果

为了方便运营同学，做了个工具给他们使用。

2023年4.11号新版本后的改版方案：

首先做一个落地页：https://b.qtshe.com/1DF43E

代码如下：

import toast from 'toast'
export default {
  created() {
    this.init()
  },
  methods: {
    // 获取微信scheme地址，并且主动跳转一次
    init() {
      this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => {
        if (res.success) {
          window.location.href = res.data
        } else {
          toast(res.msg)
        }
      }).catch(() => {
        toast('服务器错误，请稍后重试')
      })
    }
  }
}

原理：通过地址栏配置需要跳转的参数，h5页面拿到参数后通过接口转换为weixin://xxxx 开头的scheme协议地址，并且主动location.href一次。这样能保证用户每次打开都是新的scheme地址，针对一天50w数量上限的问题，可尝试同一个用户在固定时间内相同的参数，返回相同的scheme地址。

以上限制只存在于除微信外的外部浏览器，微信容器里没有以上的限制。

2023年12月18日后方案：

官方公告如下：

https://developers.weixin.qq.com/community/develop/doc/00024e32cbc36055c0c0a34b066401 ，没有外部浏览器、微信环境的限制，可以被多人打开。

使用方式通过明文拼接：

weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*

示例:

// query需要encode编码，ENV_VERSION为控制打开开发版、体验版、线上版本
weixin://dl/business/?appid=wxa7b0b022472e55e6&path=pages/partdetails/partdetails&query=partJobId%3D123456

通过明文 URL Scheme 拉起的小程序（页面）必须要提前在「小程序管理后台 -> 设置 -> 隐私与安全 -> 明文 scheme 拉起此小程序」中进行声明；

• 小程序：配置能够通过明文 scheme 进入的小程序页面

这一点很烦很烦，希望能支持下 默认可打开所有的，不然每次都得去配置。