1.看官方文档时，注意看底部的 Bug & Tips。

1.data

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON 的类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过 WXML 对数据进行绑定。

2.component

  • 使用 this.data 可以获取内部数据和属性值；但直接修改它不会将变更应用到界面上，应使用 setData 修改。
  • 生命周期函数无法在组件方法中通过 this 访问到。
  • 属性名应避免以 data 开头，即不要命名成 dataXyz 这样的形式，因为在 WXML 中， data-xyz=”” 会被作为节点 dataset 来处理，而不是组件属性。
  • 在一个组件的定义和使用时，组件的属性名和 data 字段相互间都不能冲突（尽管它们位于不同的定义段中）
  • 从基础库 2.0.9 开始，对象类型的属性和 data 字段中可以包含函数类型的子字段，即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。

3.page

  • onPullDownRefresh()
    监听用户下拉刷新事件
    • 需要在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh。
    • 可以通过 wx.startPullDownRefresh 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
    • 当处理完数据刷新后，wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。
  • onReachBottom()
    监听用户上拉触底事件
    • 可以在 app.json 的 window 选项中或页面配置中设置触发距离 onReachBottomDistance。
    • 在触发距离内滑动期间，本事件只会被触发一次。
  • 页面间通信
    如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：
    • 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
    • wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
    • 这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

2.弯路

  1. 底部导航栏
    • 开始即看到官方文档给的程序，自定义 tabBar 组件，新增文件夹 custom-tab-bar，app.json 配置 "custom": true，导航页面使用 component 而不是 page。测试过程中发现点击底部导航会发生闪烁现象，跳转不流畅。并且使用 component 则一些page 的功能将无法使用，例如上拉、下拉刷新。后来发现其实直接使用原生 tabbar 没有上述问题。

3.遇到错误和警告

  1. marker 警告：width and heigth of marker id 0 are required

    • marker 属性增加 width 和 height。

  2. this 错误：TypeError: Cannot read property ‘setData’ of undefined

    • 在生命周期函数中调用 API，在 API 中使用到 this时，需要在调用 API 前用其它变量替换 this，例如 var that=this。

  3. 对象属性单独在 this.setData 中更新

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    data:{
    	bat:{
    		code: "",
    		state: "",
    		vol: 0,
    		curr: 0
    	},
    	inputCode: "abc",
        inputBat:{
            code: "aaa",
            state: "x",
            vol: 65,
            curr: 0
        }
    }

    a:function(){
        //如更新 bat 中的所有属性
        this.setData({
            bat: inputBat
        })
        //如单独更新 code 属性
        var batCode='bat.code'
        this.setData({
            [batCode]: this.data.inputCode
        })
    }