H5页面跳转到微信小程序

微信内部浏览器唤起小程序

不废话，先上官方文档 developers.weixin.qq.com/doc/offiacc…

wx-open-launch-weapp 开放标签

该标签用于跳转到微信小程序的按钮，用户需要点击此按钮才能跳转到小程序。 使用该标签需要使用到微信js-sdk(wx-open-launch-weapp开放标签jweixin-1.6.0.js开始支持)，切记一定要使用jweixin-1.6.0.js或者更高版本。下面一步一步开始。

第一步：引入js-sdk文件

在需要调用js接口的页面引入如下文件：res.wx.qq.com/open/js/jwe…

第二步：公众号设置

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

第三步：配置wx.config

通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签，内置开放标签wx-open-launch-weapp。配置如下：

wx.config({
    debug: false,
    appId: '必填，微信公众号appid',
    timestamp: '必填，生成签名的时间戳',
    nonceStr: '必填，生成签名的随机串',
    signature: '必填，签名',
    jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
    ], //需要使用的JS接口列表,这里是分享到朋友圈和朋友的
    openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp'] // 可选，需要使用的开放标签列表 咱们今天要用到的就是wx-open-launch-weapp
});

第四步：在html页面中使用wx-open-launch-weapp标签

所有开放标签都能像普通的 HTML 标签一样在页面中直接使用，不需要再进行额外的处理。

<wx-open-launch-weapp
  id="launch-btn"
  username="小程序原始id"
  path="所需跳转的小程序内页面路径及参数">
  <script type="text/wxtag-template">
    <img src="https://ddd.com/test.png">
  </script>
</wx-open-launch-weapp>

以上代码是点击图片跳转到微信小程序，也可以换成按钮或者其他标签。