微信小程序(二)登录授权实现
2024-10-12 01:42:02
相对于上一节,这一节主要是动态获取数据,主要是对登陆信息的接收,以及页面获取授权按钮的相对相应(未授权时,显示,授权后不显示)
关键在于状态值的判断,以及对页面的不同响应(m-->v)
wxml代码如下:
<!--pages/index2/index2.wxml-->
<view class="index2Container">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
<button bindgetuserinfo='handleGetUserInfo' style='display:{{isShow?"block":"none"}}' open-type="getUserInfo">获取用户登录信息</button>
<text class="username">hello {{userInfo.nickName}}</text>
<view class="goStudy">
<text class="test">开启小程序之旅</text>
</view>
</view>
js代码如下:
// pages/index2/index2.js
Page({ /**
* 页面的初始数据
*/
data: {
msg:"阿童木",
userInfo: "测试",
isShow:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("this" + this);
this.getUserInfo();
},
getUserInfo(){
//判断用户是否授权了
wx.getSetting({
success: (data) => {
console.log(data);
if (data.authSetting['scope.userInfo']) {
//用户已经授权
this.setData({
isShow: false
});
} else {
//没有授权
this.setData({
isShow: true
});
}
}
})
//获取用户登录的信息
wx.getUserInfo({
success: (data) => {
console.log(data);
//更新data中的userInfo
this.setData({
userInfo: data.userInfo
});
},
fail: () => {
console.log("获取用户失败!")
}
})
},
handleGetUserInfo(data){
console.log("用户点击了",data);
//判断用户点击的是否允许
if(data.detail.rawData){
//用户点击的是允许4
this.getUserInfo();
}
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
最新文章
- 数据结构与算法分析——C语言描述 第三章的单链表
- structs2之多文件上传
- 高性能MySQL笔记 第6章 查询性能优化
- Otsu algorithm
- ps中如何用抽出功能扣取头发
- NP完全问题 NP-Completeness
- Shrink磁盘
- C#右键复制路径
- 分享一张oracle scan图
- Redis + Jedis + Spring (list操作)
- Gson的基本使用方法(google)
- ADO.net基础学习总结
- Webserver管理系列:9、创password重设盘
- 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏
- angular二级联动菜单
- 基于testng框架的web自动化测试
- Django + Uwsgi + Nginx 实现生产环境部署
- 20165206 实验一 Java开发环境的熟悉
- 移动端line-height问题
- 史上最详细nodejs版本管理器nvm的安装与使用(附注意事项和优化方案)
热门文章
- CS231n 第一次作业KNN中本地CIFAR10数据集的载入
- [Swift]LeetCode7. 反转整数 | Reverse Integer
- [Swift]LeetCode130. 被围绕的区域 | Surrounded Regions
- [Swift]LeetCode994. 腐烂的橘子 | Rotting Oranges
- Python Django(WEB电商项目构建)
- 关于CKEditor 4.0 过滤html标签
- Bootstrap 字体与图标
- 通过Python、BeautifulSoup爬取Gitee热门开源项目
- MySQL系列--1.安装卸载与用户权限管理
- 如何用sysbench做好IO性能测试