[TOC]
### 2.1.2 渲染層/視圖層--View
視圖層 View
框架的視圖層由 WXML 與 WXSS 編寫,由組件來進行展示。將邏輯層的數據反應成視圖,同時將視圖層的事件發送給邏輯層。
WXML(WeiXin Markup language) 用于描述頁面的結構。
WXS(WeiXin Script) 是小程序的一套腳本語言,結合 WXML,可以構建出頁面的結構。
WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。
組件(Component)是視圖的基本組成單元。
#### 2.1.2.1 WXML
WXML(WeiXin Markup Language)是框架設計的一套標簽語言,結合基礎組件、事件系統,可以構建出頁面的結構。
##### 1. 數據綁定
WXML 中的動態數據均來自對應`*.js`文件中page 的 data。
數據綁定使用 Mustache 語法(雙大括號)將變量包起來,可以作用于:
* 內容
~~~HTML
<view> {{ message }} </view>
~~~
~~~JavaScript
Page({
data: {
message: 'Hello MINA!'
}
})
~~~
* 組件屬性(需要在雙引號之內)
~~~HTML
<view id="item-{{id}}"> </view>
~~~
~~~JavaScript
Page({
data: {
id: 0
}
})
~~~
* 控制屬性(需要在雙引號之內)
~~~HTML
<view wx:if="{{condition}}"> </view>
~~~
~~~JavaScript
Page({
data: {
condition: true
}
})
~~~
* 關鍵字(需要在雙引號之內)
true:boolean 類型的 true,代表真值。
false: boolean 類型的 false,代表假值。
~~~HTML
<checkbox checked="{{false}}"> </checkbox>
~~~
>[danger]不要直接寫 checked="false",其計算結果是一個字符串,轉成 boolean 類型后代表真值。
* 三元運算
~~~HTML
<view hidden="{{flag ? true : false}}"> Hidden </view>
~~~
* 算數運算
~~~HTML
<view> {{a + b}} + {{c}} + d </view>
~~~
~~~JavaScript
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
~~~
view中的內容為 `3 + 3 + d`。
* 邏輯判斷
~~~HTML
<view wx:if="{{length > 5}}"> </view>
~~~
* 字符串運算
~~~HTML
<view>{{"hello" + name}}</view>
~~~
~~~JavaScript
Page({
data:{
name: 'MINA'
}
})
~~~
* 數據路徑運算
~~~HTML
<view>{{object.key}} {{array[0]}}</view>
~~~
~~~JavaScript
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
~~~
* 組合
也可以在 Mustache 內直接進行組合,構成新的對象或者數組。
* 數組
~~~HTML
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
~~~
~~~JavaScript
Page({
data: {
zero: 0
}
})
~~~
最終組合成數組`[0, 1, 2, 3, 4]`。
* 對象
~~~HTML
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
~~~
~~~JavaScript
Page({
data: {
a: 1,
b: 2
}
})
~~~
最終組合成的對象是 `{for: 1, bar: 2}`
也可以用擴展運算符` ... `來將一個對象展開
~~~HTML
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
~~~
~~~JavaScript
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
~~~
最終組合成的對象是 `{a: 1, b: 2, c: 3, d: 4, e: 5}`。
如果對象的 key 和 value 相同,也可以間接地表達。
~~~HTML
<template is="objectCombine" data="{{foo, bar}}"></template>
~~~
~~~JavaScript
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
~~~
最終組合成的對象是` {foo: 'my-foo', bar:'my-bar'}`。
>[warning] 上述方式可以隨意組合,但是如有存在變量名相同的情況,后邊的會覆蓋前面
如:
~~~HTML
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
~~~
~~~JavaScript
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
b: 3,
c: 4
},
a: 5
}
})
~~~
最終組合成的對象是 `{a: 5, b: 3, c: 6}`。
>[warning] 花括號和引號之間如果有空格,將最終被解析成為字符串
~~~HTML
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
~~~
等同于
~~~HTML
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
~~~
##### 2. 列表渲染
* `wx:for`
在組件上使用`wx:for`控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為 `index`,數組當前項的變量名默認為 `item`
~~~HTML
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
~~~
~~~JavaScript
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
~~~
使用 `wx:for-item` 可以指定數組當前元素的變量名,
使用 `wx:for-index` 可以指定數組當前下標的變量名:
~~~HTML
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
~~~
`wx:for` 也可以嵌套,下邊是一個九九乘法表
~~~HTML
<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/>`標簽上,以渲染一個包含多節點的結構塊。例如:
~~~HTML
<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 的組件,框架會確保他們被重新排序,而不是重新創建,以確保使組件保持自身的狀態,并且提高列表渲染時的效率。
>[warning] 如不提供 wx:key,會報一個 warning, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。
>[warning] 當 wx:for 的值為字符串時,會將字符串解析成字符串數組
如:
~~~HTML
<view wx:for="array">
{{item}}
</view>
~~~
等同于
~~~HTML
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
~~~
>[warning] 花括號和引號之間如果有空格,將最終被解析成為字符串
如:
~~~HTML
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
~~~
等同于
~~~HTML
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
~~~
##### 3. 條件渲染
* `wx:if`
在框架中,使用 `wx:if="{{condition}}"` 來判斷是否需要渲染該代碼塊:
~~~HTML
<view wx:if="{{condition}}"> True </view>
~~~
也可以用 wx:elif 和 wx:else 來添加一個 else 塊:
~~~HTML
<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` 控制屬性。
~~~HTML
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
~~~
>[warning] `<block/>` 并不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
`wx:if` vs `hidden`
因為 `wx:if` 之中的模板也可能包含數據綁定,所以當 wx:if 的條件值切換時,框架有一個局部渲染的過程,因為它會確保條件塊在切換時銷毀或重新渲染。
同時 `wx:if` 也是惰性的,如果在初始渲染條件為 false,框架什么也不做,在條件第一次變成真的時候才開始局部渲染。
相比之下,hidden 就簡單的多,組件始終會被渲染,只是簡單的控制顯示與隱藏。
一般來說,wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此,
>[warning] 如果需要頻繁切換的情景下,用 hidden 更好,如果在運行時條件不大可能改變則 wx:if 較好。
##### 4. 模板
WXML提供模板(template),可以在模板中定義代碼片段,然后在不同的地方調用。
* 定義模板
使用 `name` 屬性,作為模板的名字。然后在`<template/>`內定義代碼片段,如:
~~~HTML
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
~~~
* 使用模板
使用 `is` 屬性,聲明需要的使用的模板,然后將模板所需要的 data 傳入,如:
~~~HTML
<template is="msgItem" data="{{...item}}"/>
~~~
~~~JavaScript
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
~~~
`is` 屬性可以使用 Mustache 語法,來動態決定具體需要渲染哪個模板:
~~~HTML
<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>
~~~
* 模板的作用域
模板擁有自己的作用域,只能使用 data 傳入的數據以及模版定義文件中定義的 `<wxs />` 模塊。
##### 5. 事件
* **什么是事件**
>[info] * 事件是視圖層到邏輯層的通訊方式。
> * 事件可以將用戶的行為反饋到邏輯層進行處理。
> * 事件可以綁定在組件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。
> * 事件對象可以攜帶額外信息,如 id, dataset, touches。
* **事件的使用方式**
* 在組件中綁定一個事件處理函數。
如`bindtap`,當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
~~~HTML
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
~~~
在相應的Page定義中寫上相應的事件處理函數,參數是`event`。
~~~JavaScript
Page({
tapName: function(event) {
console.log(event)
}
})
~~~
可以看到log出來的信息大致如下:
~~~JavaScript
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
~~~
* **事件分類**
事件分為冒泡事件和非冒泡事件:
* 冒泡事件:當一個組件上的事件被觸發后,該事件會向父節點傳遞。
* 非冒泡事件:當一個組件上的事件被觸發后,該事件不會向父節點傳遞。
WXML的冒泡事件列表:
| 類型 | 觸發條件 | 最低版本 |
| --- | --- | --- |
| touchstart | 手指觸摸動作開始|
| touchmove | 手指觸摸后移動|
| touchcancel | 手指觸摸動作被打斷,如來電提醒,彈窗|
| touchend | 手指觸摸動作結束|
| tap | 手指觸摸后馬上離開|
| longpress | 手指觸摸后,超過350ms再離開,如果指定了事件回調函數并觸發了這個事件,tap事件將不被觸發| 1.5.0 |
| longtap | 手指觸摸后,超過350ms再離開(推薦使用longpress事件代替)|
| transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發|
| animationstart | 會在一個 WXSS animation 動畫開始時觸發|
| animationiteration | 會在一個 WXSS animation 一次迭代結束時觸發|
| animationend | 會在一個 WXSS animation 動畫完成時觸發|
| touchforcechange |在支持 3D Touch 的 iPhone 設備,重按時會觸發| 1.9.90 |
>[info] 除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件,如`<form/>`的`submit`事件,`<input/>`的`input`事件,`<scroll-view/>`的`scroll`事件
* 事件綁定和冒泡
事件綁定的寫法同組件的屬性,以 key、value 的形式。
>[info] * `key` 以`bind`或`catch`開頭,然后跟上事件的類型,如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起,bind和catch后可以緊跟一個冒號,其含義不變,如`bind:tap`、`catch:touchstart`。
> * `value` 是一個字符串,需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
>[warning] `bind`事件綁定不會阻止冒泡事件向上冒泡,`catch`事件綁定可以阻止冒泡事件向上冒泡。
如在下邊這個例子:
~~~HTML
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
~~~
點擊` inner view` 會先后調用handleTap3和handleTap2(因為tap事件會冒泡到 `middle view`,而 `middle view` 阻止了 tap 事件冒泡,不再向父節點傳遞),點擊 `middle view` 會觸發handleTap2,點擊 `outer view` 會觸發handleTap1。
* 事件的捕獲階段
自基礎庫版本 1.5.0 起,觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前,且在捕獲階段中,事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時,可以采用`capture-bind`、`capture-catch`關鍵字,后者將中斷捕獲階段和取消冒泡階段。
在下面的代碼中,點擊 `inner view` 會先后調用handleTap2、handleTap4、handleTap3、handleTap1。
~~~HTML
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
~~~
如果將上面代碼中的第一個capture-bind改為capture-catch,將只觸發handleTap2。
~~~HTML
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
~~~
* 事件對象
如無特殊說明,當組件觸發事件時,邏輯層綁定該事件的處理函數會收到一個事件對象。
`BaseEvent` 基礎事件對象屬性列表:
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| type | String | 事件類型 |
| timeStamp | Integer | 事件生成時的時間戳 |
| target | Object | 觸發事件的組件的一些屬性值集合 |
| currentTarget | Object | 當前組件的一些屬性值集合 |
`CustomEvent` 自定義事件對象屬性列表(繼承 BaseEvent):
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| detail | Object | 額外的信息 |
`TouchEvent` 觸摸事件對象屬性列表(繼承 BaseEvent):
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| touches | Array | 觸摸事件,當前停留在屏幕中的觸摸點信息的數組 |
| changedTouches | Array | 觸摸事件,當前變化的觸摸點信息的數組 |
特殊事件: `<canvas/>` 中的觸摸事件不可冒泡,所以沒有 currentTarget。
`type`:代表事件的類型。
`timeStamp`:頁面打開到觸發事件所經過的毫秒數。
`target`:觸發事件的源組件。
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| id | String | 事件源組件的id |
| tagName | String | 當前組件的類型 |
| dataset | Object | 事件源組件上由data-開頭的自定義屬性組成的集合 |
`currentTarget`:事件綁定的當前組件。
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| id | String| 當前組件的id |
| tagName | String | 當前組件的類型 |
| dataset | Object | 當前組件上由data-開頭的自定義屬性組成的集合 |
`dataset`:在組件中可以定義數據,這些數據將會通過事件傳遞給 SERVICE。 書寫方式: 以data-開頭,多個單詞由連字符-鏈接,不能有大寫(大寫會自動轉成小寫)如`data-element-type`,最終在 event.currentTarget.dataset 中會將連字符轉成駝峰`elementType`。
示例:
~~~HTML
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
~~~
~~~JavaScript
Page({
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法
event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫
}
})
~~~
`touches`:touches 是一個數組,每個元素為一個 Touch 對象(canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組)。 表示當前停留在屏幕上的觸摸點。
Touch 對象
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| identifier | Number | 觸摸點的標識符|
| pageX, pageY | Number | 距離文檔左上角的距離,文檔的左上角為原點 ,橫向為X軸,縱向為Y軸|
| clientX, clientY | Number | 距離頁面可顯示區域(屏幕除去導航條)左上角距離,橫向為X軸,縱向為Y軸|
CanvasTouch 對象
| 屬性 | 類型 | 說明 |
| --- | --- | --- |
| identifier | Number | 觸摸點的標識符
| x, y | Number | 距離 Canvas 左上角的距離,Canvas 的左上角為原點 ,橫向為X軸,縱向為Y軸
`changedTouches`:changedTouches 數據格式同 touches。 表示有變化的觸摸點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)。
`detail`:自定義事件所攜帶的數據,如表單組件的提交事件會攜帶用戶的輸入,媒體的錯誤事件會攜帶錯誤信息,詳見組件定義中各個事件的定義。
點擊事件的`detail `帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。
##### 6. 引用
WXML 提供兩種文件引用方式`import`和`include`。
* import:可以在該文件中使用目標文件定義的template
如:
在 item.wxml 中定義了一個叫item的template:
~~~HTML
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
~~~
在 index.wxml 中引用了 item.wxml,就可以使用item模板:
~~~HTML
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
~~~
import 有作用域的概念,即只會 import 目標文件中定義的 template,而不會 import 目標文件 import 的 template。即是只會import本文件中import定義的文件。
如:C import B,B import A,在C中可以使用B定義的template,在B中可以使用A定義的template,但是C不能使用A定義的template。
~~~HTML
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
~~~
~~~HTML
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
~~~
~~~HTML
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
~~~
* include
include 可以將目標文件除了` <template/>` `<wxs/>` 外的整個代碼引入,相當于是拷貝到 include 位置,如:
~~~HTML
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
~~~
~~~HTML
<!-- header.wxml -->
<view> header </view>
~~~
~~~HTML
<!-- footer.wxml -->
<view> footer </view>
~~~
#### 2.1.2.2 WXS
WXS(WeiXin Script)是小程序的一套腳本語言,結合 WXML,可以構建出頁面的結構。
[【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)
>[info] * wxs 不依賴于運行時的基礎庫版本,可以在所有版本的小程序中運行。
>* wxs 與 javascript 是不同的語言,有自己的語法,并不和 javascript 一致。
>* wxs 的運行環境和其他 javascript 代碼是隔離的,wxs 中不能調用其他 javascript 文件中定義的函數,也不能調用小程序提供的API。
>* wxs 函數不能作為組件的事件回調。
>* 由于運行環境的差異,在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。
WXML+WXS類似HTML+JavaScript,可在WXML中調用WXS里定義的函數進行“頁面渲染”和“數據處理”等。
##### 1. 頁面渲染
~~~HTML
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
~~~
頁面輸出:"hello world"
##### 2. 數據處理
~~~JavaScript
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
~~~
~~~HTML
<!--wxml-->
<!-- 下面的 getMax 函數,接受一個數組,且返回數組中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 調用 wxs 里面的 getMax 函數,參數為 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>
~~~
頁面輸出:5
#### 2.1.2.3 WXSS
[【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)
WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎么顯示。
為了適應廣大的前端開發者,WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序,WXSS 對 CSS 進行了擴充以及修改。
與 CSS 相比,WXSS 擴展的特性有:
##### 1. 尺寸單位--rpx
rpx(responsive pixel): 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
建議: 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準(1rpx = 0.5px, 1px = 2rpx)。
注意: 在較小的屏幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。
##### 2. 樣式導入
使用`@import`語句可以導入外聯樣式表,`@import`后跟需要導入的外聯樣式表的相對路徑,用`;`表示語句結束。
示例代碼:
~~~CSS
/** common.wxss **/
.small-p {
padding:5px;
}
~~~
~~~CSS
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
~~~
##### 3. 內聯樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
`style`:靜態的樣式統一寫到 class 中。style 接收動態的樣式,在運行時會進行解析,請盡量避免將靜態的樣式寫進 style 中,以免影響渲染速度。
~~~HTML
<view style="color:{{color}};" />
~~~
`class`:用于指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上`.`,樣式類名之間用空格分隔。
~~~HTML
<view class="normal_view" />
~~~
##### 4. 選擇器
目前支持的選擇器有:
| 選擇器 | 樣例 | 樣例描述 |
| --- | --- | --- |
| .class | `.intro` | 選擇所有擁有 class="intro" 的組件 |
| #id | `#firstname ` | 選擇擁有 id="firstname" 的組件|
| element | `view` | 選擇所有 view 組件|
| element, element | `view, checkbox` | 選擇所有文檔的 view 組件和所有的 checkbox 組件|
| ::after | `view::after` | 在 view 組件后邊插入內容|
| ::before | `view::before` | 在 view 組件前邊插入內容|
##### 5. 全局樣式與局部樣式
定義在 `app.wxss` 中的樣式為全局樣式,作用于每一個頁面。在 page 的 `wxss` 文件中定義的樣式為局部樣式,只作用在對應的頁面,并會覆蓋 `app.wxss` 中相同的選擇器。
#### 2.1.2.4 組件
框架為開發者提供了一系列基礎組件,開發者可以通過組合這些基礎組件進行快速開發。
[【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/component/index.html)
什么是組件:
>[info] * 組件是視圖層的基本組成單元。
> * 組件自帶一些功能與微信風格的樣式。
> * 一個組件通常包括`開始標簽`和`結束標簽`,`屬性`用來修飾這個組件,`內容`在兩個標簽之內。
> * 所有組件與屬性都是小寫,以連字符`-`連接
組件示例:
~~~HTML
<tagname property="value">
Content goes here ...
</tagname>
~~~
基礎組件分為以下七大類:
##### 1. 視圖容器(View Container)
| 組件名 | 說明 |
| --- | --- |
| view | 視圖容器 |
| scroll-view | 可滾動視圖容器 |
| swiper | 滑塊視圖容器 |
##### 2. 基礎內容(Basic Content)
| 組件名 | 說明 |
| --- | --- |
| icon | 圖標 |
| text | 文字 |
| progress | 進度條 |
##### 3. 表單(Form)
| 組件名 | 說明 |
| --- | --- |
| button | 按鈕 |
| form | 表單 |
| input | 輸入框 |
| checkbox | 多項選擇器 |
| radio | 單項選擇器 |
| picker | 列表選擇器 |
| picker-view | 內嵌列表選擇器 |
| slider| 滾動選擇器 |
| switch | 開關選擇器 |
| label | 標簽 |
##### 4. 導航(Navigation)
| 組件名 | 說明 |
| --- | --- |
| navigator | 應用鏈接 |
##### 5. 多媒體(Media)
| 組件名 | 說明 |
| --- | --- |
| audio | 音頻 |
| image | 圖片|
| video | 視頻 |
##### 6. 地圖(Map)
| 組件名 | 說明 |
| --- | --- |
| map | 地圖 |
##### 7. 畫布(Canvas)
| 組件名 | 說明 |
| --- | --- |
| canvas | 畫布|
- 微信
- 小程序
- 1. 代碼組成
- 1.1 JSON配置--'*.json'文件
- 1.2 WXML模板--'*.wxml'文件
- 1.3 WXSS樣式--'*.wxss'文件
- 1.4 JavaScript腳本--'*.js'文件
- 2. 客戶端運行
- 2.1 邏輯層和渲染層
- 2.1.1 邏輯層--App Service
- 2.1.2 渲染層/視圖層--View
- 2.1.3 通信模型
- 2.1.4 數據驅動
- 2.1.5 雙線程下的界面渲染
- 2.2 程序與頁面
- 2.3 組件
- 2.4 API
- 2.5 事件
- 2.6 兼容
- 3. 應用設計
- 3.1 Flex布局
- 3.2 界面常見的交互反饋
- 3.3 發起HTTPS網絡通信--wx.request
- 3.4 微信登錄
- 3.5 本地數據緩存
- 3.6 設備能力
- 4. 小程序的協同工作和發布
- 4.1 協同工作
- 4.2 用戶體驗審視
- 4.3 發布
- 4.4 運營
- 5. 底層框架
- 5.1 雙線程模型
- 5.2 組件系統--Exparser框架
- 5.3 原生組件
- 5.4 小程序與客戶端通信原理
- 6. 運行和性能優化
- 6.1 啟動--代碼加載
- 6.2 頁面準備
- 6.3 數據通信
- 6.4 視圖層渲染
- 6.5 原生組件通信
- 7. 小程序基礎庫的更新迭代
- 8. 微信開發者工具
- 騰訊云支持
- wafer
- Wafer2 快速開發 Demo - PHP
- WXAPI
- api列表