Uniapp 微信小程序 授权登录教程
在开发微信小程序时，用户授权登录是非常重要的一环。通过授权登录，开发者可以获取用户的基本信息，从而为用户提供更加个性化的服务。本文将介绍如何在Uniapp中实现微信小程序的授权登录，并提供详细的代码示例和注释。
一、准备工作
注册微信小程序并获取AppID和AppSecret： 你需要在微信公众平台注册一个小程序账号，并获取AppID和AppSecret。这些信息将在我们进行授权登录时使用。
配置Uniapp项目： 在你的Uniapp项目中，打开manifest.json文件，找到并填写微信小程序的AppID。
"mp-weixin" : { "appid" : "你的AppID", "setting": { "urlCheck": false }, "libVersion": "2.9.0", "style": "v2", "subPackages": false }
配置微信小程序的合法域名： 登录微信公众平台，进入小程序后台，在“开发”->“开发设置”中配置服务器域名，确保域名已在微信的合法域名列表中
二、实现授权登录
在页面中添加登录按钮：
在你的小程序页面中添加一个用于触发登录的按钮，例如在pages/index/index.vue中：
<template> <view> <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button> </view> </template>
在页面脚本中处理授权逻辑：
在页面脚本部分，我们需要编写逻辑以处理用户的授权信息。
<script> export default { data() { return { userInfo: null, hasUserInfo: false } }, methods: { // 获取用户信息 getUserInfo(e) { if (e.mp.detail.userInfo) { this.userInfo = e.mp.detail.userInfo; this.hasUserInfo = true; this.login(); } else { uni.showModal({ title: '警告', content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!', showCancel: false, confirmText: '返回授权', success: function(res) { if (res.confirm) { console.log('用户点击了“返回授权”'); } } }); } }, // 登录并获取用户信息 login() { uni.login({ provider: 'weixin', success: (loginRes) => { // 登录成功，获取用户code const { code } = loginRes; // 发送code到后台换取openId, sessionKey, unionId uni.request({ url: 'https://你的服务器地址/api/login', // 你的登录API地址 method: 'POST', data: { code }, success: (res) => { if (res.data && res.data.success) { const { openId, sessionKey, unionId } = res.data; // 将用户信息和session存储到本地 uni.setStorageSync('userInfo', this.userInfo); uni.setStorageSync('openId', openId); uni.setStorageSync('sessionKey', sessionKey); uni.setStorageSync('unionId', unionId); } else { uni.showToast({ title: '登录失败', icon: 'none' }); } }, fail: () => { uni.showToast({ title: '请求失败', icon: 'none' }); } }); }, fail: (err) => { console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err); uni.showToast({ title: '登录失败', icon: 'none' }); } }); } } } </script>
三、后端服务器处理
在你的服务器上，你需要处理从微信获取到的code，并通过微信接口换取用户的openId、sessionKey和unionId。
示例代码（Node.js）：
const express = require('express'); const request = require('request'); const app = express(); const APPID = '你的AppID'; const APPSECRET = '你的AppSecret'; app.use(express.json()); app.post('/api/login', (req, res) => { const { code } = req.body; if (!code) { return res.status(400).json({ success: false, message: '缺少code参数' }); } const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${APPSECRET}&js_code=${code}&grant_type=authorization_code`; request.get(url, (err, response, body) => { if (err) { return res.status(500).json({ success: false, message: '请求微信接口失败' }); } const data = JSON.parse(body); if (data.errcode) { return res.status(400).json({ success: false, message: data.errmsg }); } res.json({ success: true, openId: data.openid, sessionKey: data.session_key, unionId: data.unionid }); }); }); app.listen(3000, () => { console.log('服务器启动成功，监听端口3000'); });
四、总结
通过以上步骤，我们实现了一个简单的微信小程序授权登录功能。完整的流程包括：
用户点击微信登录按钮，触发getUserInfo事件。
在getUserInfo事件中，调用uni.login获取用户的code。
将code发送到服务器，服务器通过微信接口换取用户的openId、sessionKey和unionId。
将用户信息存储到本地，以便后续使用。
以上示例代码仅供参考，实际开发中可能需要根据具体需求进行调整和完善。希望本文能对你在开发微信小程序授权登录功能时有所帮助。
