跳转小程序wx-open-launch-weapp踩坑之旅

684 阅读3分钟

开放标签

跳转小程序:wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

开放对象

  1. 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  2. 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

错误提示

若跳转时出现以下页面,表示网页绑定的服务号或小程序无权限,请检查是否符合上述开放对象条件。

无权限提示

image.png

用例

<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>

走到这一步是不是很开心完成了,很不幸,这就是坑的开始。。。。

走到这会发现文档上说明wx-open-launch-weapp上的username里指定了唯一, 也没有配置跳转体验版的方法,现在项目里有功能通过跳转传参的,测试的话没法测了,只能提到生产上测了,这样无疑很麻烦。所以我们不妨换个思路,把页面需要传递的参数携带着,然后扫码跳转到体验版。

这个时候可以用扫普通链接二维码打开小程序根据扫码进入到体验版,这个功能达到想要的效果。

扫普通链接二维码打开小程序

配置步骤: 微信公众平台->开发->开发设置->翻到最下面,扫普通链接二维码打开小程序->添加

WechatIMG264.png

二维码规则就是 就是h5的路径为了方便 可以在h5中写一个单独空白页 这个页面主要是获取想要传递的参数 然后拼接好一个测试链接, 这时候这个链接可以 展示在页面顶部,还有就是根据这个拼接的路径在页面生成一个二维码,这样测试人员就可以直接复制链接给开发人员,然后测试的时候只需要扫码即可,开发人员拿到路径添加到测试链接那里进行配置。

获取参数用例

设置好二维码规则后,等一会就可以扫描测试链接二维码了,此时应该能够进入小程序,扫描结果可以在onLoad的参数options.q中获取,获取的并不是产品id,而是整个网址,需要进行处理。要对获取的参数先进行解码,然后提取参数,通过正则表达式提取很简单,你也可以通过分割字符串获得参数。

onLoad(option) {
    if (option.q) {
        let q = decodeURIComponent(option.q);
        this.id = this.getQueryString(q, "id");
    }
},
methods: {
    getQueryString(url, name) {
        var reg = new RegExp("(^|&|/?)" + name + "=([^&|/?]*)(&|/?|$)", "i");
        var r = url.substr(1).match(reg);
        if (r != null) {
          return r[2];
        }
        return null;
    }
}

完结。