小程序模板语法

目录

1.1双向绑定

1.2 列表渲染

1.3 条件渲染

生命周期

2.1 应用级别的生命周期

2.2 页面级别的生命周期

内置 API

3.1 网络请求

3.2 界面交互

3.3 本地存储

npm 支持

4.1 默认构建

4.2 自定义构建

修改小程序的根目录

手动 npm 构建小程序

在小程序中使用 vant 组件库

步骤一 通过 npm 安装

 步骤二 修改 app.json

步骤三 修改 project.config.json

 步骤四 构建 npm 包

步骤五 使用

---

小程序有一套专门的模板语法来实现数据的渲染。

1.1双向绑定

小程序支持数据双向绑定，语法如下所示：

pages/index/index.wxml

<view>{
  { msg }}</view>
<input name="number" model:value="{
  { msg }}" />

pages/index/index.js

Page({
  data: {
    msg: 'hello mp'
  }
})

pages/index/index.wxss

input {
  height: 40px;
  padding: 0 10px;
  margin: 10rpx 0;
}

注意双向绑定仍然采用插值语法

微信小程序中 input、textarea、checkbox 等表单组件都支持双向绑定语法。

1.2 列表渲染

如果 data 中有一个数组类型的列表数据，我们要如何渲染出来呢？ 小程序提供了一个指令 wx:for 类似于 Vue 中的 v-for，通过一个小例子来学习：

pages/index/index.js

// 调用 Page 函数
Page({
  data: {
    students: [
      { id: 1, name: '小明', age: 18, gender: '男' },
      { id: 2, name: '小红', age: 17, gender: '女' },
      { id: 3, name: '小刚', age: 19, gender: '男' },
      { id: 4, name: '小丽', age: 18, gender: '女' },
      { id: 5, name: '小米', age: 19, gender: '女' }
    ]
  }
})

基本的语法格式

wx:for 的语法格式为 wx:for="{ { 数据名称 }}" ，并且内置默认通过 index 获取数组的索引值，item 访问数组的单元值，如下代码所示：

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{
  {students}}">
    <text>{
  {index + 1}}</text>
    <text>{
  {item.name}}</text>
    <text>{
  {item.age}}</text>
    <text>{
  {item.gender}}</text>
  </view>
</view>

样式美化：

pages/index/index.wxss

.students {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-right: none;
  border-bottom: none;
}

.students .item {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  line-height: 30px;
}

.students .item:first-child {
  background-color: #eee;
}

.students text {
  flex: 1;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

wx:key

在使用 wx:for 时会收到一个警告

是由于在使用 wx:for 时没有指定 wx:key 属性，这个 wx:key 属性的作用于 Vue 中一样的，但是语法稍有不同，大家一定要注意，如下所示：

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{
  {students}}" wx:key="id">
    <text>{
  {index + 1}}</text>
    <text>{
  {item.name}}</text>
    <text>{
  {item.age}}</text>
    <text>{
  {item.gender}}</text>
  </view>
</view>

[{id: xx, name},{}]

*this：

上述代码中 wx:key 属性的值要求必须具有唯一性，使用时分成两种情形：

1. 数组单元是对象类型时，只要写对象的属性名

2. 数组单元为简单类型数据时，使用 *this 指定为 wx:key 的值

pages/index/index.js

Page({
  data: {
    names: ['小明', '小红', '小刚', '小丽', '小米']
  }
})

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
  </view>
  <view class="item" wx:for="{
  {names}}" wx:key="*this">
    <text>{
  {index + 1}}</text>
    <text>{
  {item}}</text>
  </view>
</view>

自定义单元值和索引值的名字

开发中 wx:for 的嵌套是比较常见的，外层 wx:for 和内层的 wx:for 都使用 index 和 item 来访问数组的索引和单元，会使得代码的易读性比较差，这种情况下通过 wx:for-index 和 wx:for-item 来分别指定如何访问数组的索引值和单元值，如下代码所示：

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{
  {students}}" wx:key="id" wx:for-index="key" wx:for-item="student">
    <text>{
  {key + 1}}</text>
    <text>{
  {student.name}}</text>
    <text>{
  {student.age}}</text>
    <text>{
  {student.gender}}</text>
  </view>
</view>

1.3 条件渲染

wx:if

通过条件渲染控制元素或组件的显示与隐藏

pages/index/index.js

// 调用 Page 函数
Page({
  data: {
    show: true
  },
  toggle() {
    // 切换 show 的值
    this.setData({
      show: !this.data.show
    })
  }
})

pages/index/index.wxml

<!-- 条件数据渲染 -->
<button type="primary" bind:tap="toggle">显示/隐藏</button>
<view wx:if="{
  {show}}">