H5跳转微信小程序

286 阅读1分钟

1、使用说明

1、 引入http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)、JS接口安全域名;
2、 通过config接口注入权限验证配置并申请所需开放标签:openTagList: ['wx-open-launch-weapp'];
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
3、版本要求:
微信版本要求为:7.0.12及以上
系统版本要求为:iOS 10.3及以上
Android 5.0及以上。
基础库:2.11.3

2、代码示例

<wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="pages/home/index.html">
        <template>
                <style>
                    .btn {
                        display: block;
                        width: 80%;
                        height: 50px;
                        text-align: center;
                        border: 1px solid #fff;
                        background-color: #1083cd;
                        color: #000;
                        font-size: 18px;
                        margin: 0 auto;
                        line-height: 50px;
                    }
                </style>
                <button class="btn">打开xx小程序</button>
          </template>
</wx-open-launch-weapp>

//若提示template is missing之类的错误提示,使用script标签:text/wxtag-template

<wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="pages/home/index.html">
    <script type="text/wxtag-template">
                <style>
                    .btn {
                        display: block;
                        width: 80%;
                        height: 50px;
                        text-align: center;
                        border: 1px solid #fff;
                        background-color: #1083cd;
                        color: #000;
                        font-size: 18px;
                        margin: 0 auto;
                        line-height: 50px;
                    }
                </style>
                <button class="btn">打开xx小程序</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>