taxpolat

最近接到一个需求,要求实现从微信公众号h5页面跳转到指定的小程序页面。就查到微信开放标签,但是使用起来真的是有点。。。。,分享下我的实现过程;

补充一点:所要跳转的小程序必须要是正式版。

步骤一:绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

备注:支持使用 AMD/CMD 标准模块加载方法加载

(我用框架是Vue,如果是类似的框架在index.html标签 引入即可)

步骤三:获取签名及wx.config参数所需的参数

以Vue框架为例,wx.config所需要的的参数有如下:

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

以上的除了jsApiList,openTagList,其他的内容都是由后端返回,调用接口直接使用就好。

created() {
    http({
      method: \'POST\',
      url: "xxxxxxx",// 请求接口的url
data: { url:window.location.href.split(
\'#\')[0] }, headers: { "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8" } }).then(res => { console.log(wx) wx.config ({ appId:res.data.appId, timestamp:res.data.timestamp, nonceStr: res.data.noncestr, signature:res.data.signature , jsApiList: ["onMenuShareTimeline"], openTagList: [\'wx-open-launch-weapp\'] }); // 通过ready接口处理成功验证 wx.ready(() => { var btn = document.getElementById(\'launch-btn\'); btn.addEventListener(\'launch\', function (e) { }); btn.addEventListener(\'error\', function (e) { console.log(\'fail\', e.detail); }); }); // 通过error接口处理失败验证 wx.error(function (res) { console.log(res) }); }).catch(err =>{ console.log(err); }); }

想要使用微信开放标签的第一步是config得成功,不然后出现各种错误,

步骤四:使用标签

HTML代码如下:

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_xxxxx"
        path="pages/index/index.html"
      >
        <script type="text/wxtag-template">
          <div>
            <style>
              .btn{
                outline: none;
                width: 300px;
                height: 45px;
                border: 1px solid rgba(240, 131, 0, 1);
              }
            </style>
            <button class="btn">立即跳转</button>
          </div>
        </script>
      </wx-open-launch-weapp>

1.username:是所要跳转的小程序的原始Id,不是appId

2.path:是所要跳转的小程序的页面,页面路径后面必须要加.html后缀。

 

微信开放标签有最低的微信版本要求,以及最低的系统版本要求。

如果开发过程中出现以下情况的,要确认一下,微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

分类:

技术点:

相关文章: