Completed recently. . . . The express delivery hasn’t arrived yet, so I took 3 days to learn the mini program. I heard that it’s easy to learn after learning Vue. Yeah, I’ve been lazy for a week, hehe ( ▽ )
event:
bind: will bubble
catch: bind and will not bubble
life cycle
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
Get user information
There is no need to consider whether to get the data directly
If the user information is successfully obtained in the
data, the data is obtained when the
page is loaded
Here are the final steps.
Finally figured it out. . . Outrageous
<view class="indexContainer">
<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 bindtap="handleParent" class="goStudy">
<text catchtap="handleChild">开启小程序之旅</text>
</view>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
msg: '气球',
userInfo: {
},
isShow: true
},
handleParent(){
console.log('父元素')
},
handleChild() {
console.log('子元素')
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
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 => {
//在这里要用箭头函数 普通函数this指向会有问题
// 因为在getUserInfo这个api中success回调函数肯定不是当前页面调用的
console.log(data)
this.setData({
userInfo: data.userInfo
})
},
fail: () => {
console.log("获取用户失败")
}
})
},
handleGetUserInfo(data){
console.log('用户点击了',data)
if(data.detail.rawData){
//用户点击的是允许
this.getUserInfo()
}
},
This is the case. First of all, you must understand these in the document:
getUserInfo executed when you have entered the page and initialized. If you have not authorized it, nothing will be moved inside because it will enter the fail callback. The above interface adjustment is clear. , and
if the authorization had, on the normal display, perform down, which have nothing to say
at this time when the talk never authorized to enter, click the button, pop-up boxes, click allow, (here I do not know how he always wanted to know authorization Yes, I just know that the authorization data is different after clicking Allow. Later, I guessed that he clicked the allow option by default, which is considered authorization. I have stuck here for a long time.)
Then it is to show the hidden button by whether to authorize or not, and the ternary operator is used. There is a problem, "" "", I used two double quotation marks like this, and an error was reported. In
summary, whether it is '' or" ", as long as it is different
style='display:{
{isShow? "block" : "none"}}'