实现小程序码扫码登录之uniapp小程序部分

实现微信扫码登录功能是非常普遍的需求，不过微信扫码登录是要交钱的，加上我们项目正好有开发小程序的打算，所以采用小程序码跳转小程序来进行微信授权登录。本篇记录小程序部分的逻辑流程。

小程序码是放在一个pc端的系统上，小程序使用的是uniapp的vite+vue3框架，一开始我直接用的HBuilder创建的uniapp项目，但是有太多局限性，包括很多插件都无法安装使用，后面就改用vue-cli搭建，网上很多教程，在此不赘述。语法我习惯用setup语法糖和组合式API，会和选项式的写法有一些区别。

1.在登录页实现正常登录流程

可能有些项目登录采用的是弹窗形式，这里建议登录单独起一个页面，会方便扫码直接跳转。现在的微信已经不允许获取用户信息了，所以我采用getPhoneNumber和login进行授权登录：

//登录按钮
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户快捷登录</button>


const state = reactive({
    loginFrom: {
      phonecode: '',
      loginCode: '',
      scene: ''
    }
})

const getPhoneNumber = (e) => {
    if (e.detail.errMsg === "getPhoneNumber:ok") {
      // 用户选择允许时存储电话code
      state.loginFrom.phonecode = e.detail.code
      uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: (event) => {
          if (event.errMsg === "login:ok") {
            //存储微信授权登录返回的code
            state.loginFrom.loginCode = event.code
            //login是后台的登录接口
            login(state.loginFrom).then((res) => {
              // 保存 token
              uni.setStorageSync('token', res.token);
              uni.setStorageSync('user', JSON.stringify(res.user));
              uni.showToast({
                icon: 'success',
                title: '登录成功'
              })
              uni.reLaunch({
                url: '/pages/myaccount/index'
              });
            })
          }
        },
        fail: (err) => {
          // 登录授权失败  
          uni.showToast({
            icon: 'error',
            title: '登录授权失败,' + err.code
          })
        }
      })
    }
  }

2.在onLoad中获取scene参数

scene参数是连接小程序和另外一个平台的重要参数。

import {onLoad} from '@dcloudio/uni-app'

onLoad((option) => {
    //正常登录时没有scene，只有扫小程序码跳转时才有
    if (option.scene) {
      //scene要进行转码，如果拿到的不是纯值，还要用split进行字符串分割
      const s = (decodeURIComponent(option.scene).split("=")).slice(1)
      state.loginFrom.scene = s[0]
    }
})

值得注意的是：scene值最好进行转码

到这里就完成代码部分，然后可以使用开发者工具进行测试，在编译的地方选择二维码编译，然后把另外一个平台的小程序二维码截图保存到本地，用下面的二维码编译选中图片就可以测试了。