微信小程序语法

一.响应的数据绑定

1.框架的核心是一个响应的数据绑定系统，当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

在页面一打开的时候会显示 Hello WeChat!：

当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层执行 setData 的操作，将 data 中的 name 从 WeChat 变为 MINA：

二.APP

1.App() 必须在 app.js 中调用，必须调用且只能调用一次。
2.属性

①onLaunch(Object object)，小程序初始化完成时触发，全局只触发一次。
②onShow(Object object)，监听小程序启动或切前台。
③onHide()，监听小程序切后台。
④onError(String error)，发生脚本错误或 API 调用报错时触发。
⑤onPageNotFound(Object object)，要打开的页面不存在时触发。
⑥onUnhandledRejection(Object object)，有未处理的 Promise 拒绝时触发。

示例代码：

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

二.WXML语法

1.数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
①简单绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

②组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

③控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

④关键字(需要在双引号之内)

<checkbox checked="{{false}}"> </checkbox>

true：boolean 类型，代表真值；false：代表假值。

2.列表渲染
①wx:for

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

3.条件渲染
①使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

4.模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

①定义模板
使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

②使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2020-03-02'
    }
  }
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>