H5跳转微信小程序

H5跳转微信小程序

H5跳转小程序有两个方法，需要根据浏览器环境判断
微信外使用URL Scheme，根据生成的一个link进行location跳转
微信内使用wx-open-launch-weapp开放标签进行跳转，实测ios系统微信内也可以使用URL Scheme，根据自己的需求选择

wx-open-launch-weapp

• 官方文档
• 注意事项：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
• 绑定域名: 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
• 引入SDK：官网推荐引入方法<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>;，也可以使用第三方npm包weixin-js-sdk
• 校验签名是否正确：微信 JS 接口签名校验工具
• 如果开放标签需要绝对定位，就在外面包裹一个div进行定位，避免直接定位开放标签
• 调试：好多人在进行调试的时候认为非常麻烦，需要不断切换环境，我推荐一个我的调试方式，在开发过程中，使用SwitchHosts进行IP映射，把本地启动项目的域名映射到公众号平台设置的域名，然后在微信开发工具中调试，就非常轻松了

// 普通H5的写法可参考官方文档，以下是我在vue中的写法
<wx-open-launch-weapp
 username="小程序原始id"
 path="页面路径及参数">
  <script type="text/wxtag-template">           
    <button class="wx-btn">跳转小程序</button>   
  </script>
</wx-open-launch-weapp>
<script>
...
async mounted() {
  const wx = require('weixin-js-sdk')
  wx.config({
    debug: true, // 开启调试模式，会在移动端以alert的形式打印返回值
    appId: '', // 必填，从服务端获取
    timestamp: , // 必填，生成签名的时间戳，从服务端获取
    nonceStr: '', // 必填，生成签名的随机串，从服务端获取
    signature: '',// 必填，签名，从服务端获取
    jsApiList: [], // 必填，需要使用的JS接口列表，这个随便填一个就行
    openTagList: ['wx-open-launch-weapp']
  })
  wx.ready((e) => console.log(e))
  wx.error((e) => console.log(e))
}
</script>

URL Scheme

• 注意事项：安卓不能直接跳转，需要H5中转，否则Android会出现无法访问
• 写法很简单，只需location.href='URL Scheme'，在页面初始化时调用或者在按钮点击事件中调用