模板与配置

WXML 模板语法

Mustache语法

{{}}，类似 Vue中的插值表达式

应用场景

• 绑定内容
• 绑定属性：在属性值中用 {{}}，这个和 Vue 不同，例如：<image src="{{imgSrc}}"
• 三元运算
• 算数运算

数据赋值

通过调用 this.setData(dataObject) 方法，在 .js 文件中为 data 数据重新赋值，this.data.xxx 是当前值。

事件绑定

常用事件

类型	绑定方式	绑定方式
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

bindtap 语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为，步骤如下：

1. 通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

   <button type="primary" bindtap="btnTapHandler">按钮</button>
   

2. 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：

   btnTapHandler(e){
       console.log(e)
   }
   

bindinput 语法格式

1. 通过 bindinput，可以为文本框绑定输入事件：

   <input bindinput="inputHandler"></input>
   

2. 在页面的 .js 文件中定义事件处理函数:

   inputHandler(e) {
   	console.log(e.detail.value)
   },
   

   e.detail.value 是文本框最新的值

实现文本框和 data 之间的数据同步：

inputHandler(e) {
    this.setData({
   		 msg: e.detail.value
    })
},

事件对象

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别：

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下：

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

此时，对于外层的 view 来说：

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

事件传参

为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

<button type="primary" bindtap="btnTap2" data-info="{{3}}">+2</button>

• info 会被解析为参数的名字
• 数值 2 会被解析为参数的值，用 Mustache 是数字，不用则是字符串

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值

条件渲染

wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加 else 判断，例如：

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

wx:if 结合 <block>

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上使用 wx:if 控制属性，示例如下：

<block wx:if="{{true}}">
  <view>111</view>
  <view>222</view>
</block>

注意： <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

hideen

在小程序中，也可以直接使用 hidden="{{condition}}" 控制元素的显示与隐藏，例如：

<view hidden="{{flag}}">
  条件为 true 的时候隐藏元素，否则显示
</view>

wx:if 与 hidden 的对比

	运行方式	使用场景
wx:if	动态创建和移除元素	控制条件复杂
hidden	切换样式的方式（display: none/block）	频繁切换

列表渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{arr1}}">
  索引是：{{index}}, item 是： {{item}}
</view>

默认情况下，当前循环项的索引用 {{index}} 表示；当前循环项用 {{item}} 表示。

手动指定索引和当前项的变量名：

• 使用 wx:for-index 可以指定当前循环项的索引的变量名
• 使用 wx:for-item 可以指定当前项的变量名

例如：

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}}, item 是： {{itemName}}
</view>

wx:key

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码如下：

<view wx:for="{{arr1}}" wx:key="index">
  索引是：{{index}}, item 是： {{item}}
</view>

wx:key 不用加 {{}}

全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

• pages：记录当前小程序所有页面的存放路径
• style：是否启用新版的组件样式
• window：全局设置小程序窗口的外观
• tabBar：设置小程序底部的 tabBar 效果

窗口组成部分

window 常用配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中通常将其分为：

• 底部 tabBar
• 顶部 tabBar

注意：

• tabBar 中只能配置最少 2 个、最多 5 个 tab 页签
• 当渲染顶部 tabBar 时，不显示 icon，只显示文本
• tabBar 页面需放在 app.json 的 page 项前面

组成部分

• backgroundColor：tabBar 的背景色
• selectedIconPath：选中时的图片路径
• borderStyle：tabBar 上边框的颜色
• iconPath：未选中时的图片路径
• selectedColor：tab 上的文字选中时的颜色
• color：tab 上文字的默认（未选中）颜色

常用配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少 2 个、最多 5 个 tab

tab 页签配置项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

页面配置

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件” 就可以实现这种需求。

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

页面配置中常用的配置项：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

网络数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

• 只能请求 HTTPS 类型的接口
• 必须将接口的域名添加到信任列表中

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：

  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: '张三',
        age: 20
      },
      success: (res) => { // 请求成功之后的回调函数
        console.log(res.data) // res.data服务器返回的数据
      }
    })
  }

发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：

postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: '李四',
        age: 33
      },
      success: (res) => {
        console.log(res.data)
      }
    })
  }

初始化数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据，此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getInfo()
    this.postInfo()
  }