Uniapp作为跨端开发框架，支持同时生成多端应用，其中H5端的微信登录是很多项目的必备功能。下面为大家介绍一套高效的接入流程，帮助你在短时间内完成配置。
前期准备
在正式写代码前，需要先完成以下账号和配置工作，避免后续反复修改：
- 注册微信开放平台账号，完成企业认证（个人主体无法申请H5登录权限）
- 在开放平台创建网页应用，填写正确的授权回调域名，注意不需要加http/https前缀
- 获取网页应用的AppID和AppSecret，这两个参数后续会用到
- 确保Uniapp项目的H5端域名和开放平台配置的回调域名一致
核心实现步骤
第一步：触发微信授权请求
用户点击登录按钮时，跳转到微信的授权页面，需要拼接正确的授权链接，参数说明如下：
| 参数名 | 说明 |
|---|---|
| appid | 微信开放平台的网页应用AppID |
| redirect_uri | 授权回调地址，需要和开放平台配置的一致，且要做URL编码 |
| response_type | 固定值code |
| scope | snsapi_userinfo（获取用户信息）或snsapi_base（仅获取openid） |
| state | 自定义参数，可用于传递登录场景等信息 |
对应的跳转代码实现如下：
// 点击登录按钮触发的方法
function handleWxLogin() {
// 替换为你的AppID
const appid = '你的微信开放平台AppID';
// 替换为你的回调地址，需要做URL编码
const redirectUri = encodeURIComponent('https://你的域名/h5/login/callback');
// 授权范围，这里用snsapi_userinfo获取用户信息
const scope = 'snsapi_userinfo';
// 自定义state参数
const state = 'login_' + Date.now();
// 拼接微信授权链接
const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
// 跳转到微信授权页面
window.location.href = authUrl;
}第二步：处理回调获取code
用户授权后，微信会跳转到你配置的回调地址，并在URL中带上code和state参数，需要在回调页面解析这些参数：
// 回调页面的onLoad方法中处理
export default {
onLoad() {
// 获取当前页面的URL参数
const url = window.location.href;
// 解析code参数
const code = this.getQueryString('code');
// 解析state参数
const state = this.getQueryString('state');
if (code) {
// 拿到code后调用后端接口换token和用户信息
this.getWxUserInfo(code);
} else {
uni.showToast({
title: '授权失败，请重试',
icon: 'none'
});
}
},
methods: {
// 解析URL参数的工具方法
getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
const r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
},
// 调用后端接口换用户信息
getWxUserInfo(code) {
uni.request({
url: 'https://你的后端域名/api/wx/h5/login', // 替换为你的后端接口地址
method: 'POST',
data: {
code: code
},
success: (res) => {
if (res.data.code === 0) {
// 登录成功，存储用户信息
uni.setStorageSync('userInfo', res.data.data);
uni.showToast({
title: '登录成功',
icon: 'success'
});
// 跳转到首页
uni.switchTab({
url: '/pages/index/index'
});
} else {
uni.showToast({
title: res.data.msg || '登录失败',
icon: 'none'
});
}
}
});
}
}
}第三步：后端接口实现（以Node.js为例）
后端需要拿到code去微信接口换access_token和用户信息，以下是简单的实现示例：
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());
// 替换为你的微信开放平台配置
const wxConfig = {
appid: '你的微信开放平台AppID',
secret: '你的微信开放平台AppSecret'
};
// 微信H5登录接口
app.post('/api/wx/h5/login', async (req, res) => {
const { code } = req.body;
if (!code) {
return res.json({ code: 1, msg: '缺少code参数' });
}
try {
// 第一步：用code换access_token
const tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${wxConfig.appid}&secret=${wxConfig.secret}&code=${code}&grant_type=authorization_code`;
const tokenRes = await axios.get(tokenUrl);
const { access_token, openid } = tokenRes.data;
if (!access_token || !openid) {
return res.json({ code: 1, msg: '获取access_token失败' });
}
// 第二步：用access_token和openid获取用户信息
const userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`;
const userInfoRes = await axios.get(userInfoUrl);
const userInfo = userInfoRes.data;
// 这里可以处理用户信息的存储，比如存入数据库，返回自定义的登录态
// 示例返回用户信息
res.json({
code: 0,
data: {
openid: userInfo.openid,
nickname: userInfo.nickname,
avatar: userInfo.headimgurl
}
});
} catch (err) {
console.error('微信登录接口错误:', err);
res.json({ code: 1, msg: '登录接口异常' });
}
});
app.listen(3000, () => {
console.log('后端服务运行在3000端口');
});常见问题排查
- 回调域名不一致：检查开放平台配置的域名和项目实际使用的域名是否完全匹配，不能带端口号除非是80/443
- code无效：code只能使用一次，且有效期为5分钟，不要重复使用或者过期后使用
- 跨域问题：如果前端和后端域名不同，需要后端配置CORS允许前端域名访问
- 授权后白屏：检查回调地址是否正确，是否做了正确的URL编码
按照以上流程操作，只要前期配置正确，代码逻辑没有问题，基本可以在30分钟内完成整个Uniapp微信H5登录的接入工作，后续如果有其他定制需求，可以在此基础上扩展即可。