一、登录流程
在谈论登录流程之前，我们需要先了解Wexin小程序的登录机制。微信小程序登录分为两种：一种是微信登录，一种是手机号登录。
微信登录：用户使用微信账号进行授权，获取用户信息，再访问开发者自己的服务器登录。相对于手机号登录，微信登录具有更好的用户体验，减少用户的操作步骤。
手机号登录：用户需要输入手机号和短信验证码，完成登录。对于不想使用微信授权登录的用户，可以选择手机号登录。开发者需要在服务器中存储用户的登录状态，给予用户持久化的方式。
在Uniapp中，通过微信小程序官方提供的API，可以方便地实现微信登录和手机号登录功能。
二、微信登录
微信登录是Uniapp在小程序端比较推荐的一种登录方式。Uniapp通过封装微信官方提供的Session API，实现了微信登录的功能。下面是实现微信登录的步骤：
1、在小程序manifest.json文件中，注册小程序的appid，并设置request合法域名和sld（顶级域名）
"appid": "yourAppid", // 注册小程序的appid
"networkTimeout": {
"request": 10000, // 单位为ms
"connectSocket": 10000, // 单位为ms
"uploadFile": 10000, // 单位为ms
"downloadFile": 10000 // 单位为ms
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序的定位功能，不会泄露给其他人"
}
},
"mp-weixin": {
"subPackages": []
},
"debug": true,
"request": {
"domain": {
"main": "www.yourdomain.com", // 服务器域名
"images": [
"https://www.yourdomain.com/images",
"https://img.yourdomain.com"
]
},
"header": {
"Content-Type": "application/json"
}
},
"requiredBackgroundModes": ["audio", "location"]
2、在uni账户中添加微信应用，获取Appid与AppSecret，在Uniapp中使用这两个信息进行微信登录
// 在login.vue页面中引入uni-account-login组件，在template中添加uni-account-login组件// 在login.vue的<Script>标签中添加下面的代码 <script> import uniAccountLogin from '@/components/uni-account-login/uni-account-login.vue' export default { components: { uniAccountLogin }, data() { return { loginType: 'wx', // 微信登录 companyId: 'yourCompanyId', // 注册的企业ID或个人ID } }, // 小程序通过微信授权登录后，可以获取到用户的openid和session_key， // 维护着用户的登录状态，然后把登录结果返回给开发者的服务器。 onLoad() { uni.login({ provider: 'weixin', success: function (loginResult) { const wxcode = loginResult.code // 登录凭证 uni.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', method: 'GET', data: { appid: 'yourAppid', // 注册的小程序appid secret: 'yourSecret', // 注册的小程序AppSecret js_code: wxcode, grant_type: 'authorization_code' }, success: (res) => { const openid = res.data.openid // 用户唯一标识 const sessionKey = res.data.session_key // 会话密钥 const result = { type: 'wx', openId: openid, session_key: sessionKey, companyId: 'yourCompanyId', // 注册的企业ID或个人ID } this.$refs.uniAccountLogin.login(result) } }) } }) } } </script>
三、手机号登录
手机号登录需要在Uniapp中调用小程序官方的API。下面是实现手机号登录的步骤：
1、在小程序manifest.json文件中，注册小程序的手机号登录模板
"mp-weixin": {
"phone": {
"templateMessageInfo": {
"parameterList": [
{
"name": "占位符唯一标识",
"value": "{{占位符}}", // 替换为实际参数
"color": "#173177" // 参数字体颜色
}
],
"templateId": "下发的模板消息唯一标识", // 模板id
"type": "微信服务通知" // 模板类型
}
}
}
2、在uni账户中添加手机号登录模板，获取模板id，在Uniapp中使用模板id进行手机号登录
// 在login.vue页面中引入uni-account-login组件，在template中添加uni-account-login组件// 在login.vue的<Script>标签中添加下面的代码 <script> import uniAccountLogin from '@/components/uni-account-login/uni-account-login.vue' export default { components: { uniAccountLogin }, data() { return { loginType: 'phone', // 手机号登录 companyId: 'yourCompanyId', // 注册的企业ID或个人ID templateId: 'yourTemplateId' // 注册的手机号登录模板id } }, onLoad() { // 调用微信登录，获取用户信息 uni.login({ provider: 'weixin', success: function (loginResult) { const wxcode = loginResult.code // 登录凭证 uni.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', method: 'GET', data: { ... }, success: (res) => { const openid = res.data.openid // 用户唯一标识 const sessionKey = res.data.session_key // 会话密钥 uni.getUserInfo({ provider: 'weixin', success: (infoResult) => { const userInfo = JSON.parse(infoResult.userInfo) const result = { type: 'phone', phone: '', templateId: this.templateId, companyId: this.companyId, openid: openid, session_key: sessionKey } // 调用uni-account-login组件，进行验证码验证 this.$refs.uniAccountLogin.sendCode(result, (phoneNumber) => { result.phone = phoneNumber this.$refs.uniAccountLogin.login(result) }) } }) } }) } }) } } </script>
四、登录状态
在Uniapp中，可以通过SessionStorage、本地存储、服务端存储等方式来维护用户的登录状态。通常情况下，为了保障用户信息的安全性，我们会选择服务端存储用户登录状态。
服务端存储用户登录状态需要以下步骤：
1、在服务端生成一个唯一的token，然后把token和用户信息关联。可以通过redis或memcached等缓存库来实现。同时在返回的api中，把token返回给用户。
2、在前端通过SessionStorage或本地存储来存储token信息。在用户请求的时候，把token添加在http header中，然后上传到服务端验证是否登录。
3、在服务端验证token，验证通过后返回用户信息。
// 在login.vue的<Script>标签中，添加下面的代码。
<script>
verifiedLogin(res) { // 服务端返回的验证登录结果
if (res.code == 200) {
// 登录成功
const data = res.data
uni.setStorageSync('token', data.token) // 存储用户token
uni.setStorageSync('userInfo', data.userInfo) // 存储用户信息
uni.switchTab({
url: '/pages/index/index'
})
} else {
uni.showToast({
title: '登录失败',
icon: 'none'
})
}
},
login() {
// 从uni-account-login组件中获取登录信息，提交到服务器进行登录信息验证
const result = this.$refs.uniAccountLogin.getLoginResult()
console.log(JSON.stringify(result))
uni.request({
url: 'https://api.yourdomain.com/login',
method: 'POST',
data: {
code: result.code,
openid: result.openId ? result.openId : '',
session_key: result.session_key ? result.session_key : '',
phone: result.phone ? result.phone : '',
verify_code: result.verifyCode ? result.verifyCode : ''
},
success: (res) => {
this.verifiedLogin(res.data)
},
fail: () => {},
complete: () => {}
})
}
</script>
五、总结
Uniapp是一个跨平台的开发框架，开发者可以通过一套代码，覆盖App、小程序、H5等多种平台。微信小程序是Uniapp中非常重要的一个平台，同时小程序登录也是非常具有代表性的功能之一。本文从微信小程序登录流程、微信登录、手机号登录和登录状态四个方面，对Uniapp微信小程序登录进行了详细的阐述。阅读本文后，读者可以掌握Uniapp微信小程序登录的实现方式，为开发小程序提供指引。
