【小程序开发笔记】微信小程序的JS基础

一.常用的回调函数
1.1 生命周期和回调函数

  • onLoad: 页面加载时触发。一个页面只会调用一次。
  • onShow: 页面显示/切入时触发。
  • onReady: 页面初次完成渲染时触发。一个页面只会调用一次
  • onHide: 页面隐藏/切出时触发。
  • onUnload: 页面卸载时触发。
    页面第一次加载时的执行顺序:
    onLoad => onShow => onReady
  • onPullDownRefresh: 监听用户下拉刷新时事件
  • onReachBottom: 监听用户上拉触底事件
  • onShareAppMeggage: 监听用户转发行为,并自定义转发内容
如果数据经常更新,可以把数据放在onShow中,方便加载、更新;
如果数据加载后就不再改变,可以把数据放在onLoad中。
1.2 事件响应和视图层数据获取
  • 使用 data-变量名 为组件中的变量赋值
  • 使用 bindtap监听点击事件
JS中使用event传参当前元素, event 输出当前事件, event.currentTarget输出当前响应的页面元素, event.currentTarget.dataset输出该页面元素所包含的data-变量名的json数据
WXML:

JS:
go: function(event){ console.log(event) console.log(event.currentTarget) console.log(event.currentTarget.dataset) //输出字典 console.log(event.currentTarget.dataset.test) //输出数据 },

1.3 this关键字
  • this 表示当前对象的一个引用。可以用this来访问页面的数据或调研页面内的函数。如:
    this.data : 访问当前页面内的数据。
    this.func(): 访问当前页面内的函数。(func为js中定义的函数)
  • 【【小程序开发笔记】微信小程序的JS基础】在API中使用this,其将不会指向当前页面。需要我们在调用api之前暂存当前的this指向当前的this,如:
    var that = this
1.4 视图层数据更新
  • 使用 this.setData({变量名1: 变量值1, 变量名2: 变量值2}) 更新页面数据

    推荐阅读