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/

三.后台
1.后台就是提供ajax需要的参数,也就是config验证需要的参数,仔细阅读微信JSSDK说明文档里面的通过config接口注入权限验证配置签名算法,后端编写代码实现即可。
这是我后台的部分代码

四.遇到的问题
请仔细阅读微信开发文档的遇到问题的解决方案,我截图让大家看一下:
说明一下,我也遇到过开放标签显示不出来,config验证返回message:config ok 但是点击按钮跳转不到小程序等问题,最终都是通过以下解决方案解决的。顺便粘贴一下config校验接口config校验http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

如果还没解决,请留言,咱们一起讨论。