微信公众号h5页面跳转小程序

文章目录

微信公众号h5页面跳转小程序
- 前言
- 一、注意
- 二、使用步骤
- 步骤一：绑定域名
- 步骤二：引入环境
- 步骤三：初始配置

前言

问：h5 页面可以跳转至微信小程序吗？

答：可以

官方解答飞机票
官方社区讨论飞机票

一、注意

微信开放标签有最低的微信版本要求，以及最低的系统版本要求。

微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

二、使用步骤

步骤一：绑定域名

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

步骤二：引入环境

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

也可使用npm 下载jsdk包

步骤三：初始配置

html


<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx"  path="pages/login/login/main.html" @error="handleErrorFn" @launch="handleLaunchFn"><script type="text/wxtag-template"><style>.btn { display: flex;align-items: center; }</style>                               <div> <button class="btn">前往小程序</button>   </div>            </script></wx-open-launch-weapp>

注意：此处通过script引入样式可能不生效，那需要这样写了

<wx-open-launch-weapp id="launch-btn" username="gh_afd0351b8ca4"  path="pages/index/index.html" @error="handleErrorFn" @launch="handleLaunchFn"><template><button class="btn" style="display:block;width:200px;height:100px;background-color:pink;margin: 0 auto;">打开小程序</button></template></wx-open-launch-weapp>

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

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识,注意是gh开头的那个timestamp: '', // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [], // 必填，需要使用的JS接口列表，我们需要用到的配置即可比如["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"],openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
});

此步骤的使用时机是：在页面初始化时，通过请求后台接口，拿到返回的相关config配置的值，一般除了jsApiList: [], 以及openTagList: []两个配置外，其他参数都是由后台返回的，前端将返回的值，配置在config 即可

使用注意：

wx-open-launch-weapp 标签中的path配置是跳往小程序首页的地址并携带参数
千万注意的是地址格式：比如zt/index.html?d=1&e=2
错误示例：zt/index?d=1&e=2