在开发移动应用时，微信小程序的授权登录是开发者们常遇到的问题。uni-app这个跨端开发框架给这类开发带来了极大方便。然而，实际操作中的具体步骤却常常让人感到困惑。
AppID获取前置工作
在进行uni-app微信小程序的授权登录功能开发前，必须先注册并开通微信小程序，并安装必要的开发工具。首要任务是获取AppID。需在微信公众平台注册小程序，并严格按照平台要求填写详细信息。注册成功后，登录后台，需仔细操作繁杂的菜单。点击“开发”中的“开发管理”，然后在右侧选择“开发设置”，即可找到AppID。此外，小程序密钥还需通过管理员扫码重置，确保这些数据准确无误地保存，因为它们是后续开发的关键。比如，我之前在处理一个小项目时，由于同事在录入AppID时疏忽，多输入了一位数字，导致授权登录功能的测试几乎全部失败，不得不重新核实。
小程序的开发绝不可大意，必须确保拥有充分的权限，这为后续工作的顺利进行提供了基础。
项目创建要点
接下来，创建项目至关重要。首先，在开发工具的文件菜单里，点击新建项目。这里可以选用uni-app的预设模板。项目创建完毕后，打开根目录下的.json配置文件。这文件对项目而言，就如同指南。在微信小程序配置区域，将之前获取的AppID填入指定文本框。这一步如同盖章，确保项目是合法授权的。
新手开发者往往对此不够重视，常会遗漏填写或填错信息。我曾在一交流群中注意到，许多人询问为何小程序登录总不顺畅，最终发现多数问题都出在这一步骤。
代码实现部分
我们将示例操作集中在项目预设的pages/index/index页面上进行。首先，需要建立登录按钮和信息展示模块，这是用户与小程序进行授权登录的关键步骤。接着，必须精确设定AppID等相关信息。
此外，构建该方法的步骤同样重要。在这个过程中，必须深入理解uni-app平台上的两个API：uni.login()和另一个uni.的API。这里面的参数相当复杂，需要仔细掌握。我之前在编写代码时，由于未能妥善处理这两个API的嵌套，导致程序运行出现错误。例如，将uni.放入uni.login()中，就无法弹出授权对话框。后来我才明白，需要采用不同的方法来简化执行流程。当然，经过优化的代码才能确保程序的稳定运行，开发者需要根据实际情况不断调整。
编写这些代码，开发者需具备坚实的编程功底，并且对uni-app框架应有一定的掌握。
<template>
<view class="content">
<image class="logo" :src="userInfo.avatarUrl"></image>
{{ userInfo.nickName }}
<view class="text-area">
<button class="login-btn" type="primary" @click="wxLogin">
微信用户一键登录
</button>
</view>
</view>
</template>
调试运行的准备
data() {
return {
AppId: 'wxae5813756948397b',
AppSecret: '3656299fd4ae977e0de0144xxxxxx',
userInfo:{
avatarUrl:'',
nickName:''
}
}
},
在开始调试小程序之前，必须做好相应的配置，这是确保小程序能够顺畅运行的关键步骤。首先，要在微信开发者工具的菜单栏里找到“运行”选项，然后进行运行配置的设置。这个过程就好比是为小程序规划一条精确的导航路径。
配置路径出错可能导致无法找到工具。比如，我以前的一位同事在调试uni-app微信小程序时，就因为微信开发者工具的路径填写错误，程序始终无法运行。经过仔细检查路径，问题才得以解决。
微信开发者工具内部配置
微信开发者工具内同样需要完成必要的设置。这相当于为小程序搭建一个专属的运行环境，需要细致打造。例如，涉及安全性的选项、权限配置等，都与后续的授权登录紧密相连。在实际开发过程中，这部分内容可能会因开发者需求各异或微信开发者工具的更新而有所调整。
此外，一些微小的配置错误可能带来严重后果。比如，我曾目睹一个项目因遗漏在微信开发者工具中配置一项权限，导致小程序虽能登录，却无法正常使用众多功能。
wxLogin() {
uni.login({
provider: 'weixin',
onlyAuthorize: true,
success: (loginRes) => {
if (loginRes.errMsg == 'login:ok') {
// 1 获得js_code
let js_code = loginRes.code
// 2 请求微信api 传递4个参数 appid secret js_code grant_type
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session`,
data: {
appid: this.AppId,
secret: this.AppSecret,
js_code,
grant_type: 'authorization_code'
},
success: (res) => {
// 3 获得openid
let openid = res.data.openid
// 4 openid提交给后端接口 伪代码
uni.request({
url: 'https://api.abc.com/xcxlogin',
data: {
openid
},
success: (res) => {
// 5 判断该微信用户是否是系统中用户
if (res.data.isUser) {
uni.getUserProfile({
desc: '获取个人信息',
success: (res) => {
console.log(res);
// 6 更新数据库头像、微信名信息 跳转业务页
// do some thing
}
})
}
}
})
}
})
}
}
})
}
整体调试运行
最后，需执行菜单中的“运行到微信开发者工具”指令，将uni-app代码编译至微信开发者工具中调试。微信开发者工具的热更新功能确保了代码更改能即时反映，我们能在预览窗口实时观察效果。如此一来，开发者能迅速发现并处理问题。
// 获取微信个人信息
getUserInfo() {
return new Promise((resolve, reject) => {
uni.getUserProfile({
desc: '获取个人信息',
success: (res) => {
resolve(res.userInfo)
},
fail: (err) => {
reject(err)
}
})
})
},
// 获取js_code
getJsCode() {
return new Promise((resolve, reject) => {
uni.login({
success(res) {
resolve(res.code)
},
fail: (err) => {
reject(err)
}
})
})
},
// 微信登录方法
wxLogin() {
let userInfo = this.getUserInfo();
let js_code = this.getJsCode();
Promise.all([userInfo, js_code]).then((res) => {
this.userInfo = res[0]
// 两个执行完毕后，
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session`,
data: {
appid: this.AppId,
secret: this.AppSecret,
js_code: res[1],
grant_type: 'authorization_code'
},
success: (res) => {
// 获得openid
let openid = res.data.openid
// 以下系伪代码，调试时请注意
uni.request({
url: 'https://api.abc.com/xcxlogin',
data: {
openid
},
success: (res) => {
// 5 判断该微信用户是否是系统中用户
if (res.data.isUser) {
uni.getUserProfile({
desc: '获取个人信息',
success: (res) => {
console.log(res);
// 6 更新数据库头像、微信名信息 跳转业务页
// do some thing
}
})
}
}
})
}
})
}).catch(err => {
})
},
自然，其间也可能遇到各种紧急状况，比如代码匹配上的难题，或是与微信平台间的沟通障碍，这些都需要开发者细心地逐一解决。
在操作uni-app微信小程序的授权登录时，每个步骤都环环相扣。你是否曾遇到文中提到的问题？这篇文章或许能给你带来帮助。觉得有用就请点赞、转发。
