微信小程式開發學習筆記[3]

---

目錄

微信小程式開發學習筆記[3]

一、檢視

二、資料繫結

三、wx:if and wx:for

3.1 wx:if

3.2 wx:for

---

一、檢視

• 框架的檢視層由WXML與WXSS編寫，由元件來進行展示。

• 將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。

• WXSS（WeiXin Style Sheet）描述頁面的樣式。

• 元件（Component）是檢視的基本組成單元

•  

二、資料繫結

WXML中的動態資料均來自對應Page的 JS頁面中的data域中定義的資料。

資料繫結使用Mustache 語法（雙大括號）將變數包起來，可以作用於：內容、元件屬性[需要在雙引號之內]、控制屬性[需要在雙引號之內]。

資料繫結作用於內容:

// pages/binddate/binddate.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    username:"annjeff"
  }
})

<!--pages/binddate/binddate.wxml-->
<text>username:{{username}}</text>

 資料繫結作用於元件屬性[需要在雙引號之內]

// pages/binddate/binddate.js
Page({
  data: {
    username:"annjeff",
    id:1  
  }
})

/* pages/binddate/binddate.wxss */
#item1{
  width:250rpx;
  height: 100rpx;
  background-color: #2907F3
}

<!--pages/binddate/binddate.wxml-->
<view id="item{{id}}">演示1</view>
<view id="item1">演示2</view>

資料繫結作用於控制屬性[需要在雙引號之內]

// pages/binddate/binddate.js
Page({

  data: {
    username:"annjeff",
    id:1,
    condition:true
  }})

<!--pages/binddate/binddate.wxml-->
<!--當條件為false時，該標籤內內容會被隱藏-->
<view wx:if="{{condition}}">邏輯控制判斷</view>

演示從物件以及物件陣列中取資料：

// pages/binddate/binddate.js
Page({

  data: {
  employee:{
    name:"Tom",
    dept:"IT"
  },
  employees:[{
    name:"Tom",
    dept:"IT"
  },{
    name:"Ann",
    dept:"sale"
  }
  ]
  }})

<!--演示從物件中取資料-->
<view>name:{{employee.name}}</view>
<view>dept:{{employee.dept}}</view>

<!--演示從物件陣列中取資料-->
<view>name1:{{employees[0].name}}</view>
<view>dept:{{employees[0].dept}}</view>

三、wx:if and wx:for

3.1 wx:if

在框架中，使用wx:if="{{condition}}"來判斷是否需要渲染該程式碼塊，當condition為true時程式碼才會被渲染。

/ pages/binddate/binddate.js
Page({

  data: {
    condition:true}})

<!--演示條件程式碼渲染-->
<view wx:if"{{condition}}""></view>

也可以用wx:elif和wx:else 來新增一個else塊。

// pages/binddate/binddate.js
Page({

  data: {
    grade:75}})

<!--演示wx:if wx:else wx:elif-->
<view wx:if="{{grade>60}}">及格</view>
<view wx:elif="{{60>grade>45}}">有補考機會</view>
<view wx:else>下年再來一年</view>

如果要一次性判斷多個元件標籤，可以使用一個<block/>標籤將多個元件包裝起來，並在上邊使用wx:if 控制屬性。

<!--一次性判斷多個元件標籤-->
<block wx:if="{{condition}}">
<view>第一行</view>
<view>第二行</view>
</block>

3.2 wx:for

在元件上使用wx:for控制屬性繫結一個陣列，即可使用陣列中各項的資料重複渲染該元件。

預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為item。
   

/ pages/wxfor/wxfor.js
Page({
  data: {
    employees:[{
      name:"Lily",
      age:18
    },{
      name:"Kate",
      age:22
    },{
      name:"annjeff",
      age:24
    }]
  }})

<!--pages/wxfor/wxfor.wxml-->
<view>
  <view>wx:for的使用</view>
  <!--第一種方式-->
  <view wx:for="{{employees}}">
    {{index}}.{{item.name}} ==>{{item.age}}
  </view>
  ----------------------------------------
  <!--第二種方式-->
  <view wx:for="{{employees}}" wx:for-index="idx" wx:for-item="opt">
    {{idx}}.{{opt.name}}==>{{opt.age}}
  </view>
-------------------------------------------
  <!--演示block-for-->
  <block wx:for="{{employees}}">
    <view>{{index}}.{{item.name}}</view>
    <view>{{index}}.{{item.age}}</view>
  </block>
</view>

四、頁面模板

WXML提供模板（template），可以在模板中定義程式碼片段，然後在不同的地方呼叫

定義模版：使用name屬性，作為模板的名字。然後在<template/>內定義程式碼片段，如：

定義模板：

<!--pages/template/head/head.wxml-->
<template name="head">   
    <view>
        <view>{{title}}</view>
        <view>{{desc}}</view>
    </view>
</template>

使用模板方式一：

<!--pages/template/test/test.wxml-->
<import src="../head/head"/>
<template is="head" data="{{title:'aa',desc:'bb'}}"/>

使用模板方式二：

/ pages/template/test/test.js
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        page:{
            title:"test頁面",
            desc:"這是用來測試的頁面"
        }
    }})

<!--pages/template/test/test.wxml-->
<import src="../head/head"/>
<template is="head" data="{{title:page.title,desc:page.desc}}"/>

模板使用方式3：

...代表展開這個物件

<!--引用方式2-->
<template is="head" data="{{...page}}"/>

五、import與include兩種引用

WXML 提供兩種檔案引用方式import和include。

5.1、import

import可以在該檔案中使用目標檔案定義的template

在item.wxml中定義了一個叫item的template。

<template name="item">   
    <view>
        <view>{{text}}</view>
    </view>
</template>

在index.wxml中引用item.xml，就可以使用item模板

<import src="item.wxml"/>
<template is="item" data="{{text:'farBar'}}"/>

5.2、include

include 可以將目標檔案除了<template/><wxs/>外的整個程式碼引入，相當於是拷貝到include 位置。拷貝過來的是除了模板以外的頁面資料。

<!--pages/template/head/head.wxml-->
<template name="head">   
    <view>
        <view>{{title}}</view>
        <view>{{desc}}</view>
    </view>
</template>
<view>頁面其他內容</view>

<!--include方式-->
<include src="../head/head"/>
<view>body</view>

六、理解事件的分類與繫結

1. 事件是檢視層到邏輯層的通訊方式
2. 事件可以將使用者的行為反饋到邏輯層進行處理
3. 事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函式。
4. 事件物件可以攜帶額外資訊，如id，dataset，touches