微信小程序授权登录
微信小程序授权登录
最近在学习微信小程序,学到授权登录这里,做个笔记记录一下。
我们使用的工具是微信开发者工具,我们创建一个项目,项目结构如图所示:
![项目结构]( index.wxml -->
```
这里,我们定义了一个按钮,点击后会触发`bindGetUserInfo`事件。
接下来,我们需要在`index.js`文件中处理这个事件:
```javascript// index.jsPage({
data: {},
bindGetUserInfo(e) {
wx.getUserInfo({
success: (res) => {
console.log(res);
},
fail: () => {
console.error('获取用户信息失败');
}
});
}
});
```
这里,我们使用`wx.getUserInfo()`方法来获取用户的基本信息,成功后会打印出用户信息,失败则会输出错误信息。
但是,这里有一个问题:我们需要在`app.json`文件中配置授权登录相关的设置:
```json// app.json{
"pages": [
"index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": function(options) {
// Do something when page load.
},
"formatText": true,
"enablePullDownRefresh": false },
"tabBar": {
"color": "000",
"selectedColor": "3cc51f",
"list": [
{
"pagePath": "index",
"text": "首页"
}
]
},
"permission": {
"scope.userLocation": true }
}
```
这里,我们配置了授权登录相关的设置,`scope.userLocation`表示我们需要获取用户的地理位置信息。
最后,我们可以在微信开发者工具中运行我们的小程序,点击按钮后会弹出授权登录界面,如下图所示:
![授权登录界面](