阅读 715

微信小程序--H5跳转小程序踩过的那些坑

前言

需求场景:通过微信官方提供的开放标签,开发者可以使用此标签进行h5网页跳转到微信小程序页面。

步骤

1、绑定域名

登录微信公众平台,设置JS接口安全域名

2、引入JS文件(1.6.0版本)

res.wx.qq.com/open/js/jwe…

3、通过config接口注入权限验证配置并申请所需开放标签

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

4、开放标签

官方demo

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
复制代码

注意

  • path路径必须带.html(官方没有说明)
  • 官方解释,对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>进行代替,来包裹插槽模版和样式。

改写demo

<wx-open-launch-weapp id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc">
  <script type="text/wxtag-template">
    <div class="btn">
        打开小程序
    </div>
  </script>
</wx-open-launch-weapp>
})
复制代码

自定义样式问题

在开放标签里引入样式,发现不生效,于是想到了定位的方式,透明度设为0。

#launch-btn{
  width: 8.9333rem;
  height: 4.56rem;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity: 0;
}
复制代码

即使用了定位的方式,发现样式无法撑开,最后用了最老土的方式,用文字撑开。

<wx-open-launch-weapp id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc">
  <script type="text/wxtag-template">
    <div class="btn">
        打开小程序 打开小程序 打开小程序 打开小程序 打开小程序
    </div>
  </script>
</wx-open-launch-weapp>
})
复制代码

总结

  1. 需要配置JS接口安全域名
  2. jssdk的版本1.6.0
  3. path需要加.html
  4. 自定义样式问题,这里使用定位的方式,并用文字撑开了高度

参考文档

微信中h5网页跳转小程序

H5跳转小程序点击按钮各种样式注入无法撑开问题

微信小程序官方文档

文章分类
前端
文章标签