一、场景需求:
在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id);微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识id;
大致要求就是:
小程序生成的这个二维码,可以识别跳转到小程序某页,且会携带某些自定义参数,在被跳转页面还可以拿到这些自定义参数。
//我的是在个人名片页生成二维码,识别二维码跳转到首页pages/tabBar/home/index 携带参数 user_code
path: `pages/tabBar/home/index?user_code=${this.myObj.user_code}`
二、生成二维码,必须后端生成!
(如果前端生成,总是会报access_token过期,导致获取二维码失败;而且前端获取需要把秘钥AppSecret写在前端,不安全;)
后端生成二维码点击此篇查看:
Java 生成微信小程序二维码(可以指定小程序页面 与 动态参数)
以及
腾讯小程序官方生成动态参数二维码方法
注意点:(尤其第四点)
–1.后端生成二维码,然后前端只需要调用后端接口,传递跳转路径和自定义参数即可;
.
–2.后端生成二维码,需要用到秘钥AppSecret;此时秘钥就只能给后端用,前端代码千万不要也用到秘钥;否则也会导致access_token过期等问题;
.
–3.还是access_token问题,因为本地测试环境和生产环境生成二维码都是后端接口给的;而后端又都用到了秘钥AppSecret;就会导致测试环境和正式环境 access_token冲突问题,也就是你在测试环境本地获取了二维码,可能导致线上生产环境的获取二维码报access_token问题获取失败;
–
解决办法:测试环境和线上生产环境使用同一个缓存内的access_token,如果某个环境获取新的了,那另一个环境也用新的access_token即可!
.
–4.后端生成的二维码,无论是 本地测试环境生成的、小程序工具生成的、真机调试生成的、或者线上生产环境生成的二维码,你识别后它都是跳到线上生成环境地址!
也就是说这个二维码就是只能跳到线上生产环境的小程序指定页面,那么就
导致前端本地开发小程序时候,不太好测试这个识别二维码跳转小程序携带参数的功能
(但也有办法测试):
首先我们要知道,这个识别二维码并携带参数跳转小程序页面 B,会触发指定跳转B页面的onLoad函数,那么我们就需要在指定B页面的onLoad函数内拿到这个自定义参数:
// 指定二维码跳转的页面 ---------跳转页获取二维码自定义参数---------
onLoad: (opts) {
console.log('首页onLoad', opts )
// 直接获取二维码自定义参数
if (opts.user_code) {
this.far_usercode = opts.user_code
}
}
接上面4.说:
如何在开发时候,解决识别二维码跳线上上产环境的小程序页面,导致的开发时候不好测试问题:
.
4.1方案1:小程序工具测试
:把二维码图片保存到桌面,通过
小程序工具–普通编译–添加编译模式–上传文件(二维码图片)–会自动识别跳转路径和自定义参数–点击确定
。即可在小程序工具上看到 跳转到 指定页面且onLoad也可以拿到参数;
4.2方案2:小程序工具测试:
和上述方法类似但更简单;
小程序工具–普通编译–通过二维码编译–上传二维码图片;
4.3方案3:真机扫码预览测试或者真机调试。
(这一步
略微麻烦但可以达到真机测试
:因为我们知道
小程序页面分享也是会触发到分享跳转页的onLoad函数,和二维码跳转一样逻辑
;那么我们就可以在个人名片页A,也就是获取到二维码的那个页面,写一个分享功能,点击分享按钮,将此页面分享给微信好友,微信好友点击跳转的时候,携带自定义参数跳到我们想要二维码跳转的指定页面B;以此模拟二维码识别)
.
分享功能就两步骤(
这两步代码都是写在获取到二维码的那个页面A
)
步骤1:html里的分享按钮
<button open-type="share">分享到微信</button>
步骤2:在js里写上和onLoad函数同级别的分享函数:既下方的
onShareAppMessage
函数
步骤3:你分享给好友后,微信好友点击这个分享就会跳转到指定页面B,也可以在onLoad拿到自定义参数
–只要你这个分享功能没问题 那你线上生产环境的 二维码识别跳转携带参数功能一定没问题
// 个人名片页 分享函数
onShareAppMessage (res) {
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: '诚邀您使用保客多多,开启客户管理轻松之旅!',
//这里就是你要微信用户打开你的分享后跳转的页面路径和参数
//你会发现这个路径及参数 和后端要求你获取二维码接口 传递的路径及参数 是一样的 (也可能 后端接口会让你多传上路径开头的 / )
path: `pages/tabBar/home/index?user_code=${this.myObj.user_code}`
}
},
onLoad(){
},
4.4方案4:当你的线上生产环境已经发布过小程序,且也有onLoad处理逻辑,那么你就直接真机识别二维码,直接跳到生产环境看即可(但是往往开发时候,我们的线上生产环境逻辑都没写对吧);
.
还有一种方案,就是uni-app发行微信小程序,会在小程序工具内调用线上生产环境的接口,自动编译成线上版本的,然后你手机微信预览扫码,真机上也就是使用线上生产环境版本;这个时候如果你识别二维码图片,跳转打开的是小程序是刚才你预览二维码的那个线上小程序还是真正的线上生产环境的小程序页面,这个我没有测试过,感觉可以试试!
微信小程序生成二维码,坑比较多,但是按照上述步骤和4.1-4.3测试方案来,一定可以解决!