uni-app 中 APP 使用微信授权登录完整总结
在 uni-app 中实现微信授权登录是一个常见且重要的功能。下面我们将详细描述如何在 uni-app 中使用微信授权登录。
步骤1：申请微信公众平台账号和应用
首先，我们需要在微信公众平台申请一个应用，获取相应的 `appid` 和 `appsecret`。以下是申请步骤：
1. 登录微信公众平台（ 点击「创建应用」，填写应用基本信息，如应用名称、包名等。
3. 确认应用信息后，点击「提交」申请。
注意事项：
* 应用包名是 app 打包时候可以填写的，如 `//app第三方登录` 等。确保这个包名与你的 app 包名一致。
*申请成功后，你会获得一个 `appid` 和 `appsecret`，请妥善保存。
步骤2：在 uni-app 中配置微信授权
在 uni-app 中，我们需要配置微信授权相关信息。以下是具体步骤：
1. 在 `uni.config.js` 文件中添加如下代码：
```javascriptmodule.exports = {
// ...
plugins: [
'weixin'
],
weixin: {
appId: '你的appid',
appSecret: '你的appsecret'
}
}
```
2. 确保 `appId` 和 `appSecret` 的值与你在微信公众平台申请的相符。
步骤3：使用微信授权登录
现在，我们可以使用微信授权登录功能了。以下是具体代码：
```javascript// pages/login.jsPage({
data: {
// ...
},
login() {
wx.login({
success: (res) => {
if (res.code) {
wx.getUserInfo({
success: (userInfo) => {
console.log(userInfo);
// 使用微信授权登录功能 this.loginWithWeixin(res.code, userInfo)
}
})
} else {
console.error('wx.login failed:', res);
}
},
fail: (err) => {
console.error('wx.login failed:', err);
}
});
},
loginWithWeixin(code, userInfo) {
// 使用微信授权登录功能 uni.request({
url: ' method: 'GET',
data: {
appid: this.data.appId,
secret: this.data.appSecret,
js_code: code,
grant_type: 'authorization_code'
},
success: (res) => {
console.log(res);
// 使用微信授权登录功能 uni.login({
provider: 'weixin',
scope: 'snsapi_userinfo',
success: (loginRes) => {
console.log(loginRes);
// 使用微信授权登录功能 this.loginSuccess(loginRes.code, userInfo)
},
fail: (err) => {
console.error('uni.login failed:', err);
}
});
},
fail: (err) => {
console.error('uni.request failed:', err);
}
})
},
loginSuccess(code, userInfo) {
// 使用微信授权登录功能 uni.setStorageSync('userInfo', userInfo);
uni.showToast({
title: '登录成功',
icon: 'success'
});
}
})
```
总结
在本文中，我们详细描述了如何在 uni-app 中使用微信授权登录功能。步骤包括申请微信公众平台账号和应用、配置微信授权相关信息以及使用微信授权登录功能。希望这篇文章能够帮助你轻松实现微信授权登录功能！
