WeChat applet page syntax

一.使用数据

Used by the applet page动态数据are on the corresponding pagejs文件的data内.

// pages/index/index.js
Page({
    
  /** * 1.页面的初始数据 */
  data: {
    
    msg: 'Data initialization test'
  },

  /** * 生命周期函数--监听页面加载 * 加载indexThis function is triggered when the page is displayed,加载 完成后调用onShow()The function renders the page */
  onLoad(options) {
    
    console.log('页面加载函数 onLoad()')

    // 2.this当前页面的实例对象
    console.log(this)

    // 3.Use page data
    console.log(this.data.msg)

    // Edit in 2 seconds
    setTimeout(() => {
    
      // 4.修改页面数据
      this.setData({
    
        msg: '修改后的msg数据'
      })
      console.log(this.data.msg)
    },2000)
  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady() {
    

  },

  /** * 生命周期函数--监听页面显示 */
  onShow() {
    
	console.log("onShow()")
  },
})

• 单向数据流;model → view
• Modifying data is synchronous;

二. Data hijacking and proxies

1.Object.definePropertyImplement data hijacking and proxying

        let person = {
    
            username: '陈三', age: 18
        }

        let _this = {
    }

        // 用_this代理person(通过数据劫持set,修改数据时,setterHijack the data to be modified,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.vueThe principle of data proxy and hijacking

链接

三.小程序事件

事件的回调函数with the function period sumdataObject siblings are written directly inPage({})内

1.事件分类

事件 事件分类

冒泡事件 bind+事件 (The event of the target element is fired first,The parent element event is then fired from the inside out)
非冒泡事件 catch+事件 (Only fire the event of the target element)

四.路由跳转

API → 路由

1.wx.navigateTo

保留当前页面,跳转到应用内的某个页面.最多十层.
url要求: 从/目录开始写
/ + pages/页面

  /** * Jump routing function,跳转到logs页面 */
  //toLogs(){等价于
  toLogs:function(){
    
    wx.navigateTo({
    
      url: '/pages/logs/logs',
    })
  },

2.Configure the specified page window

在对应页面的json内配置
操作:
Write the corresponding content directly, 不用window

{
    
  "navigationBarTitleText": "启动日志", //对应内容
  "usingComponents": {
    }
}

五.生命周期

The page is displayed for the first time: onLoad → onShow → onReady

// pages/index/index.js
Page({
    
  /** * 1.页面的初始数据 */
  data: {
    
    userName: '孤',
    msg: 'Data initialization test'
  },

  /** * Jump routing function,跳转到logs页面 */
  toLogs: function () {
    
    wx.navigateTo({
    
      url: '/pages/logs/logs',
    })
    // wx.reLaunch({
    
    // url: '/pages/logs/logs',
    // })
  },

  /** * 生命周期函数--监听页面加载 * 加载indexThis function is triggered when the page is displayed,加载 完成后调用onShow()The function renders the page */
  onLoad(options) {
    
    console.log('页面加载函数 onLoad()')
    // debugger;
    // 2.this当前页面的实例对象
    // console.log(this)

    // 3.Use page data
    // console.log(this.data.msg)

    // Edit in 2 seconds
    // 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()")
  }
})