H5唤起微信小程序_h5拉起微信小程序

此文章讲述H5唤起微信小程序(可指定页面并携带参数)

一、H5微信外部浏览器唤起小程序(App里面嵌入的H5也可以唤起)

注意：生成URL Scheme的必要前提：小程序不能是个人的，小程序必须已经上线发布了

1、第一种：携带静态参数或者不携带参数生成URL Scheme

2、第二种：携带动态参数生成URL Scheme

1. 通过调用后台接口生成URL Scheme，将要跳转的小程序路径及动态参数传过去，后台返回一个URL Scheme
2. 调用demo

3、生成URL Scheme之后，就可以进行H5跳转了

window.open("weixin://dl/business/?t=test"); 

//weixin://dl/business/?t=test就是生成的URL Scheme
1
2
3

4、此时就应该跳转成功了，如果有参数携带，小程序中在跳转的页面进行接收

二、微信内部H5唤起小程序

1.主要是结合微信JSSDK的wx-open-launch-weapp唤起小程序

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

<wx-open-launch-weapp
    id="launch-btn"
    username="gh_XXXXX"
    weappid="wxd44d0XXX0f0dXXX"
    path="/pages/page/page.html?id=aaa"
>
    <script type="text/wxtag-template">
        <!--html页面展示代码-->
    </script>
</wx-open-launch-weapp>
1
2
3
4
5
6
7
8
9
10

2.参数说明

1. username 所需跳转的小程序原始id，即小程序对应的以gh_开头的id, 注意不是公众号的id
2. 对于path属性，所声明的页面路径必须添加.html后缀，如pages/home/index.html
3. 如果跳转提示缺少ID, 检查username对应原始ID是否正确

详细文档可点击这里