H5页面跳转到小程序的实现

H5页面跳转到小程序的实现

最近有个需求,是实现H5页面跳转到小程序,自己查看了一下微信的公众号开发文档,同时也借鉴了网上的一些经验贴,排过雷,踩了一些坑,最终实现了该功能,现在把它记录一下,希望能帮到有这方面需求的朋友。
微信公众号开发文档连接(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html)
一.注意事项
1.微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
2.我们使用的是微信提供的开放标签。
3.需要引入jweixin-1.6.0.js,可以下载在自己的项目上。
4.登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,如果js已经添加到项目中,就写这个项目的域名,域名必须是真实合法的,不然图过不了微信得校验。
二.前端
1.通过config接口注入权限验证配置并申请所需开放标签,在html页面编写ajax异步请求获取相应的参数,如下图。
需要注意的是username必须是所需跳转的小程序原始id，即小程序对应的以gh_开头的id,这个在微信公众平台小程序里面可以找到,具体的网址是https://mp.weixin.qq.com/