基本语法一

一、小程序与页面生命周期

---

二、wx:for 与 wx:if=“true”

wx:for默认遍历对象为item, 下标为index 指定：wx:for-item="diyItem" ———— wx:for-index=“diyIndex”

三、路由跳转与传值

路由跳转

// 注意下面两个区别
// wx.navigateTo({ url: '/pages/index/index?id=' + xxxId }) // 有返回按钮，调用onHide生命周期
 wx.redirectTo({ url: '/pages/index/index' }) // 无返回按钮,有主页按钮，调用onUnload生命周期

内置组件跳转

<view>
  <text class="title">这是第二页</text>
  <!-- 相当于a标签 -->
  <navigator url="../home/home">前往首页</navigator>
</view>

在onLoad中的可获取传值

---

四、事件绑定：bindtap与catchtap

常用事件

• tap：点按
• longpress：长按(350ms). 如果指定了该事件的回调函数并触发了该事件，tap事件将不被触发
• touchstart：触摸开始
• touchmove：触摸后移动
• touchend：触摸结束
• touchcancel：触摸动作被打断，如来电提醒，弹窗等

bind:tap=“handlexxx” // 新版写法(老版兼容)

catchtap绑定点击事件并阻止事件冒泡【事件说明】

事件绑定

// index.wxml
// bind:EventName 绑定事件语法
<view>
  <text class="title">hello {{name}}</text>
  <button bind:tap="buttonHandler">点击</button>
</view>

// index.js
Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) { // event原生事件对象
    // this指向页面实例
    this.setData({
      name: '李四'
    }, () => {
      console.log('在回调中，页面已更新完毕~')
    })
  }
})

setData说明

Page.prototype.setData({...}, cb)

• 修改this.data中的数据是同步的，页面渲染时异步的. cb是界面更新渲染完毕后的回调函数

• 仅支持设置可 JSON 化的数据

• 不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

五、本地缓存的使用

上限为10M

// +sync为同步方法
wx.setStorageSync('key', 'value') // value可以是对象
// 获取
wx.getStorageSync('key')
// 删除
wx.removeStorageSync('key') // 删除一个
wx.clearStorageSync() // 删除所有的