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

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