1、小程序目錄結構
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
文件 必填 作用
app.js 是 小程序邏輯
app.json 是 小程序公共設置
app.wxss 否 小程序公共樣式表
一個小程序頁面由四個文件組成，分別是：
文件類型 必填 作用
js 是 頁面邏輯
wxml 是 頁面結構
wxss 否 頁面樣式表
json 否 頁面配置
注意：爲了方便開發者減少配置項，我們規定描述頁面的這四個文件必須具有相同的路徑與文件名。
2、app.json配置
屬性 類型 必填 描述
pages String Array 是 設置頁面路徑
window Object 否 設置默認頁面的窗口表現
tabBar Object 否 設置底部 tab 的表現
networkTimeout Object 否 設置網絡超時時間
debug Boolean 否 設置是否開啓 debug 模式
以下是一個包含了所有配置選項的簡單配置app.json ：
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/logs/logs",
"text": "日誌"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
pages：接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。
window：用於設置小程序的狀態欄、導航條、標題、窗口背景色。
屬性 類型 默認值 說明
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色，如"#000000"
navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white
navigationBarTitleText String 導航欄標題文字內容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字體、loading 圖的樣式，僅支持 dark/light
enablePullDownRefresh Boolean false 是否開啓下拉刷新，詳見頁面相關事件處理函數。
注：HexColor（十六進制顏色值），如"#ff00ff"
tabBar：tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。
屬性說明：
屬性 類型 必填 默認值 描述
color HexColor 是 tab 上的文字默認顏色
selectedColor HexColor 是 tab 上的文字選中時的顏色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar上邊框的顏色， 僅支持 black/white
list Array 是 tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position String 否 bottom可選值 bottom、top
其中 list 接受一個數組，數組中的每個項都是一個對象，其屬性值如下：
屬性 類型 必填 說明
pagePath String 是 頁面路徑，必須在 pages 中先定義
text String 是 tab 上按鈕文字
iconPath String 是 圖片路徑，icon 大小限制爲40kb
selectedIconPath String 是 選中時的圖片路徑，icon 大小限制爲40kb
networkTimeout：設置各種網絡請求的超時時間。
屬性說明：
屬性 類型 必填 說明
request Number 否 wx.request的超時時間，單位毫秒，默認爲：60000
connectSocket Number 否 wx.connectSocket的超時時間，單位毫秒，默認爲：60000
uploadFile Number 否 wx.uploadFile的超時時間，單位毫秒，默認爲：60000
downloadFile Number 否 wx.downloadFile的超時時間，單位毫秒，默認爲：60000
page.json：
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵。
屬性 類型 默認值 描述
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色，如"#000000"
navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white
navigationBarTitleText String 導航欄標題文字內容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字體、loading 圖的樣式，僅支持 dark/light
enablePullDownRefresh Boolean false 是否開啓下拉刷新，詳見頁面相關事件處理函數。
disableScroll Boolean false 設置爲 true 則頁面整體不能上下滾動；只在 page.json 中有效，無法在 app.json 中設置該項
底部導航修改步驟：
1、製作圖標並保存到項目(在項目下創建imgs文件夾保存圖標文件)
|_ imgs
|_ icon_1.png
|_ icon_2.png
2、修改app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "imgs/icon_1.png",
"selectedIconPath": "imgs/icon_1.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日誌",
"iconPath": "imgs/icon_2.png",
"selectedIconPath": "imgs/icon_2.png"
}]
}
}
3、 註冊程序、註冊頁面、分享設置
a、註冊程序 App()
App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。
object參數說明：
屬性 類型 描述 觸發時機
onLaunch Function 生命週期函數--監聽小程序初始化 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow Function 生命週期函數--監聽小程序顯示 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
onHide Function 生命週期函數--監聽小程序隱藏 當小程序從前臺進入後臺，會觸發 onHide
onError Function 錯誤監聽函數 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
其他 Any 開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問
前臺、後臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。
只有當小程序進入後臺一定時間，或者系統資源佔用過高，纔會被真正的銷燬。
示例：
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() { // Do something when show.
},
onHide: function() { // Do something when hide.
},
onError: function(msg) { console.log(msg)
},
globalData: 'I am global data'
})
getApp()
小程序提供了全局的 getApp() 函數，可以獲取到小程序實例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意：
App() 必須在 app.js 中註冊，且不能註冊多個。
不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例。
不要在 onLaunch 的時候調用 getCurrentPage()，此時 page 還沒有生成。
通過 getApp() 獲取實例之後，不要私自調用生命週期函數。
b、註冊頁面 Page()
Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。
object 參數說明：
屬性 類型 描述
data Object 頁面的初始數據
onLoad Function 生命週期函數--監聽頁面加載
onReady Function 生命週期函數--監聽頁面初次渲染完成
onShow Function 生命週期函數--監聽頁面顯示
onHide Function 生命週期函數--監聽頁面隱藏
onUnload Function 生命週期函數--監聽頁面卸載
onPullDownRefresh Function 頁面相關事件處理函數--監聽用戶下拉動作
onReachBottom Function 頁面上拉觸底事件的處理函數
onShareAppMessage Function 用戶點擊右上角分享
其他 Any 開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 可以訪問
生命週期函數說明
onLoad: 頁面加載
一個頁面只會調用一次。
接收頁面參數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 頁面顯示
每次打開頁面都會調用一次。
onReady: 頁面初次渲染完成
一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
對界面的設置如wx.setNavigationBarTitle請在onReady之後設置。詳見生命週期
onHide: 頁面隱藏
當navigateTo或底部tab切換時調用。
onUnload: 頁面卸載
當redirectTo或navigateBack的時候調用。
頁面相關事件處理函數
onPullDownRefresh: 下拉刷新
監聽用戶下拉刷新事件。
需要在config的window選項中開啓enablePullDownRefresh。
當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
onShareAppMessage: 用戶分享
只有定義了此事件處理函數，右上角菜單纔會顯示“分享”按鈕
用戶點擊分享按鈕的時候會調用
此事件需要 return 一個 Object，用於自定義分享內容
分享設置演示
Page({
......,
onShareAppMessage: function () {
return {
title: '自定義分享標題',
desc: '自定義分享描述',
path: '/page/user?id=123'
}
}
})
4、事件處理函數、數據綁定、頁面跳轉
a、事件處理函數：除了初始化數據和生命週期函數，Page 中還可以定義一些特殊的函數：事件處理函數。在渲染層可以在組件中加入事件綁定，當達到觸發事件時，就會執行 Page 中定義的事件處理函數。
示例代碼：
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
wx.showToast({title:'hi'});
}
})
b、數據綁定
Page.prototype.setData()
setData 函數用於將數據從邏輯層發送到視圖層，同時改變對應的 this.data 的值。
注意：
直接修改 this.data 無效，無法改變頁面的狀態，還會造成數據不一致。
單次設置的數據不能超過1024kB，請儘量避免一次設置過多的數據。
setData() 參數格式
接受一個對象，以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。
其中 key 可以非常靈活，以數據路徑的形式給出，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。
示例代碼：
Page({
data:{
"text1":"hi"
},
myfunc : function(){
//wx.showToast({title:'hi'});
this.setData({"text1":"hi......"});
}
});
*
c、頁面跳轉
wx.navigateTo({
url: "../logs/logs"
})
5、文件作用域及模塊化
a、文件作用域
在 JavaScript 文件中聲明的變量和函數只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數，不會互相影響。
通過全局函數 getApp() 可以獲取全局的應用實例，如果需要全局的數據可以在 App() 中設置，
如：
// app.js
App({
globalData:{
appName :'hcoder'
}
})
// page.js
var app = getApp();
Page({
data:{},
myfunc : function(){
//wx.showToast({title:'hi'});
this.setData({"text1":"hi......"});
},
onLoad: function(){
this.setData({'appName':app.globalData.appName});
}
});
b、模塊化
我們可以將一些公共的代碼抽離成爲一個單獨的 js 文件，作爲一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。
需要注意的是：
exports 是 module.exports 的一個引用，因此在模塊裏邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發者採用 module.exports 來暴露模塊接口，除非你已經清晰知道這兩者的關係。
小程序目前不支持直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。
示例：
//common.js
function toast(msg){
wx.showToast({title:msg});
}
module.exports.toast = toast;
//頁面調用
var app = getApp();
var common = require('../../common.js');
Page({
data:{
},
myfunc : function(){
common.toast('ok');
this.setData({"text1":"hi......"});
},
onLoad: function(){
this.setData({'appName':app.globalData.appName});
}
});
6、 數據綁定
數據綁定：WXML 中的動態數據均來自對應 Page 的 data。
a、簡單綁定
數據綁定使用 Mustache 語法（雙大括號）將變量包起來，
可以作用於：
1.內容
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
2.組件屬性(需要在雙引號之內)
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
3.控制屬性(需要在雙引號之內)
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
})
4.關鍵字(需要在雙引號之內)
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後代表真值。
b、運算
可以在 {{}} 內進行簡單的運算，
支持的有如下幾種方式：
1.三元運算
<view hidden="{{flag ? true : false}}"> Hidden </view>
2.算數運算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
view中的內容爲 3 + 3 + d。
3.邏輯判斷
<view wx:if="{{length > 5}}"> </view>
4.字符串運算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
5.數據路徑運算
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
c、組合
也可以在 Mustache 內直接進行組合，構成新的對象或者數組。
1.數組
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
最終組合成數組[0, 1, 2, 3, 4]。
2. 對象
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
最終組合成的對象是 {for: 1, bar: 2}
3.也可以用擴展運算符 ... 來將一個對象展開
<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}。
4.如果對象的 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}。
7.條件渲染與元素隱藏
a.條件渲染wx:if
在框架中，我們用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
<view class="red" wx:if="{{color=='red'}}"> red </view>
<view class="green" wx:elif="{{color=='green'}}"> green </view>
<view class="blue" wx:else> blue </view>
b.wx:if與hidden異同：
因爲 wx:if 之中的模板也可能包含數據綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因爲它會確保條件塊在切換時銷燬或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件爲 false，框架什麼也不做，在條件第一次變成真的時候纔開始局部渲染。
相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
8.列表渲染（數據循環）
a.wx:for
在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。
默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item
<view wx:for="{{array}}">
<view class="red">{{index}}. {{item.name}}</view>
</view>
//js
data: {
array : [
{name:"小明", age: 18},
{name:"李磊", age: 19}
]
}
使用 wx:for-item 可以指定數組當前元素的變量名，使用 wx:for-index 可以指定數組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="ix" wx:for-item="vals">
<view class="red">{{ix}}. {{vals.name}}</view>
</view>
b.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>
c.block wx:for
類似block wx:if，也可以將wx:for用在<block/>標籤上，以渲染一個包含多節點的結構塊。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
d.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="addToFront"> Add to the front </button>
//js部分
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]
},
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
})
}
})
9.模板
WXML提供模板（template），可以在模板中定義代碼片段，然後在不同的地方調用。
a.定義
使用name屬性，作爲模板的名字。然後在<template/>內定義代碼片段，如：
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
b.使用
使用 is 屬性，聲明需要的使用的模板，然後將模板所需要的 data 傳入，如：
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
c.動態渲染
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>
d.模板的作用域
模板擁有自己的作用域，只能使用data傳入的數據。
10.引用
WXML 提供兩種文件引用方式import和include。
a.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"/>
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>
11.事件
a.什麼是事件:事件是視圖層到邏輯層的通訊方式。事件對象可以攜帶額外信息，如 id, dataset, touches。
b.事件的使用方式
在組件中綁定一個事件處理函數。
如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相應的Page定義中寫上相應的事件處理函數，參數是event。
Page({
tapName: function(event) {
console.log(event)
}
})
可以看到log出來的信息大致如下：
{
"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
}]
}
c.事件詳解
事件分爲冒泡事件和非冒泡事件
冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
WXML的冒泡事件列表：
類型 觸發條件
touchstart 手指觸摸動作開始
touchmove 手指觸摸後移動
touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗
touchend 手指觸摸動作結束
tap 手指觸摸後馬上離開
longtap 手指觸摸後，超過350ms再離開
注：除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個組件)
d.事件綁定
事件綁定的寫法同組件的屬性，以 key、value 的形式。
key 以bind或catch開頭，然後跟上事件的類型，如bindtap, catchtouchstart
value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
如在下邊這個例子中，點擊 inner view 會先後觸發handleTap3和handleTap2(因爲tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點擊 middle view 會觸發handleTap2，點擊 outter view 會觸發handleTap1。
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
e.事件對象
如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。
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-開頭的自定義屬性組成的集合
說明：
target 和 currentTarget 可以參考上例中，點擊 inner view 時，handleTap3 收到的事件對象
target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是
inner，currentTarget 就是 middle。
dataset
在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉成駝峯elementType。
示例：
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 會轉爲駝峯寫法
event.target.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
自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。
12.樣式WXSS
a.樣式導入
使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
示例代碼：
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
b.內聯樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請儘量避免將靜態的樣式寫進 style 中，以免影響渲染速度。
<view style="color:{{color}};" />
class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。
<view class="normal_view" />
c.選擇器
目前支持的選擇器有：
選擇器 樣例 樣例描述
.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 組件前邊插入內容
d.全局樣式與局部樣式
定義在 app.wxss 中的樣式爲全局樣式，作用於每一個頁面。在 page 的 wxss 文件中定義的樣式爲局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。
13.視圖容器及基礎內容
a.view視圖容器
屬性名 類型 默認值 說明
hover Boolean false 是否啓用點擊態
hover-class String none 指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
hover-start-time Number 50 按住後多久出現點擊態，單位毫秒
hover-stay-time Number 400 手指鬆開後點擊態保留時間，單位毫秒
示例：
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
樣式代碼
.section__title{width:690rpx; margin:0px 30rpx; height:50px; line-height:50px; text-align:center; border-bottom:1px solid #D1D1D1;}
.flex-item{width:200rpx; height:200rpx; display:inline-flex;}
.flex-wrp{padding:20rpx; display:flex;}
.BgRed{
background:#FF0000;
}
.BgGreen{
background:#00FF00;
}
.BgBlue{
background:#0000FF;
}
b.scroll-view 可滾動視圖區域
屬性名 類型 默認值 說明
scroll-x Boolean false 允許橫向滾動
scroll-y Boolean false 允許縱向滾動
upper-threshold Number 50 距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件
lower-threshold Number 50 距底部/右邊多遠時（單位px），觸發 scrolltolower 事件
scroll-top Number 設置豎向滾動條位置
scroll-left Number 設置橫向滾動條位置
scroll-into-view String 值應爲某子元素id，則滾動到該元素，元素頂部對齊滾動區域頂部
bindscrolltoupper EventHandle 滾動到頂部/左邊，會觸發 scrolltoupper 事件
bindscrolltolower EventHandle 滾動到底部/右邊，會觸發 scrolltolower 事件
bindscroll EventHandle 滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
使用豎向滾動時，需要給<scroll-view/>一個固定高度，通過 WXSS 設置 height。
演示代碼
<scroll-view scroll-y="true" style="height:200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
<view class="flex-wrp" style="flex-direction:column;">
<view class="flex-item BgRed">1</view>
<view class="flex-item BgGreen">2</view>
<view class="flex-item BgBlue">3</view>
</view>
</scroll-view>
js 部分
Page({
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
}
})
c.swiper 滑塊視圖容器
屬性 類型 默認值 說明
indicator-dots Boolean false 是否顯示面板指示點
autoplay Boolean false 是否自動切換
current Number 0 當前所在頁面的 index
interval Number 5000 自動切換時間間隔
duration Number 500 滑動動畫時長
circular Boolean false 是否採用銜接滑動
bindchange EventHandle current 改變時會觸發 change 事件，event.detail = {current: current}
swiper-item
僅可放置在<swiper/>組件中，寬高自動設置爲100%。
示例代碼：
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}
})
d.icon 圖標
屬性名 類型 默認值 說明
type String icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 icon的大小，單位px
color Color icon的顏色，同css的color
演示代碼
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
//js 部分
Page({
data: {
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})
e.text 文本
支持轉義符"\"。
<text/> 組件內只支持 <text/> 嵌套。
除了文本節點以外的其他節點都無法長按選中。換行 "\n"
f.progress 進度條
屬性名 類型 默認值 說明
percent Float 無 百分比0~100
show-info Boolean false 在進度條右側顯示百分比
stroke-width Number 6 進度條線的寬度，單位px
color Color #09BB07 進度條顏色
active Boolean false 進度條從左往右的動畫
演示代碼
<progress percent="80" active />
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
