{{view 視圖層}}微信小程序

時間 2019-11-24

標籤 view 視圖微信程序简体版

原文原文鏈接

微信小程序 view 視圖層//自學html

　　1.數據綁定canvas

數據綁定

WXML中的動態數據均來自對應Page的data。
簡單綁定

數據綁定使用"Mustache"語法（雙大括號）將變量包起來，能夠做用於：
內容

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

Page({
  data: {
    message: 'Hello MINA!'
  }
})

組件屬性(須要在雙引號以內)

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

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

控制屬性(須要在雙引號以內)

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

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

關鍵字(須要在雙引號以內)

true：boolean 類型的 true，表明真值。

false： boolean 類型的 false，表明假值。

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

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後表明真值。

運算

能夠在{{}}內進行簡單的運算，支持的有以下幾種方式：
三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算數運算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的內容爲3 + 3 + d
邏輯判斷

<view wx:if="{{length > 5}}"> </view>

字符串運算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name:"MINA"
  }
})

數據路徑運算

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

組合

也能夠在Mustache內直接進行組合，構成新的對象或者數組
數組

<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

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

最終組合成數組[0, 1, 2, 3, 4]
對象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

最終組合成的對象是{for: 1, bar: 2}

也能夠用擴展運算符...來將一個對象展開

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最終組合成的對象是{a: 1, b: 2, c: 3, d: 4, e: 5}

若是對象的key和value相同，也能夠間接地表達

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最終組合成的對象是{foo: 'my-foo', bar:'my-bar'}

注意：上述方式能夠隨意組合，可是若有存在變量名相同的狀況，後邊的會覆蓋前面，如

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

最終組合成的對象是{a: 5, b: 3, c: 6}

　　2.條件渲染小程序

wx:if

在MINA中，咱們用wx:if="{{condition}}"來判斷是否須要渲染該代碼塊：微信小程序

<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>

block wx:if

由於wx:if 是一個控制屬性，須要將它添加到一個標籤上。可是若是咱們想一次性判斷多個組件標籤，咱們可使用一個<block/>標籤將多個組件包裝起來，並在上邊使用wx:if控制屬性。微信

<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>

注意： <block/>並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。框架

`wx:if` vs `hidden`

由於wx:if之中的模板也可能包含數據綁定，全部當wx:if的條件值切換時，MINA有一個局部渲染的過程，由於它會確保條件塊在切換時銷燬或從新渲染。dom

同時wx:if也是惰性的，若是在初始渲染條件爲false，MINA什麼也不作，在條件第一次變成真的時候纔開始局部渲染。ide

相比之下，hidden就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。函數

通常來講，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用hidden更好，若是在運行時條件不大可能改變則wx:if較好。

　　3.列表渲染，相似於TP的volist for循環

默認下：使用wx:for="{{變量名}}"嵌套到標籤內，循環；
默認index爲數組的key，item爲value值；能夠經過wx:for-index="i"更改成i,wx:for-item="vo"更改成vo值；

在組件上使用wx:for控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。

默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

Page({
  items: [{
    message: 'foo',
  },{
    message: 'bar'
  }]
})

使用wx:for-item能夠指定數組當前元素的變量名

使用wx:for-index能夠指定數組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for也能夠嵌套，下邊是一個九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for

相似block wx:if，也能夠將wx:for用在<block/>標籤上，以渲染一個包含多節點的結構塊。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

若是列表中項目的位置會動態改變或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），須要使用 wx:key 來指定列表中項目的惟一的標識符。

wx:key 的值以兩種形式提供

    字符串，表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。
    保留關鍵字 *this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字，如：

當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組件保持自身的狀態，而且提升列表渲染時的效率。

如不提供 wx:key，會報一個 warning， 若是明確知道該列表是靜態，或者沒必要關注其順序，能夠選擇忽略。

示例代碼：

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

　　4. 微信小程序模板(template)

模板

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: '2016-09-15'
    }
  }
})

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>

　4. 微信小程序事件

事件是視圖層到邏輯層的通信方式。
事件能夠將用戶的行爲反饋到邏輯層進行處理。
事件能夠綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象能夠攜帶額外信息，如id, dataset, touches。

  1 事件的使用方式
  2 
  3     在組件中綁定一個事件處理函數。 
  4 
  5 如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
  6 
  7 <view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
  8 
  9     在相應的Page定義中寫上相應的事件處理函數，參數是event。 
 10 
 11 Page({
 12   tapName: function(event) {
 13     console.log(event)
 14   }
 15 })
 16 
 17     能夠看到log出來的信息大體以下
 18 
 19     {
 20     "type": "tap",
 21     "timeStamp": 1252,
 22     "target": {
 23       "id": "tapTest",
 24       "offsetLeft": 0,
 25       "offsetTop": 0,
 26       "dataset": {
 27        "hi": "MINA"
 28       }
 29     },
 30     "currentTarget": {
 31       "id": "tapTest",
 32       "offsetLeft": 0,
 33       "offsetTop": 0,
 34       "dataset": {
 35         "hi": "MINA"
 36       }
 37     },
 38     "touches": [{
 39       "pageX": 30,
 40       "pageY": 12,
 41       "clientX": 30,
 42       "clientY": 12,
 43       "screenX": 112,
 44       "screenY": 151
 45     }],
 46     "detail": {
 47       "x": 30,
 48       "y": 12
 49     }
 50     }
 51 
 52 事件詳解
 53 事件分類
 54 
 55 事件分爲冒泡事件和非冒泡事件
 56 
 57     冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
 58     非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。 
 59 
 60 WXML的冒泡事件列表：
 61 類型     觸發條件
 62 touchstart     手指觸摸
 63 touchmove     手指觸摸後移動
 64 touchcancel     手指觸摸動做被打斷，如來電提醒，彈窗
 65 touchend     手指觸摸動做結束
 66 tap     手指觸摸後離開
 67 longtap     手指觸摸後，超過350ms再離開
 68 
 69 注：除上表以外的其餘組件自定義事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個組件)
 70 事件綁定
 71 
 72 事件綁定的寫法同組件的屬性，以key、value的形式。
 73 
 74     key以bind或catch開頭，而後跟上事件的類型，如bindtap, catchtouchstart
 75     value是一個字符串，須要在對應的Page中定義同名的函數。否則當觸發事件的時候會報錯。 
 76 
 77 bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。
 78 
 79 如在下邊這個例子中，點擊inner view會前後觸發handleTap1和handleTap2(由於tap事件會冒泡到middle view，而middle view阻止了tap事件冒泡，再也不向父節點傳遞)，點擊middle view會觸發handleTap2，點擊outter view會觸發handleTap1。
 80 
 81 <view id="outter" bindtap="handleTap1">
 82   outer view
 83   <view id="middle" catchtap="handleTap2">
 84     middle view
 85     <view id="inner" bindtap="handleTap3">
 86       inner view
 87     </view>
 88   </view>
 89 </view>
 90 
 91 事件對象
 92 
 93 如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。
 94 
 95 事件對象的屬性列表：
 96 屬性     類型     說明
 97 type     String     事件類型
 98 timeStamp     Integer     事件生成時的時間戳
 99 target     Object     觸發事件的組件的一些屬性值集合
100 currentTarget     Object     當前組件的一些屬性值集合
101 touches     Array     觸摸事件，觸摸點信息的數組
102 detail     Object     額外的信息
103 CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）：
104 屬性    類型    說明
105 detail    Object    額外的信息
106 
107 TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：
108 屬性    類型    說明
109 touches    Array    觸摸事件，當前停留在屏幕中的觸摸點信息的數組
110 changedTouches    Array    觸摸事件，當前變化的觸摸點信息的數組
111 
112 特殊事件： <canvas/> 中的觸摸事件不可冒泡，因此沒有 currentTarget。
113 
114 type
115 通用事件類型
116 timeStamp
117 
118 該頁面打開到觸發事件所通過的毫秒數。
119 target
120 
121 觸發事件的源組件。
122 屬性     說明
123 id     事件源組件的id
124 dataset     事件源組件上由data-開頭的自定義屬性組成的集合
125 offsetLeft, offsetTop     事件源組件的座標系統中偏移量
126 currentTarget
127 
128 事件綁定的當前組件。
129 屬性    類型    說明
130 id    String    當前組件的id
131 tagName    String    當前組件的類型
132 dataset    Object    當前組件上由data-開頭的自定義屬性組成的集合
133 
134 說明： target 和 currentTarget 能夠參考上例中，點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。
135 dataset
136 
137 在組件中能夠定義數據，這些數據將會經過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-連接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉成駝峯elementType。
138 
139 示例：
140 
141 <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
142 
143 Page({
144   bindViewTap:function(event){
145     event.target.dataset.alphaBeta === 1 // - 會轉爲駝峯寫法
146     event.target.dataset.alphabeta === 2 // 大寫會轉爲小寫
147   }
148 })
149 
150 touches
151 
152 touches 是一個數組，每一個元素爲一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。 表示當前停留在屏幕上的觸摸點。
153 Touch 對象
154 屬性    類型    說明
155 identifier    Number    觸摸點的標識符
156 pageX, pageY    Number    距離文檔左上角的距離，文檔的左上角爲原點 ，橫向爲X軸，縱向爲Y軸
157 clientX, clientY    Number    距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向爲X軸，縱向爲Y軸
158 CanvasTouch 對象
159 屬性    類型    說明    特殊說明
160 identifier    Number    觸摸點的標識符     
161 x, y    Number    距離 Canvas 左上角的距離，Canvas 的左上角爲原點 ，橫向爲X軸，縱向爲Y軸     
162 changedTouches
163 
164 changedTouches 數據格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。
165 detail
166 
167 自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。

　5. 微信小程序引用

引用

兩種方式：
1、import
2、inclode

import

import能夠在該文件中使用目標文件定義的template，如：

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

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在index.wxml中引用了item.wxml，就可使用item模板：

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

import的做用域

import有做用域的概念，即只會import目標文件中定義的template，而不會import目標文件import的template。

如：C import B，B import A，在C中可使用B定義的template，在B中可使用A定義的template，可是C不能使用A定義的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="A.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="B.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include能夠將目標文件除了<template/>的整個代碼引入，至關因而拷貝到include位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>