评论

h5跳转小程序,wx-open-launch-weapp开放标签使用问题

h5跳转小程序上的踩坑日记

分享一下h5跳转小程序的使用心得和踩坑日志

自从官方发了h5跳转小程序的功能公测公告,心情激动不已

废话不多说先上代码,我的项目是html,仅供html项目参考

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_XXXXXXXX"
  path="pages/mine/mine.html"
>
  <template>
  	<style>.btn { padding: 12px }</style>
	<button class="btn">打开小程序</button>
  </template>
</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>

这里按照官方文档说明即可

但是我在微信开发工具上的公众号网页调试模式看不到按钮,在手机上ios和安卓都能看到,估计是必须在微信内置的浏览器里访问才可以显示,具体还得等官方回答

再来看一下wx.config的代码

wx.config({
  debug:true,
  appId:"wxXXXXXXXXXXXX",
  timestamp:data.data.timestamp,
  nonceStr:data.data.nonceStr,
  signature:data.data.signature,
  jsApiList:['onMenuShareWeibo'],
  openTagList: ['wx-open-launch-weapp']
})

这里就是我踩坑的地方,一开始以为用不到jsApiList所以就写成了jsApiList:[],然后微信开发工具上显示config:ok,但是手机上就显示config:fail,

【jsApiList】如果不用也得写,随便写一个

必须保证手机上wx.config的状态时是config:ok的才能继续测试

这个官方没有说明,所以令我很费解,抱着试试的心态就成功了!!!

最后一次编辑于  2020-08-05  
点赞 4
收藏
评论

3 个评论

  • 乞力马扎罗的雪
    乞力马扎罗的雪
    2021-11-25

    请问wx.config({})这个里面的参数是从哪取到的

    2021-11-25
    赞同
    回复 1
    • 比昂
      比昂
      2021-12-08
      红框里的是后端返回给你的,其他的都可以固定不变
      2021-12-08
      回复
  • dongyi
    dongyi
    2021-05-25

    您好, 想问下后面有没有碰到按钮点击无效的问题。 特别是iphone和华为手机上

    2021-05-25
    赞同
    回复 1
    • 比昂
      比昂
      2021-05-25
      目前没有
      2021-05-25
      回复
  • 恒大城李金山炸鸡
    恒大城李金山炸鸡
    2021-05-18

    你好,我这里碰到了签名错误的问题,签名检测一致,但就是提示错误,能帮忙解决下吗

    错误信息:errmsg config: invalid signature

    2021-05-18
    赞同
    回复 1
    • 比昂
      比昂
      2021-05-20
      这个如果你保证给后端传的参数没问题,一般都是后端的问题
      2021-05-20
      回复
登录 后发表内容