一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

引用路径

import 的路径不支持绝对路径，比如你希望引用 utils/comon.js，不管多深的组件都需要 ../ 点到根目录，同样 .wxss 文件 @import 导入文件时也只能使用相对路径，所以我们经常会看到 ../../../../../../utils/fetch.js 这种东西

模板的使用

模板 {{}} 中连方法都不能执行，只能处理简单的运算如 + - * /，如果遇到数据需要 filter 的场景，需要在 .js 文件中预先格式化好再一个个 setData，比如常用的 [2,3,4].includes(type)，都跑不动。

存储数据

setData 中没有对象合并，假如 data: {a: {b: 1, c: 1}}，那么 setData({a: {b: 2}}) 就会丢失 a.c 的值，必须要要 setData({['a.b': 2]}) 这样才行。

动态设置class名

<view class="wid-half {{item.active?'active':''}}">

bindtap拿到的值

<view bindtap="clickme" data-item="{{item}}>

clickme事件的时候如何拿到这个节点的数据，定义一个data-属性，通过以下方法获取值，其中data-名称，不能出现大写字母，可以通过 - （中划线）来连接单词

clickme(e){
    let info = e.currentTarget.dataset.item
    console.log(info)
}

target和currentTarget的区别

target 触发事件的源组件。
currentTarget 事件绑定的当前组件。

如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。

index索引的使用

需要注意的是wx:key="index"，index是没有{{}}的，而如果想获取index的值，设置data-index时候是需要{{}}的

<view wx:for="{{lists}}" wx:for-index="index" wx:key="index" data-index="{{index}}" >
   {{item.title}}
</view>

阻止冒泡事件 catchtap

<view bindtap='handout'>
   outer
   <view catchtap='handmiddle'>
      middle
      <view bindtap='handinner'>inner</view>
   </view>
</view>

列表渲染 wx:for

数组默认的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item,如果需要改变的话，使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>

和vue类似，wx:key和wx:for不能存在同一个节点上。

路由

getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];// 上一个页面
prevPage.onLoad();// 上一个页面刷新
wx.navigateBack({
    delta: 1 
})

开发小程序你应该知道的