Mini Program Page Syntax
1. Usage data
The dynamic data used by the applet page is all in the data of the js file of the corresponding page.
// 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()")
},
})
- One-way data flow; model → view
- Modifying data is synchronous;
2. Data hijacking and proxies
1. Object.defineProperty realizes data hijacking and proxy
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's data proxy and hijacking principle
3. Small program events
事件的回调函数It is written directly Page({})at
1. Event classification
Event classification
Bubble event bind+event (trigger the event of the target element first, and then trigger the parent element event from the inside out)
non-bubbling event catch+event (only trigger the event of the target element)
4. Routing jump
API → Routing
1.wx.navigateTo
Keep the current page and jump to a page in the app. Up to ten layers.
URL requirements: from /目录开始写
/+pages/页面
/**
* 跳转路由函数,跳转到logs页面
*/
//toLogs(){等价于
toLogs:function(){
wx.navigateTo({
url: '/pages/logs/logs',
})
},
2. Configure the specified page window
在对应页面的jsonInternal configuration
operation:
write the corresponding content directly, without window
{
"navigationBarTitleText": "启动日志", //对应内容
"usingComponents": {
}
}
5. Life cycle
First, the applet is initialized: onLaunch
The page is displayed for the first time: onLoad → onShow → onReady (only after the first rendering is completed, and then hide and display the show)
Page unloading:
an error occurred on onUnload: onError
onHide and onShow refer to the applet switching to the background and displaying to the foreground.
// 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()")
}
})