微信小程序开发极简入门(12):微信登录

我经手过的好些项目，系统本身还是以手机号为根本账号，与微信的账户关联有两种方式：

• 手机号注册&登录（可以通过密码、验证码、本机号码一键登录），再关联微信的openId，以后通过微信登录，拿到openId，视同校验通过，签发Token。
• 通过微信的手机号验证组件，拿到手机号，注册&登录，签发Token。但是现在这个组件收费，且个人开发者无法使用，虽然我已经把界面和服务端的代码写好了，但是也测不了，就不放在文章里了。
• 相关代码，前端很少，更多是服务端这边。在实际项目中，这样前后端配合的功能还有很多，例如获取小程序码、短链接、发送微信消息、短信等，本系列文章就不写了。

流程很简单，小程序获取临时code，传给服务端，服务端通过appid、secret和code向微信提供的HTTP接口，请求获取openId，再做与本系统账号的关联（注册）、签发Token（相当于校验密码）到小程序。

<view>openId:{{openId}}</view>

<button type="primary" bind:tap="wxLogin">微信登录</button>

  wxLogin(){
    wx.login({
      success: (res) => {
        // 获取临时code
        if(res.errno!=0){
          wx.showToast({
            title: res.errMsg,
            icon:"error"
          })
        }else{
          //将code传给服务端
          wx.request({
            url: '本系统的URL',
            data:{
              code:res.code
            },
            success: (res) => {
              // 一般而言，此处回传的应该是签发的Token，小程序写入storage
              this.setData({
                openId:res.data.data.openId
              })
            },
            fail: (res) => {
              console.log(res)
              wx.showToast({
                title: '系统错误'
              })
            }
          })
        }
      }
    })
  }

服务端的代码就不写了，就是拼URL，用HTTP工具类发请求，解析响应，做逻辑处理。

本来想着写个Demo的，把这一系列的知识点整合一下。但是忙完这一系列的文章，就直接开始搞Vue3了，这事也就放下了。

后面Vue3的学习成果相关文章会陆续放出。