#本文章仅用于记录本人学习过程,当作笔记来用,如有侵权请及时告知,谢谢!
me页面有四个文件
接下来我们一个一个文件分析:
首先是me.js:
Page({
data:{ //定义一个data方法
userinfo:{},//创建一个userinfo变量来储存信息
openid:"" //用来保存云函数获取到的openid信息
},
onGotUserInfo:function(e){ //使用onGotUserinfo方法获取用户信息,与wxml中的bindgetuserinfo="onGotUserInfo"对应
const that = this //将this保存至that中,防止不生效
wx.cloud.callFunction({ //调用云函数
name:"login", //云函数名字是login
success:res=>{ //如果云函数调用成功,使用的是ES6的箭头函数(还没学过)
console.log("云函数调用成功") //就打印"云函数调用成功"
that.setData({ //setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。不是很懂
openid:res.result.openid, //调用云函数后才将得到的res.result.openid赋值到openid变量
userinfo: e.detail.userInfo //传递了参数e的userinfo到userinfo变量中
})
that.data.userinfo.openid = that.data.openid
//将userinfo、openid这些信息保存至缓存中,信息越少越好,就将userinfo和openid两条信息合成一条信息,将openid变成userinfo里面的一个字段
console.log("userinfo", that.data.userinfo) //打印userinfo到控制台中
wx.setStorageSync("userinfo", that.data.userinfo)
//将userinfo保存至缓存中,key是"userinfo",value是that.data.userinfo
},
fail:res=>{ //如果云函数调用失败
console.log("云函数调用失败") //就打印"云函数调用失败"
}
})
},
onLoad:function(options){ //onload生命周期函数通过options获取参数
const ui = wx.getStorageSync('userinfo') //获取缓存信息,使用getStorageSync函数
this.setData({
userinfo:ui, //userinfo = ui
openid:ui.openid // openid = ui.openid
})
}
})
me.json
{
"usingComponents": {}
}
me.wxml
<view wx:if="{{!openid}}">
<!-- 如果获取到的openid是空的,就显示登录按钮 -->
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">HYH叫你点我点我!</button>
</view>
<!-- /*如果是变量的话都用两个大括号括起来*/ -->
<view class="uploader-container" wx:if="{{openid}}">
<image class="image" src="{{userinfo.avatarUrl}}"></image>
<!-- 指定头像路径,加上定义image样式 -->
<view class="name">{{userinfo.nickName}}</view>
<!-- 显示用户昵称,加上定义name样式 -->
</view>
<!-- /*样式都在wxss文件中写*/ -->
me.wxss
.image {
width: 100px;
height: 100px;
margin: 0 auto;
/* 设置对象上下间距为0,左右自动 */
display: block;
padding-top:20px;
}
.name {
text-align: center;
/* 居中 */
padding-top:10px;
}
button{
background: #EA5149;
width: 60%;
margin-top: 100px;
color: #ffffff;
}