微信小程序框架鏈接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=20161122
1.小程序開發(fā)框架的目標(biāo)是通過盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。
框架提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS(相當(dāng)于h5和c3)恕刘,以及基于 JavaScript 的邏輯層框架(微信自己的框架挟秤,特點(diǎn)也是雙向綁定),并在視圖層(view層)與邏輯層 (App Service)間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
2.框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng);
整個(gè)系統(tǒng)分為兩塊視圖層(View)和邏輯層(App Service)埋酬;
框架可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候烧栋,只需要在邏輯層修改數(shù)據(jù)写妥,視圖層就會(huì)做相應(yīng)的更新。(很明了审姓,就是雙向綁定)珍特。
3.新標(biāo)簽和語(yǔ)法:
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>;
var helloData = { name: 'WeChat'}
// Register a Page.
Page({ data: helloData, changeName: function(e) { // sent data change to view
this.setData({ name: 'MINA' })
}
})
4.頁(yè)面管理:
框架管理了整個(gè)小程序的頁(yè)面路由魔吐,可以做到頁(yè)面間的無(wú)縫切換扎筒,并給以頁(yè)面完整的生命周期莱找。開發(fā)者需要做的只是將頁(yè)面的數(shù)據(jù),方法嗜桌,生命周期函數(shù)注冊(cè)進(jìn) 框架 中奥溺,其他的一切復(fù)雜的操作都交由 框架 處理。
基礎(chǔ)組件
框架 提供了一套基礎(chǔ)的組件骨宠,這些組件自帶微信風(fēng)格的樣式以及特殊的邏輯浮定,開發(fā)者可以通過組合基礎(chǔ)組件,創(chuàng)建出強(qiáng)大的微信小程序 层亿。
豐富的 API
框架 提供豐富的微信原生 API桦卒,可以方便的調(diào)起微信提供的能力,如獲取用戶信息棕所,本地存儲(chǔ)闸盔,支付功能等悯辙。
關(guān)于微信原生API:
1.wx-for :遍歷數(shù)組 和 對(duì)象
網(wǎng)絡(luò)API請(qǐng)求:
wx.request
發(fā)起網(wǎng)絡(luò)請(qǐng)求
wx.uploadFile
上傳文件
wx.downloadFile
下載文件
wx.connectSocket
創(chuàng)建 WebSocket 連接
wx.onSocketOpen
監(jiān)聽 WebSocket 打開
wx.onSocketError
監(jiān)聽 WebSocket 錯(cuò)誤
wx.sendSocketMessage
發(fā)送 WebSocket 消息
wx.onSocketMessage
接受 WebSocket 消息
wx.closeSocket
關(guān)閉 WebSocket 連接
wx.onSocketClose
監(jiān)聽 WebSocket 關(guān)閉
wx.getStorage
獲取本地?cái)?shù)據(jù)緩存
wx.setStorage
設(shè)置本地?cái)?shù)據(jù)緩存
wx.clearStorage
清理本地?cái)?shù)據(jù)緩存
位置 API 列表:
wx.getLocation
獲取當(dāng)前位置
wx.openLocation
打開內(nèi)置地圖
設(shè)備 API 列表:
wx.getNetworkType
獲取網(wǎng)絡(luò)類型
wx.getSystemInfo
獲取系統(tǒng)信息
wx.onAccelerometerChange
監(jiān)聽重力感應(yīng)數(shù)據(jù)
wx.onCompassChange
監(jiān)聽羅盤數(shù)據(jù)
界面 API 列表:
wx.setNavigationBarTitle
設(shè)置當(dāng)前頁(yè)面標(biāo)題
wx.showNavigationBarLoading
顯示導(dǎo)航條加載動(dòng)畫
wx.hideNavigationBarLoading
隱藏導(dǎo)航條加載動(dòng)畫
wx.navigateTo
新窗口打開頁(yè)面
wx.redirectTo
原窗口打開頁(yè)面
wx.navigateBack
退回上一個(gè)頁(yè)面
wx.createAnimation
動(dòng)畫
wx.createContext
創(chuàng)建繪圖上下文
wx.drawCanvas
繪圖
wx.hideKeyboard
隱藏鍵盤
wx.stopPullDownRefresh
停止下拉刷新動(dòng)畫
開放接口:
wx.login
登錄
wx.getUserInfo
獲取用戶信息
wx.requestPayment
發(fā)起微信支付
基礎(chǔ)組件:
什么是組件:
?組件是視圖層的基本組成單元琳省。
組件自帶一些功能與微信風(fēng)格的樣式。
一個(gè)組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽躲撰,屬性用來(lái)修飾這個(gè)組件针贬,內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。
<tagname property="value"> Content goes here ...</tagename>
注意:所有組件與屬性都是小寫拢蛋,以連字符-連接
屬性類型
類型
描述
注解
Boolean
布爾值
組件寫上該屬性桦他,不管該屬性等于什么,其值都為true谆棱,只有組件上沒有寫該屬性時(shí)快压,屬性值才為false。
如果屬性值為變量垃瞧,變量的值會(huì)被轉(zhuǎn)換為Boolean類型.
Number
數(shù)字
1, 2.5
String
字符串
"string"
Array
數(shù)組
[ 1, "string" ]
Object
對(duì)象
{ key: value }
EventHandler
事件處理函數(shù)名
"handlerName"
是 Page中定義的事件處理函數(shù)名
Any
任意屬性
共同屬性類型
(所有組件都有的屬性):
屬性名
類型
描述
注解
id
String
組件的唯一標(biāo)示
保持整個(gè)頁(yè)面唯一
class
String
組件的樣式類
在對(duì)應(yīng)的 WXSS 中定義的樣式類
style
String
組件的內(nèi)聯(lián)樣式
可以動(dòng)態(tài)設(shè)置的內(nèi)聯(lián)樣式
hidden
Boolean
組件是否顯示
所有組件默認(rèn)顯示
data-*
Any
自定義屬性
組件上觸發(fā)的事件時(shí)蔫劣,會(huì)發(fā)送給事件處理函數(shù)
bind* / catch*
EventHandler
組件的事件
詳見事件
特殊屬性
幾乎所有組件都有各自定義的屬性,可以對(duì)該組件的功能或樣式進(jìn)行修飾个从,請(qǐng)參考各個(gè)組件的定義脉幢。
組件列表
基礎(chǔ)組件分為以下八大類:
視圖容器(View Container):
組件名
說(shuō)明
view
視圖容器
scroll-view
可滾動(dòng)視圖容器
swiper
滑塊視圖容器
基礎(chǔ)內(nèi)容(Basic Content):
組件名
說(shuō)明
icon
圖標(biāo)
text
文字
progress
進(jìn)度條
表單(Form):
標(biāo)簽名
說(shuō)明
button
按鈕
form
表單
input
輸入框
checkbox
多項(xiàng)選擇器
radio
單項(xiàng)選擇器
picker
列表選擇器
slider
滾動(dòng)選擇器
switch
開關(guān)選擇器
label
標(biāo)簽
操作反饋(Interaction):
組件名
說(shuō)明
action-sheet
上拉菜單
modal
模態(tài)彈窗
toast
消息提示框
loading
加載提示符
導(dǎo)航(Navigation):
組件名
說(shuō)明
navigator
應(yīng)用鏈接
多媒體(Media):
組件名
說(shuō)明
audio
音頻
image
圖片
video
視頻
地圖(Map):
組件名
說(shuō)明
map
地圖
畫布(Canvas):
組件名
說(shuō)明
canvas
畫布