首页 » 前端 » 正文

H5打开微信小程序

| 前端 | | 暂无评论 | 736 views

在用户增长业务中，通过各种取巧方式打开微信小程序是一个特别常见的业务需求，但是微信也不想就这么“被利用”，以前微信可能还是很好的分享渠道，但是随着更新迭代，已经关闭了很多入口。我们也是在业务需求下不停的寻找更多的解决办法。

一、URL Scheme

原理：
前端提供路径和appid，后端对接微信获取accesstoken和短链，最后前端负责跳转即可

实现：

1
location.href = 'weixin://dl/business/?t=xxxxxx'

参考：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
通过接口生成短链接：
1 获取accesstoken https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
2 获取短链 https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html
3 生成返回错误 https://blog.csdn.net/qiao_shi/article/details/121852432

问题：
适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
1、每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序；
2、每天生成URL Scheme和URL Link 总数量上限为50万；
3、针对非个人主体小程序开放。

二、开放标签

原理：
依旧需要后端生产签名，前端拼接自己需要的参数

实现：

1
2
3
4
5
6
7
8
9
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  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>

参考：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
获取签名：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

问题：
1、H5通过开放标签打开小程序的场景值为1167，也就是说，不是随便都可以跳的；
2、开放对象为认证的服务号，也就是说只能是企业和单位，个人想用需要用到云开发。

三、云开发

原理：
从官网done一个html页面，按照要求填写url和appid，丢到云上就行了，十分简单好用。具体可以参考下面。

实现：

这里的签名等，就不需要后端支持了，毕竟是花了钱的，果然就容易多了。

1
2
3
4
5
6
7
8
9
wx.config({
   // debug: true, // 调试时可开启
   appId: '小程序 AppID', // <!-- replace -->
   timestamp: 0, // 必填，填任意数字即可
   nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
   signature: 'signature', // 必填，填任意非空字符串即可
   jsApiList: ['chooseImage'], // 必填，随意一个接口即可
  openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

参考：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
费用：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/billing/price.html

问题：
很明显，就是收费，有强需求的可以考虑。

四、利用小程序做跳板

原理：
web-view中的页面接入JSSDK 1.3.2可以向小程序容器postMessage，小程序后退、组件销毁、分享、复制链接等情况下会触发原生bindmessage

实现：

1
2
// h5页面发送消息
wx.miniProgram.postMessage({ data: 'foo' })

参考：
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

问题：
1、跳转小程序会弹出确认对话框；
2、bindmessage有触发条件，交互上需要特殊处理

综上

每个方案都有对应的场景，并且都有优势和局限，基于平台的二次开发本来就有很多限制，根据需求来吧。相比之下，第四种方法应该影响最小，并且在之前做的美团医保支付业务中有实际应用，效果还行。

发表评论