小程序实战(九)-扫码登录

1,851 阅读3分钟

一、需求说明

分销涉及到的生成海报-扫码登录功能

  1. 用户 A 可生成一个带有二维码/小程序码的海报
  2. 用户 B 可扫描这个海报,进入一个页面
  3. 在这个页面点击下一步,可直接登录,并绑定分享海报的用户信息

二、需求实现

2.1 新增一个跳转页面

新增一个页面,路径为: /pages/redirectPage/redirect 这个页面作为扫码进入的页面,作为一个跳转页。 主要作用是获取二维码中携带的路径参数,并调用登录接口,将参数传给后端

2.2 使用新增页面的路径,生成小程序码/二维码(后端代码)

当用户生成海报时,前端调用后端获取小程序码的接口,这时,后端需要调用小程序官方 api 来生成小程序码: 具体方式是向这个地址发送请求:

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

其中需要携带的参数有这几个:

  1. access_token: 接口调用凭证
  2. page: 小程序码要跳转的相对路径,在这个例子中就是 pages/redirectPage/redirect
  3. scene: 放需要在路径上传递的参数,如:userId=10
  4. 其他参数,如小程序码高度、宽度等,参见下图:

注意:这里的 page 必须是已发布到正式版小程序的页面路径,否则,调用微信的这个接口会报错:

另外,不管是在开发版本还是体验版本获取小程序码生成海报,扫描后跳转的都是正式版小程序的这个页面。

也可以使用二维码:

2.3 使用后端返回的小程序码,绘制海报

这个部分在之前的文章讲过,不赘述

2.4 扫描海报,进入页面,获取路径参数

这个步骤需要在新加的页面中进行处理 在这个页面的 onLoad 函数里获取小程序码的路径参数,并存储起来:

onLoad: function (options) {
    if (options.scene) {
        let scene = decodeURIComponent(options.scene)
        this.setData({
            userId: scene.split('=')[1]
        })
    }
},

注意!!!这里有坑:

  1. 无法直接获取二维码的参数,需要通过 decodeURIComponent 解析
  2. 本地测试时,使用二维码编译,参数的处理方式和发布后不同!!!本地测试时可直接取到,但如果要发布,请一定记得添加解析处理!!!

2.5 点击下一步,调用登录接口

// 点击 下一步 的处理
handleClick() {
    let params = {
        userId: this.data.userId
    }
    // 调用登录接口,将 params 作为参数传入即可
}

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结,预计会每周至少会更新一篇。

目前我们学习计划是: 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外,工作中用到的一些技术和完成的功能,我们也会及时总结更新在这里

如文章有错误或表述不清晰,欢迎各位留言反馈~~