H5跳转微信小程序

搬砖大陈
626 阅读3分钟

1. 微信内(公众号)跳转小程序

微信内的网页如需打开小程序请使用微信开放标签 - 小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。

开放对象:

  1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
通过 config 接口注入权限验证配置并申请所需开放标签

与使用 JS-SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次）。开放标签的申请和 JS 接口的申请相互独立，因此是可以同时申请的。

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的 JS 接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

签名算法见 JS-SDK 说明文档的附录

H5代码
<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>
官网示例

复制下面链接在浏览器或者微信中打开，将会跳转到微信官方的 "小程序示例" 小程序。

postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm…

2. 微信外H5跳转小程序

自从小程序在2022年3月发布的通知，之前永久型的URL Scheme已经无法再从微信公众平台->工具中生成。

image.png

按照微信小程序官网的说明，后续都需要通过服务端调用去获取URL Scheme。 生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过 Scheme 跳转小程序。 Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

服务端相关接口
获取Scheme
POST  https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
获取ACCESS_TOKEN
GET https://api.weixin.qq.com/cgi-bin/token
请求ACCESS_TOKEN参数
属性类型必填说明
grant_typestring是填写 client_credential
appidstring是小程序唯一凭证，即 AppID，可在「微信公众平台 - 设置 - 开发设置」页中获得。（需要已经成为开发者，且帐号没有异常状态）
secretstring是小程序唯一凭证密钥，即 AppSecret，获取方式同 appid
注意事项
  1. 单天生成Scheme+URL Link数量超过上限50万
  2. URL Scheme有效期最长 30 天
  3. 微信外H5,URL Scheme跳转链接只能单独使用。一人使用后另外一人无法使用。
建议流程

image.png

参考文档
  1. generateScheme接口链接developers.weixin.qq.com/miniprogram…
  2. 云开发静态页面developers.weixin.qq.com/doc/offiacc…
  3. 获取URL Scheme developers.weixin.qq.com/miniprogram…
  4. 调整规则developers.weixin.qq.com/community/d…
avatar
文章
阅读
粉丝