一、需求说明
分销涉及到的生成海报-扫码登录功能
- 用户 A 可生成一个带有二维码/小程序码的海报
- 用户 B 可扫描这个海报,进入一个页面
- 在这个页面点击下一步,可直接登录,并绑定分享海报的用户信息
二、需求实现
2.1 新增一个跳转页面
新增一个页面,路径为:
/pages/redirectPage/redirect
这个页面作为扫码进入的页面,作为一个跳转页。
主要作用是获取二维码中携带的路径参数,并调用登录接口,将参数传给后端
2.2 使用新增页面的路径,生成小程序码/二维码(后端代码)
当用户生成海报时,前端调用后端获取小程序码的接口,这时,后端需要调用小程序官方 api 来生成小程序码: 具体方式是向这个地址发送请求:
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
其中需要携带的参数有这几个:
- access_token: 接口调用凭证
- page: 小程序码要跳转的相对路径,在这个例子中就是
pages/redirectPage/redirect
- scene: 放需要在路径上传递的参数,如:
userId=10
- 其他参数,如小程序码高度、宽度等,参见下图:
注意:这里的 page 必须是已发布到正式版小程序的页面路径,否则,调用微信的这个接口会报错:
另外,不管是在开发版本还是体验版本获取小程序码生成海报,扫描后跳转的都是正式版小程序的这个页面。
也可以使用二维码:
2.3 使用后端返回的小程序码,绘制海报
这个部分在之前的文章讲过,不赘述
2.4 扫描海报,进入页面,获取路径参数
这个步骤需要在新加的页面中进行处理 在这个页面的 onLoad 函数里获取小程序码的路径参数,并存储起来:
onLoad: function (options) {
if (options.scene) {
let scene = decodeURIComponent(options.scene)
this.setData({
userId: scene.split('=')[1]
})
}
},
注意!!!这里有坑:
- 无法直接获取二维码的参数,需要通过 decodeURIComponent 解析
- 本地测试时,使用二维码编译,参数的处理方式和发布后不同!!!本地测试时可直接取到,但如果要发布,请一定记得添加解析处理!!!
2.5 点击下一步,调用登录接口
// 点击 下一步 的处理
handleClick() {
let params = {
userId: this.data.userId
}
// 调用登录接口,将 params 作为参数传入即可
}
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结,预计会每周至少会更新一篇。
目前我们学习计划是: 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外,工作中用到的一些技术和完成的功能,我们也会及时总结更新在这里
如文章有错误或表述不清晰,欢迎各位留言反馈~~