wxml
wxml(WeiXin Markup Language)作為小程序前端的結(jié)構(gòu)語(yǔ)言污尉，和html類似，但是有以下幾項(xiàng)需要注意：
- 屬性是大小寫(xiě)區(qū)分的漏麦；
- 標(biāo)簽必須是嚴(yán)格閉合厌衙，否則編譯報(bào)錯(cuò)毁嗦；
- 屬性值可以動(dòng)態(tài)改變，使用
{{name}}表示嘿悬，但是該變量也是大小寫(xiě)區(qū)分的锋爪，并且必須用雙引號(hào)括起來(lái)； - 沒(méi)有被定義的變量的或者是被設(shè)置為 undefined 的變量不會(huì)被同步到 wxml 中姥宝；
- 如果一個(gè)組件需要控制渲染多個(gè)
view時(shí)可以用一個(gè)block來(lái)囊括翅萤，相當(dāng)于html中的template；
賦值
js文件里 Page 實(shí)例中修改data的時(shí)候腊满，方法如下：
this.data.nameArray = [];
this.setData({
nameArray: this.data.nameArray
})
之所以要使用 setData 方法套么，是為了達(dá)到將數(shù)據(jù)從邏輯層傳遞到渲染層，在對(duì)比JS對(duì)象的前后差異碳蛋，把差異應(yīng)用到Dom樹(shù)上胚泌，渲染出新的UI界面。
setData 方法是Page實(shí)例的原型函數(shù)肃弟，該操作是一個(gè)異步操作玷室，第二個(gè)參數(shù)是一個(gè)callback回調(diào)，是這次 setData 對(duì)界面渲染完成后觸發(fā)的回調(diào)函數(shù)笤受。
邏輯語(yǔ)法
{{}} 該括號(hào)中穷缤，除了可以直接填寫(xiě)變量名之后，還可以使用三元運(yùn)算符箩兽，或者是簡(jiǎn)單的數(shù)字運(yùn)算津肛，或者是字符串的拼接等操作。
條件邏輯
wx:if / wx:elif / wx:else 組成了條件判斷的使用情況比肄，具體例子如下：
<block wx:if="{{total > 10}}">
<view> view1 </view>
<view> view2 </view>
</block>
<view wx:elif="{{total > 5}}">
view 3
</view>
<view wx:else>
view 4
</view>
列表渲染
wx:for / wx:for-index / wx:for-item / wx:key 組成了列表渲染的組件快耿，默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index 囊陡，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item，并且 wx:for-index 可以重命名當(dāng)前循環(huán)的下標(biāo)名(index)掀亥，wx:for-item 可以重命名當(dāng)前循環(huán)的元素(item)撞反，具體例子如下：
<view wx:for="{{names}}" wx:for-index="indexNewName" wx:for-item="itemNewName">
{{indexNewName}}: {{itemNewName}}
</view>
如果列表數(shù)據(jù)有新增或減少，或者是列表里元素的數(shù)據(jù)有變化時(shí)搪花，為了達(dá)到動(dòng)態(tài)渲染的效果遏片，這時(shí)候可以使用 wx:key 來(lái)標(biāo)識(shí)每一個(gè)渲染。wx:key 有兩種形式提供：
- 字符串： 代表在for循環(huán)中的 array 的某個(gè) property 撮竿，該屬性需要保證是列表中唯一的字符串或數(shù)字吮便，且不能動(dòng)態(tài)改變；
- this： 保留關(guān)鍵字this代表在for循環(huán)中的item本身幢踏，這種表示需要保證item是一個(gè)唯一的字符串或者數(shù)字
舉例如下:
<!-- 字符串： 列表里item中的一個(gè)唯一屬性 -->
<switch wx:for="{{objectArray}}" wx:key="uniqueProperty" > {{item.uniqueProperty}}: {{item.otherProperty}} </switch>
<!-- this: 列表里item是一個(gè)唯一的字符串或者是數(shù)字 -->
<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
模版
在wxml中可以使用 template 來(lái)定義模版髓需，并用 name 屬性來(lái)表示模版名字，在真正需要使用并渲染該模版的時(shí)候房蝉，就用 is 來(lái)表示使用的是哪一個(gè)模版僚匆，并且使用 data 來(lái)表示傳入到該模版的渲染數(shù)據(jù)，具體例子如下：
<!-- 模版定義內(nèi)容 -->
<template name="tmpl_1">
<view> {{id}}: {{name}}</view>
</template>
<!-- 實(shí)例化渲染使用模版, item = {id: 1, name: 'js'} -->
<template is="tmpl_1" data="{{...item}}"/>
引用
wxml提供了兩種引用方法： import / include搭幻。兩種方式使用的場(chǎng)景不同
- import 適用于引入上面提到的模版定義內(nèi)容咧擂，但是該方法不能嵌套引入；
-
include 適用于將目標(biāo)文件內(nèi)容（除了
<template/>/<wxs/>）檀蹋，拷貝到引入的位置處
使用方法如下：
<!-- 使用 import -->
<import src="tmpl.wxml"/>
<!-- 使用 include -->
<include src="header.wxml"/>
共同屬性
共同屬性指的是： 所有wxml標(biāo)簽都支持屬性松申。包括： id / class / style / hidden(Boolean) / data-* / bind* / catch*.
- hidden 是一個(gè)Boolean值，表示組件是否顯示俯逾，默認(rèn)顯示
- data-* 自定義屬性（任何類型）贸桶，組件上觸發(fā)的事件時(shí)，會(huì)發(fā)送給事件處理函數(shù)
- bind* / catch* 組件的事件
wxss
wxss(WeiXin Style Sheets)纱昧，小程序的樣式語(yǔ)言刨啸。
包括三種樣式：
- 項(xiàng)目公共樣式，也即是項(xiàng)目根目錄下的 app.wxss 文件识脆，該樣式默認(rèn)應(yīng)用到所有頁(yè)面设联；
- 頁(yè)面樣式，也即是每個(gè)頁(yè)面同目錄下灼捂，且與頁(yè)面名一樣的 {pageName}.wxss 文件离例，該樣式默認(rèn)應(yīng)用到該頁(yè)面樣式；
- 其他樣式悉稠，也就是在在根目錄下用戶新建一個(gè)目錄宫蛆，用于存放其他的樣式文件，該樣式文件要使用，需要用于引用才生效耀盗。
其他樣式的引用方法如下兩種：
@import url('../../otherss/common.wxss')
@import '../../otherss/bar.wxss'
選擇器樣式優(yōu)先級(jí)
!important > sytle="" > #id > .class > element
微信提供了官方樣式庫(kù) WeUI.wxss
js
小程序中的js由三部分組成： ECMAScript + 小程序框架 + 小程序API
小程序可以將任何一個(gè)js文件作為一個(gè)模塊想虎，通過(guò) modules.exports 或者 exports 對(duì)外暴露接口。
例如如下代碼：
// moduleA.js
module.exports = function (value) {
console.log(value);
}
// test.js
var printfunc = require('./moduleA');
printfunc('Hello world.')
小程序中js的執(zhí)行順序是： 先執(zhí)行根目錄下 app.js 中的內(nèi)容叛拷，如果該文件中有 require 引入其他的js文件舌厨，那么也要根據(jù)引入的順序來(lái)加載執(zhí)行；然后按照 app.json 中定義的 pages 的順序忿薇，逐一執(zhí)行裙椭。
小程序中js變量的作用域，是只在本文件中有效的署浩。不同的文件中可以聲明和相同的變量和函數(shù)揉燃，不會(huì)互相影響。
小程序中其他js文件如果想要使用全局變量 app.js 中 App 實(shí)例里定義的變量筋栋，可以在文件中使用 var globalData = getApp(); 來(lái)獲取全局參數(shù)炊汤。
小程序的每個(gè)page頁(yè)面里的邏輯層
每個(gè)頁(yè)面的邏輯層都是一個(gè) Page 實(shí)例，該實(shí)例包括如下內(nèi)容：
Page({
// 內(nèi)容
});
- 頁(yè)面的初始數(shù)據(jù):
data: {} - 生命周期函數(shù) - 監(jiān)聽(tīng)頁(yè)面加載:
onLoad: function (options) {} - 生命周期函數(shù) - 監(jiān)聽(tīng)頁(yè)面顯示:
onShow: function () {} - 生命周期函數(shù) - 監(jiān)聽(tīng)頁(yè)面初次渲染完成:
onReady: function () {} - 生命周期函數(shù) - 監(jiān)聽(tīng)頁(yè)面隱藏:
onHide: function () {} - 生命周期函數(shù) - 監(jiān)聽(tīng)頁(yè)面卸載:
onUnload: functioin () {} - 頁(yè)面相關(guān)事件處理函數(shù) - 監(jiān)聽(tīng)用戶下拉動(dòng)作:
onPullDownRefresh: function () {} - 頁(yè)面上拉觸底事件的處理函數(shù):
onReachBottom: function () {}二汛，可以作為分頁(yè)請(qǐng)求的入口 - 用戶點(diǎn)擊右上角分享:
onShareAppMessage: function () {} - 用戶滾動(dòng)滾動(dòng)條函數(shù):
onPageScroll: function () {}
初次進(jìn)入到頁(yè)面婿崭，會(huì)觸發(fā) onLoad / onShow / onReady 事件；
如果觸發(fā)了右上角的分享功能肴颊，那么頁(yè)面會(huì)觸發(fā) onShareAppMessage 和 onHide 事件，等待分享對(duì)話框關(guān)閉之后渣磷，會(huì)觸發(fā) onShow 事件婿着；
下拉刷新頁(yè)面的時(shí)候，會(huì)觸發(fā) onPullDownRefresh 事件醋界；
離開(kāi)該頁(yè)面會(huì)觸發(fā) onUnload 事件
注意： Page實(shí)例中的data屬性里的數(shù)據(jù)value不要設(shè)為 undefined竟宋，不然會(huì)引起意想不到的bug.
onShareAppMessage中的返回值里可以設(shè)置分享的一些屬性，比如：title/path等形纺，這樣用戶在通過(guò)該分享連接進(jìn)來(lái)的時(shí)候丘侠，就會(huì)攜帶這些參數(shù)進(jìn)來(lái)。
頁(yè)面路由
- 使用
wx.navigateTo({url: pageD})表示往當(dāng)前頁(yè)面棧中多推入一個(gè)頁(yè)面D - 使用
wx.navigateBack()表示退出當(dāng)前頁(yè)面棧最頂端的一個(gè)頁(yè)面 - 使用
wx.redirectTo({url: pageE})表示替換當(dāng)前頁(yè)為頁(yè)面E逐样，當(dāng)頁(yè)面椢献郑總數(shù)為10無(wú)法再新增頁(yè)面時(shí)，就是使用該redirectToAPI來(lái)進(jìn)行頁(yè)面跳轉(zhuǎn) - 使用
wx.switchTab({url: pageF})表示清空當(dāng)前的頁(yè)面棧里的頁(yè)面（除了tabBar中pageF前面的頁(yè)面不會(huì)清空）脂新，頁(yè)面棧為 [pageF]挪捕，切換到tabBar中pageF前面的頁(yè)面時(shí)，例如pageA時(shí)争便，不會(huì)觸發(fā)pageA的 onLaunch 生命周期函數(shù) - 使用
wx.reLaunch({url: pageF})表示重啟小程序级零，并且進(jìn)入到pageF的頁(yè)面，頁(yè)面棧為 [pageF]
注意：
wx.navigateTo和wx.redirectTo只能打開(kāi)非tabBar頁(yè)面滞乙，而wx.switchTab只能打開(kāi)tabBar頁(yè)面奏纪。
API
小程序提供的API按照功能分為： 網(wǎng)絡(luò)鉴嗤、媒體、文件序调、數(shù)據(jù)緩存醉锅、位置、設(shè)備炕置、界面和界面節(jié)點(diǎn)信息荣挨。API的調(diào)用一般有如下約定：
- wx.on* 開(kāi)頭的API是監(jiān)聽(tīng)某個(gè)事件發(fā)生的API接口，接受一個(gè)callback函數(shù)作為參數(shù)朴摊。當(dāng)該事件觸發(fā)時(shí)默垄，會(huì)調(diào)用callback函數(shù)。
- 多數(shù)API接口為異步接口甚纲，都接受一個(gè)Object作為參數(shù)口锭。
- API的Object參數(shù)一般由 success / fail / complete 三個(gè)回調(diào)來(lái)接受接口調(diào)用結(jié)果。
- wx.get* 開(kāi)頭的API是獲取宿主環(huán)境數(shù)據(jù)的接口介杆。
- wx.set* 開(kāi)頭的API是寫(xiě)入數(shù)據(jù)到宿主環(huán)境的接口鹃操。
事件
在小程序里，事件指的是：“用戶在渲染層的行為反饋”以及“組件的部分狀態(tài)反饋”抽象成渲染層傳遞給邏輯層的事件春哨。
事件綁定和冒泡捕獲
事件綁定的寫(xiě)法和組件屬性一致荆隘，以key="value"的形式，其中：
- key以bind或者catch開(kāi)頭赴背，然后跟上事件的類型椰拒，如：bindtap/catchtouchstart。自基本庫(kù)1.5.0起凰荚，bind和catch后可以緊跟冒號(hào)燃观，其含義不變，如： bind:tap/catch:touchstart便瑟。同時(shí)bind和catch前面還可以加上 capture- 來(lái)表示事件的捕獲階段缆毁，沒(méi)有的話表示事件的冒泡階段。
- value是一個(gè)字符串到涂，需要在對(duì)應(yīng)的頁(yè)面Page構(gòu)造器中定義同名的函數(shù)脊框，否則觸發(fā)事件時(shí)，在控制臺(tái)有報(bào)錯(cuò)信息养盗。
bind事件綁定不會(huì)組織冒泡事件向上冒泡缚陷，catch事件綁定可以阻止冒泡事件向上冒泡。capture-catch 將中斷捕獲階段并取消冒泡階段往核。
其他組件的自定義事件箫爷，如無(wú)特別說(shuō)明，都是非冒泡事件，如 <form/> 的submit事件虎锚，<input/>的input事件硫痰，<scroll-view/>的scroll事件
補(bǔ)充：說(shuō)明一下事件冒泡和捕獲。
"DOM2級(jí)事件"規(guī)定的事件流包含三個(gè)階段：事件捕獲窜护、處于目標(biāo)階段和事件冒泡階段效斑。首先發(fā)生的是事件捕獲，然后是實(shí)際的目標(biāo)接收到事件柱徙，最后階段是冒泡階段缓屠。
兼容
通過(guò)API wx.getSystemInfoSync() 可以獲取到系統(tǒng)和小程序基礎(chǔ)庫(kù)版本信息 SDKVersion，該參數(shù)在開(kāi)發(fā)環(huán)境的工程配置文件 project.config.json 中的配置項(xiàng) libVersion护侮。
