關(guān)于微信小程序框架的理解

微信小程序框架鏈接: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
畫布

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市嗦锐,隨后出現(xiàn)的幾起案子嫌松,更是在濱河造成了極大的恐慌,老刑警劉巖奕污,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萎羔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡碳默,警方通過查閱死者的電腦和手機(jī)外驱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門育灸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人昵宇,你說(shuō)我怎么就攤上這事磅崭。” “怎么了瓦哎?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵砸喻,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我蒋譬,道長(zhǎng)割岛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任犯助,我火速辦了婚禮癣漆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘剂买。我一直安慰自己惠爽,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布瞬哼。 她就那樣靜靜地躺著婚肆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪坐慰。 梳的紋絲不亂的頭發(fā)上较性,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音结胀,去河邊找鬼赞咙。 笑死,一個(gè)胖子當(dāng)著我的面吹牛糟港,可吹牛的內(nèi)容都是我干的攀操。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼着逐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼崔赌!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起耸别,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤气堕,失蹤者是張志新(化名)和其女友劉穎件舵,沒想到半個(gè)月后甲馋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體擂找,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了痒留。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谴麦。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖伸头,靈堂內(nèi)的尸體忽然破棺而出匾效,到底是詐尸還是另有隱情,我是刑警寧澤恤磷,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布面哼,位于F島的核電站,受9級(jí)特大地震影響扫步,放射性物質(zhì)發(fā)生泄漏魔策。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一河胎、第九天 我趴在偏房一處隱蔽的房頂上張望闯袒。 院中可真熱鬧,春花似錦游岳、人聲如沸政敢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)堕仔。三九已至擂橘,卻和暖如春晌区,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背通贞。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工朗若, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人昌罩。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓哭懈,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親茎用。 傳聞我的和親對(duì)象是個(gè)殘疾皇子遣总,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容