微信开发者工具里面在用户登录页面直接微信授权登录代码js文件以及wxml文件
时间: 2024-05-02 20:16:52 浏览: 7
以下是一个简单的微信授权登录的示例代码,包括了js文件和wxml文件:
JS文件(示例名为login.js):
```js
Page({
data: {
userInfo: null,
hasUserInfo: false
},
//加载页面时判断用户是否已授权登录
onLoad: function () {
var that = this;
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function (res) {
that.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
}
})
},
//点击登录按钮触发授权登录
getUserInfo: function (e) {
console.log(e);
if (e.detail.userInfo) {
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
}
})
```
WXML文件(示例名为login.wxml):
```html
<view class="container">
<view class="welcome-container">
<text class="welcome-text">欢迎使用XXX小程序</text>
</view>
<view class="user-container">
<image class="user-avatar" src="{{userInfo.avatarUrl}}" wx:if="{{hasUserInfo}}"></image>
<button class="login-button" open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{!hasUserInfo}}">微信授权登录</button>
<text class="user-nickname" wx:if="{{hasUserInfo}}">{{userInfo.nickName}}</text>
</view>
</view>
```
在WXML文件中,使用了`open-type="getUserInfo"`属性,这表示点击按钮时会触发微信授权登录的弹窗,用户同意后会触发`bindgetuserinfo`事件,进而调用JS文件中的`getUserInfo`方法,将用户信息保存到`userInfo`中,并将`hasUserInfo`设置为`true`,以展示用户头像和昵称。在`onLoad`方法中,首先调用`wx.getSetting`方法获取用户授权信息,判断用户是否已经授权登录,如果已经授权,则直接调用`wx.getUserInfo`方法获取用户信息,保存到`userInfo`中,以便在页面中展示。