小程序页面语法
一.使用数据
小程序页面使用的动态数据都在对应页面的js文件的data内.
// pages/index/index.js
Page({
/**
* 1.页面的初始数据
*/
data: {
msg: '数据初始化测试'
},
/**
* 生命周期函数--监听页面加载
* 加载index页面时触发该函数,加载 完成后调用onShow()函数呈现页面
*/
onLoad(options) {
console.log('页面加载函数 onLoad()')
// 2.this当前页面的实例对象
console.log(this)
// 3.使用页面数据
console.log(this.data.msg)
// 两秒后修改
setTimeout(() => {
// 4.修改页面数据
this.setData({
msg: '修改后的msg数据'
})
console.log(this.data.msg)
},2000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("onShow()")
},
})
- 单向数据流；model → view
- 修改数据是同步；
二. 数据劫持与代理
1.Object.defineProperty实现数据劫持和代理
let person = {
username: '陈三', age: 18
}
let _this = {
}
// 用_this代理person(通过数据劫持set,修改数据时,setter劫持要修改的数据,setter来进行修改;数据代理get)
for (let item in person) {
// console.log(item)
Object.defineProperty(_this, item, {
get() {
return person[item]
},
set(value) {
person[item] = value
}
})
}
console.log(_this)
console.log(_this.username, _this.age)
/*
总结:
_this的get()方法获取person的值;数据代理.
_this的set()方法修改person的值;数据劫持.
*/
_this.username = '李四'
_this.age = 81
console.log(_this.username, _this.age)
2.vue的数据代理与劫持原理
三.小程序事件
事件的回调函数与函数周期和data对象同级都直接写在Page({})内
1.事件分类
事件 事件分类
冒泡事件 bind+事件 (先触发目标元素的事件,然后由内而外触发父元素事件)
非冒泡事件 catch+事件 (只触发目标元素的事件) 
四.路由跳转
API → 路由
1.wx.navigateTo
保留当前页面，跳转到应用内的某个页面。最多十层.
url要求: 从/目录开始写
/ + pages/页面
/**
* 跳转路由函数,跳转到logs页面
*/
//toLogs(){等价于
toLogs:function(){
wx.navigateTo({
url: '/pages/logs/logs',
})
},
2.配置指定页面窗口
在对应页面的json内配置
操作:
直接写对应内容, 不用window
{
"navigationBarTitleText": "启动日志", //对应内容
"usingComponents": {
}
}
五.生命周期
首先, 小程序初始化: onLaunch
页面第一次显示: onLoad → onShow → onReady(初次渲染完成才有,以后就是隐藏hide和展示show)
页面卸载: onUnload
发生错误: onError
onHide和onShow是指小程序切换到后台和展示到前台.
// pages/index/index.js
Page({
/**
* 1.页面的初始数据
*/
data: {
userName: '孤',
msg: '数据初始化测试'
},
/**
* 跳转路由函数,跳转到logs页面
*/
toLogs: function () {
wx.navigateTo({
url: '/pages/logs/logs',
})
// wx.reLaunch({
// url: '/pages/logs/logs',
// })
},
/**
* 生命周期函数--监听页面加载
* 加载index页面时触发该函数,加载 完成后调用onShow()函数呈现页面
*/
onLoad(options) {
console.log('页面加载函数 onLoad()')
// debugger;
// 2.this当前页面的实例对象
// console.log(this)
// 3.使用页面数据
// console.log(this.data.msg)
// 两秒后修改
// setTimeout(() => {
// 4.修改页面数据
// this.setData({
// msg: '修改后的msg数据'
// })
// console.log(this.data.msg)
// },2000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log('初次渲染完成 onReady()')
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("页面显示(多次执行) onShow()")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("页面隐藏 onHide()")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("页面卸载 onUnload()")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("用户下拉 onPullDownRefresh()")
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("上拉触底事件的处理函数 onReachBottom()")
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
console.log("点击右上角分享 onShareAppMessage()")
}
})