小程序开发技巧总结

1. 数据绑定

数据绑定是小程序开发中非常重要的一个技巧。小程序使用 WXML 组件渲染来实现前端渲染和数据绑定。可以通过 {{ }} 来将数据渲染到视图中，也可以使用 bind, catch 或者 model 来响应不同的事件。

绑定数据操作常见的有以下方式：

1.1 单向数据绑定

单向数据绑定是指只有数据的传递，没有数据的反馈。当数据发生变化时，视图也会相应的更新。


Page({
  data: {
    message: "Hello World!"
  }
})


<view>{{ message }}</view>

以上代码会在视图中渲染出 Hello World!。

1.2 双向绑定

双向绑定是指数据在视图中的变化也会反馈到数据中，数据变化也会相应的更新视图。


Page({
  data: {
    message: "Hello World!"
  },
  bindInputValue: function (e) {
    this.setData({
      message: e.detail.value
    })
  }
})


<input value="{{ message }}" bindinput="bindInputValue" />
<view>{{ message }}</view>

以上代码会在视图中渲染出一个输入框和一个文本框，当在输入框中输入内容时，文本框中的内容也会相应的改变。

2. 生命周期

小程序中有一些生命周期函数可以让我们在不同的生命周期中执行不同的操作。以下是一些常用的生命周期函数：

2.1 onLoad

页面加载时会触发该函数。


Page({
  onLoad: function () {
    console.log("页面加载");
  }
})

2.2 onReady

页面初次渲染完成后会触发该函数。


Page({
  onReady: function () {
    console.log("页面渲染完成");
  }
})

2.3 onShow

页面展示时会触发该函数。


Page({
  onShow: function () {
    console.log("页面展示");
  }
})

2.4 onHide

页面隐藏时会触发该函数。


Page({
  onHide: function () {
    console.log("页面隐藏");
  }
})

2.5 onUnload

页面卸载时会触发该函数。


Page({
  onUnload: function () {
    console.log("页面卸载");
  }
})

3. 获取DOM节点

在小程序开发中，需要获取 DOM 节点进行操作时，可以使用 createSelectorQuery() 方法，该方法返回一个实例对象，该对象提供了一些方法可以获取到节点信息。

3.1 获取单个节点信息


Page({
  onReady: function () {
    var that = this;
    wx.createSelectorQuery().select('#myDom').boundingClientRect(function (rect) {
      console.log(rect);
      // { top: 0, left: 0, width: 50, height: 50, right: 50, bottom: 50 }
    }).exec()
  }
})


<view id="myDom" style="width:50px;height:50px;background-color:red;"></view>

3.2 获取多个节点信息


Page({
  onReady: function () {
    var that = this;
    wx.createSelectorQuery().selectAll('.myDom').boundingClientRect(function (rects) {
      console.log(rects);
      // [{}, {}]
    }).exec()
  }
})


<view class="myDom" style="width:50px;height:50px;background-color:red;"></view>
<view class="myDom" style="width:50px;height:50px;background-color:green;"></view>

4. WXML语法

小程序使用 WXML 转换成小程序视图层的结构和属性，类似于 HTML 的语法。以下是一些常用语法：

4.1 条件渲染

条件渲染通过 hidden 属性来实现。


<view hidden="{{ flag }}">Hello World!</view>
<button bindtap="handleClick">{{ message }}</button>


Page({
  data: {
    flag: true,
    message: "显示/隐藏"
  },
  handleClick: function () {
    this.setData({
      flag: !this.data.flag,
      message: this.data.flag ? "显示" : "隐藏"
    })
  }
})

以上代码会在页面中渲染出一个文本和一个按钮，点击按钮文本会显示或隐藏。

4.2 循环渲染

循环渲染通过 wx:for 来实现。


<view wx:for="{{ list }}" wx:key="*this">{{ item }}</view>


Page({
  data: {
    list: ["A", "B", "C"]
  }
})

以上代码会在页面中渲染出三个文本，分别为 A、 B、 C。

5. 常用API

5.1 数据缓存

小程序提供了一个数据缓存的API wx.setStorageSync(key, data) 和 wx.getStorageSync(key)，可以用来保存和取出数据。


Page({
  storageData: function () {
    wx.setStorageSync("message", "Hello World!");
  },
  getData: function () {
    var message = wx.getStorageSync("message");
    console.log(message);
    // Hello World!
  }
})

以上代码会调用两个函数，storageData 函数用来保存一个文本数据，getData 函数用来取出保存的数据。

5.2 跳转页面

在小程序中页面跳转有两种方式，一种是使用 navigator 组件，还有一种则是使用 API wx.navigateTo(Object object) 或者 wx.redirectTo(Object object)。

5.2.1 navigator 组件

使用 navigator 组件可以方便的进行页面跳转，需要注意的是，由于小程序属于单页面应用程序，所以页面跳转后，新页面会覆盖旧页面。


<navigator url="/pages/index/index" />
<navigator url="/pages/index/index" open-type="redirect" />

navigator 组件有两个属性，分别是 url 和 open-type。

5.2.2 API 跳转


Page({
  navigateTo: function () {
    wx.navigateTo({
      url: "/pages/index/index"
    })
  },
  redirectTo: function () {
    wx.redirectTo({
      url: "/pages/index/index"
    })
  }
})

调用API跳转的函数为 navigateTo 和 redirectTo。

总结

小程序开发技巧总结如下：数据绑定、生命周期、获取DOM节点、WXML语法和常用API。

总结几点小程序开发技巧