uniapp微信小程序登录怎么做

1. 介绍Uniapp微信小程序

Uniapp是一款跨多个平台的应用开发框架，可以一次性编译出微信小程序、H5页面、Android和iOS应用程序等，大大提高了开发效率。而微信小程序是指基于微信开发的轻量级应用程序，无需下载安装，即点即用，受到了广泛的欢迎。

2. 微信小程序登录的几种方式

微信小程序登录一般有以下几种方式：

2.1 微信小程序原生登录

微信小程序提供了原生的登录方式，用户点击登录按钮后，会提示用户用微信号登录。用户同意后，小程序会通过微信开放平台获取用户的基本信息。

wx.login({

  success: function (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://yourserver.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

2.2 微信小程序第三方登陆授权

除了使用原生的登录方式外，在开放平台注册小程序账号，可以使用第三方登录授权，用户授权后，可以通过接口获取用户基本信息和授权信息。

2.3 微信小程序扫码登录

微信小程序还支持扫码登录，在登录页中，用户可以选择扫码登录，可以提高用户的体验度。

3. 基于Uniapp实现微信小程序登录

基于Uniapp实现微信小程序登录，可以使用原生的登录方式，也可以使用第三方登录授权。

3.1 原生登录方式

通过uni.login获取wx.login返回的code，并将code发送到服务器端的API，服务器端使用code换取Access Token，同时可以获取到用户的OpenID，用户通过OpenID进行唯一标识。

uni.login({

  success: function (res) {
    if (res.code) {
      uni.request({
        url: 'https://yourserver.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

服务器端代码，可使用Node.js框架，获取OpenID和Access Token:

const request = require('request')

exports.main = async(event, context) => {
  const appId = 'yourAppId'
  const appSecret = 'yourAppSecret'
  const code = event.code
  const apiUrl = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`
  return await new Promise((resolve, reject) => {
    request(apiUrl, function(err, res, body) {
      if (res && (res.statusCode === 200 || res.statusCode === 304)) {
        resolve(body)
      } else {
        reject({code: res.statusCode, message: JSON.stringify(res)})
      }
    })
  })
}

3.2 微信个人公众号授权登录

首先需要在微信开放平台创建账号和应用，获取应用的appid和appsecret，选择应用类型为微信小程序。

在登录页面中，需要引入微信官方提供的JS引入文件：

import {JWE} from '@/utils/jwe'

import WxDecryptData from '@/utils/wxDecryptData'
import api from '@/request/api'
import {USER_INFO} from '@/store/mutation-types'
export default {
  async getUserInfoByWeixin() {
    return new Promise((resolve, reject) => {
      uni.getUserInfo({
        provider: 'weixin',
        success: res => {
          console.log(res);
          JWE.decrypt(res.signature, res.encryptedData, res.iv).then(rs => {
            console.log(rs);
            let data = WxDecryptData.decryptWechatUserInfo(rs);
            console.log(`data : ${JSON.stringify(data)}`);
            api.weChatLogin({
              'code': '',
              'open_id': data.openId,
              'nickname': data.nickName,
              'head_img': data.avatarUrl,
              'gender': data.gender,
              'city': data.city,
              'province': data.province
            }).then(result => {
              let data = result.data;
              console.log(data);
              if (data.code == 1) {
                uni.showToast({
                  title: '请重新授权',
                  mask: true,
                  icon: 'none',
                });
                return;
              }
              uni.setStorageSync(USER_INFO, data);
              resolve();
            }).catch(() => {
              reject(new Error(`code: ${res.code} | errorMsg: ${res.errMsg}`));
            });
          });
        },
        fail: res => {
          console.log(res);
          reject(new Error(`User cancelled login authorization`));
        }
      })
    })
  }
}

在获取用户授权后，调用uni.getUserInfo获取到用户加密后的用户信息，解密用户信息后，调用后台API进行登录。

4. 结论

微信小程序登录方式有多种选择，开发者可以根据实际情况进行选择。Uniapp的跨平台特性，可以大大提高开发效率，降低生产成本，在多个平台上实现一次性编译。

如果您想进一步学习Uniapp和微信小程序开发，请参考Uniapp官方文档和微信小程序官方文档。