课堂学习：小程序生命周期
一、小程序的生命周期函数
在app.js中定义，有三个：
//小程序的生命周期函数
App({
//小程序加载时，执行的函数
onLaunch() {
//通常在这里面发送请求，获取后台数据
console.log('小程序加载')
},
//小程序显示时，加载的函数 小程序打开显示时触发 同样当从其他场景重新跳回小程序时触发
onShow() {
console.log('小程序显示')
},
//小程序隐藏时，加载的函数 当小程序切换场景时会触发 （从当前小程序跳转到微信的其他场景时）
onHide() {
console.log('小程序隐藏')
}
})
二、页面的生命周期函数：
/**
*生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('页面初次渲染')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//从其他场景切换回来时触发
console.log('页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
//从当前页面切换到其他场景时触发
console.log('页面隐藏')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//关闭当前页面时触发
//tabBar页面在切换时并不是关闭 而是隐藏
console.log('页面卸载')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('页面下拉')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('页面上啦触底')
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
三、生命周期函数执行顺序
小程序的加载--->小程序的显示--->页面的加载--->页面的显示--->页面的初次渲染
页面之间切换会执行隐藏 重新切换回来时执行显示
四、制作微信登录效果：
//登录
login(){
//获取当前微信用户信息
wx.getUserProfile({
//设置获取微信信息的途径
desc: '登录系统',
//获取用户信息的回调函数
success:(e)=>{
console.log(e)
//获取用户头像、昵称
let {userInfo:{avatarUrl,nickName}} = e
this.setData({
imgsrc:avatarUrl,
nickName:nickName,
islogin:true
})
//将头像和昵称保存在缓存中
wx.setStorageSync('imgsrc', avatarUrl)
wx.setStorageSync('nickName', nickName)
}
})
},
//登出 点击头像图片 渲染页面 把一切还原
exit(){
//清空缓存数据
this.setData({
//是否显示按钮
islogin:false,
//头像图片路径
imgsrc:'',
//昵称
nickName:''
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('页面加载')
//放在页面加载中 即使切走了也会继续执行 不需要取消定时器
this.now ()
//判断缓存中是否存在imgsrc或者nickName 如果有 就渲染页面
if(wx.getStorageSync('imgsrc')){
this.setData({
islogin:true,
imgsrc:wx.getStorageSync('imgsrc'),
nickName:wx.getStorageSync('nickName')
})
}
},
五、扫码、打电话和打开地图选择位置的方法：
使用之前要去 Picker 选择器 网站 找到想要的图标 并且复制它的 wxml 代码 再绑定事件（必要时需要双向绑定 比如：model:value='{{tel}}'）
// 打电话 的样式
<view class="saomiao">
<input type="text" class="text" model:value='{{tel}}' />
<van-icon name="phone-o" class="tel" bindtap='maketel' />
</view>
//扫描二维码获取里面的result的方法
scanCode(){
wx.scanCode({
success:(e) => {
console.log(e)
let {result} = e
this.setData({
result
})
}
})
},
//打电话
maketel() {
console.log(111)
wx.makePhoneCall({
phoneNumber: this.data.tel,
success:(e)=>{
console.log(e)
}
})
},
//定位
loca(){
//获取当前经纬度坐标
wx.getLocation({
success:(e)=>{
console.log(e)
}
})
//打开地图选择位置
wx.chooseLocation({
success:(e)=>{
console.log(e)
let {name,address} = e
this.setData({
location: name + ' ' + address
})
}
})
},
