微信小程序之微信登录
新手小白如何快速上手微信小程序开发?
这篇文章教你如何从0到1学会编写简单小程序,不需要会代码也可以轻松做自己想要的小程序!
微信授权登录微信小程序
- 首先 ,要确保你个人中心已经授权登录了,不然就会出现右下角的错误;
- 其次 ,开始创建一个登录按钮,我把登录按钮放到了mine.wxml下(你们可以按需放置),代码如下;
//登录按钮
<view class="head">
<button wx:if="{{!userInfo}}" bindtap="toLogin">登录</button>
</view>
//登录后展示头像、昵称及自我介绍(可随意删减)
<view wx:else class="head-account">
<image class="headElement" src="{{userInfo.avatarUrl}}" mode=""/>
<text class="nickname">{{userInfo.nickName}}</text>
<text class="personalSignature">一句话介绍自己</text>
</view>
- 继续 ,写好之后需要再mine.js文件里写入以下代码,里面有代码注释,请尽情享用!:
// 获取全局应用程序实例
const app = getApp()
// 定义一个页面
Page({
// 页面的初始数据,这里定义了一个userInfo变量,初始为空字符串
data: {
userInfo: '',
},
// 生命周期函数:监听页面加载
onLoad() {
// 这里目前没有实现任何功能,一般用于初始化页面数据或设置监听事件等
},
// 自定义方法:授权登录
toLogin() {
// 输出日志,表示点击事件已被执行
console.log("点击事件执行了")
// 调用微信小程序的getUserProfile接口获取用户信息
wx.getUserProfile({
// 描述,会在弹窗中向用户展示
desc: 'desc',
// 成功回调函数
success: (res) => {
// 从响应结果中取出用户信息
let user = res.userInfo
// 输出日志,表示授权成功,并打印用户信息
console.log("授权成功", res)
// 更新页面数据,设置userInfo为获取到的用户信息
this.setData({
userInfo: user,
})
},
// 失败回调函数
fail: (res) => {
// 输出日志,表示授权失败,并打印失败原因
console.log("授权失败", res)
}
})
},
// 自定义方法:退出登录
loginOut() {
// 清空页面数据中的userInfo,模拟退出登录
this.setData({
userInfo: null
})
}
})
总结一下上述代码:
(1)用户点击登录按钮时触发toLogin方法,请求微信用户的个人信息授权,并在授权成功后将用户信息保存至页面的data.userInfo中。
(2)用户触发退出登录操作时,调用loginOut方法,清空页面数据中的用户信息,实现退出登录效果。
4. 最后 ,如果有退出操作需要在mine.wxml文件中写入一个可以点击的入口,下面是我的代码:
<view class="nav-item">
<view bindtap="loginOut">
//这里放了一个图标(可随意删减)
<image src="/images/icon/退出登录.png" bindtap="loginOut"></image>
</view>
<view bindtap="loginOut">退出登录</view>
</view>
mine.wxml中本文涉及的全部代码如下(可直接复制该段):
<view class="head">
<button wx:if="{{!userInfo}}" bindtap="toLogin">登录</button>
</view>
//登录后展示头像、昵称及自我介绍(可随意删减)
<view wx:else class="head-account">
<image class="headElement" src="{{userInfo.avatarUrl}}" mode=""/>
<text class="nickname">{{userInfo.nickName}}</text>
<text class="personalSignature">一句话介绍自己</text>
</view>
<view class="nav-item">
<view bindtap="loginOut">
<image src="/images/icon/帮助中心.png" bindtap="loginOut"></image>
</view>
<view bindtap="loginOut">退出登录</view>
</view>
需要注意的是,html中bindtap里的属性名需要与js里的函数名一致
5. 最终效果 :
样式可以自行调整,如需源码,可以小窗我(上传文件需要md格式,没时间整)