宿主環(huán)境(host environment)是程序運(yùn)行所必須的依賴環(huán)境兄猩。比如iOS系統(tǒng)和Android系統(tǒng)是分別是iOS應(yīng)用和Android應(yīng)用的宿主環(huán)境豹储,iOS應(yīng)用只能在iOS系統(tǒng)上運(yùn)行氏身,沒法運(yùn)行到Android系統(tǒng)上。
小程序的宿主環(huán)境
微信就是小程序的宿主環(huán)境极祸,小程序通過微信提供的能力祠汇,可以完成許多普通網(wǎng)頁無法完成的功能盖袭,如微信掃碼失暂,微信登錄等。
微信為小程序提供的支持
- 通信模型
- 運(yùn)行機(jī)制
- 組件
- API
小程序的通信模塊
通信主體
小程序中的通信主體是渲染層和邏輯層鳄虱,其中
- WXML 模板和 WXSS 樣式工作在渲染層
- JS 腳本工作在邏輯層
通信模型
小程序中的通信模型分為兩部分弟塞,都是由微信客戶端進(jìn)行轉(zhuǎn)發(fā)
- 渲染層和邏輯層之間的通信
- 邏輯層和第三方服務(wù)器之間的通信
小程序的運(yùn)行機(jī)制
小程序的運(yùn)行機(jī)制包括啟動(dòng)過程和頁面渲染兩部分
啟動(dòng)過程
- 把小程序的代碼包下載到本地
- 解析 app.json 全局配置文件
- 執(zhí)行 app.js 小程序入口文件,調(diào)用 App() 創(chuàng)建小程序?qū)嵗?/li>
- 渲染小程序首頁
- 小程序啟動(dòng)完成
頁面渲染
- 加載解析頁面的 .json配置文件
- 加載頁面的 .wxml 模板和 .wxss 樣式
- 執(zhí)行頁面的 .js 文件拙已,調(diào)用 Page() 創(chuàng)建頁面的實(shí)例
- 頁面渲染完成
組件
小程序中的組件也是由宿主環(huán)境提供的决记,開發(fā)者可以基于組件快速的搭建出頁面。
組件的分類
- 視圖容器
- 基礎(chǔ)內(nèi)容
- 表單組件
- 導(dǎo)航組件
- 媒體組件
- map 地圖組件
- canvas 畫布組件
- 開放能力
- 無障礙訪問
API
小程序中的 API 是有宿主環(huán)境提供的倍踪,通過這些豐富的小程序 API系宫,開發(fā)者可以方便的使用微信提供的各種能力索昂,如獲取用戶信息、本地存儲(chǔ)笙瑟、分享楼镐、支付功能等癞志。
API的分類
官方把小程序的API分為三大類
- 事件監(jiān)聽API
- 特點(diǎn) 以 on 開頭往枷,用來監(jiān)聽某些事件的觸發(fā)
- 舉例 wx.onWindowResize(function.callback)監(jiān)聽窗口尺寸變化的事件
- 同步API
- 特點(diǎn)1 以 Sync 結(jié)尾的都是同步 API
- 特點(diǎn)2 同步 API 的執(zhí)行結(jié)果,可以通過函數(shù)返回值直接獲取凄杯,執(zhí)行出錯(cuò)則會(huì)拋出異常
- 舉例 wx.setStorageSync('key', 'value')向本地存儲(chǔ)中寫入內(nèi)容
- 異步API
- 特點(diǎn) 類似于 jQuery 中的 $.ajax(options) 函數(shù)错洁,需要通過success、fail戒突、complete接收調(diào)用的結(jié)果
- 舉例 wx.request() 發(fā)起網(wǎng)絡(luò)請(qǐng)求屯碴,通過 success 接收請(qǐng)求成功的結(jié)果