分享一下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的才能继续测试

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