摘要：小程序的布局信息微信小程序中使用作為長(zhǎng)度單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。運(yùn)行環(huán)境普通都是執(zhí)行在瀏覽器的宿主環(huán)境，瀏覽器提供等對(duì)象但是小程序是運(yùn)行在微信上下文中的，沒有和。

小程序堅(jiān)持著 “無需下載、觸手可及、用完即走”的設(shè)計(jì)理念和價(jià)值觀，幫助用戶縮短完成任務(wù)的時(shí)間。下面從以下幾點(diǎn)進(jìn)行總結(jié)。
總結(jié)是參考三清水老師的小冊(cè)子，推薦大家去購(gòu)買。寫的很棒。

微信小程序是在微信的上下文中運(yùn)行的，而不是在瀏覽器中運(yùn)行的，所以瀏覽器特有的window對(duì)象、BOM和DOM等相關(guān)的API都不能使用。
同時(shí)，跟瀏覽器相關(guān)的操作，Cookie、Ajax請(qǐng)求（XMLHttpRequest）、DOM選擇器、DOM事件、路由history、緩存、設(shè)備信息、位置等都不存在。
但是，微信小程序?yàn)槲覀兲峁┝艘惶鬃约旱腁PI。

微信小程序中使用rpx作為長(zhǎng)度單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。
rpx是以小程序容器寬度 === 設(shè)備寬度 == 屏幕寬度 === 750rpx來做定義的。
如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

官方iPhone手機(jī)尺寸對(duì)照表格

建議： 開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)

在微信小程序中，一切皆組件（視圖組件）。

運(yùn)行環(huán)境
普通H5都是執(zhí)行在瀏覽器的宿主環(huán)境，瀏覽器提供window、document等BOM對(duì)象；但是小程序是運(yùn)行在微信上下文中的，沒有BOM和DOM。因此在小程序中不能使用BOM 和DOM 提供的接口

路由
H5是通過URL進(jìn)行訪問的，小程序沒有對(duì)外暴漏統(tǒng)一的URL路徑進(jìn)行訪問。小程序是通過信道服務(wù)進(jìn)行通信和會(huì)話管理，所以它不支持Cookie存儲(chǔ)，訪問資源使用 wx.request 而不是 ajax 的 xmlhttprequet API，小程序的 wx.request 請(qǐng)求不存在跨域的問題。

注意：
不要嘗試修改頁(yè)面棧，會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤
不要在 App.onLaunch 的時(shí)候調(diào)用 getCurrentPages()，此時(shí) page 還沒有生成

模塊化
微信小程序在JS模塊化上支持CommonJs，通過require加載，跟node.js類似。

樣式
微信小程序的頁(yè)面樣式完全繼承了CSS語(yǔ)法，支持FLEX布局

框架
微信小程序的整體框采用面向狀態(tài)編程方式，狀態(tài)管理從API來看采用類似Redux的設(shè)計(jì)方式；
單項(xiàng)數(shù)據(jù)綁定方式，當(dāng)view在action操作后，只能通過action的業(yè)務(wù)處理來更新view。

微信小程序分為視圖層和邏輯層，視圖層在webview中渲染，主要負(fù)責(zé)頁(yè)面的渲染工作，其中視圖可以有多個(gè)，目前最多10個(gè)；
邏輯層在jscore中進(jìn)行渲染，負(fù)責(zé)邏輯處理、全局狀態(tài)管理、請(qǐng)求和接口調(diào)用，邏輯層全局只有一個(gè)（實(shí)際通過X5內(nèi)核，另起一個(gè)JScore線程）。
微信小程序的視圖層和邏輯層通過微信的JSBridge來實(shí)現(xiàn)通信。
邏輯層數(shù)據(jù)變化通過JSBridge通知視圖層，視圖層進(jìn)行更新處理。視圖層觸發(fā)事件通過JSBridge將事件通知到邏輯層，邏輯層進(jìn)行處理；
JSBridge提供的方法有invoke（調(diào)用native）、publish(消息分發(fā))和subscribe。
因?yàn)樵谝粋€(gè)小程序中可以打開多個(gè)視圖層（webview），要保證從邏輯層發(fā)送的數(shù)據(jù)可以準(zhǔn)確送到具體的某個(gè)webview中，
需要通過每webview 唯一標(biāo)識(shí)符webviewID來實(shí)現(xiàn)。發(fā)送event的時(shí)候攜帶webviewID，然后邏輯層處理完對(duì)應(yīng)的邏輯，
如果需要下發(fā)數(shù)據(jù)，則通過webviewID找到對(duì)應(yīng)的webview。

小程序在啟動(dòng)時(shí)，會(huì)同時(shí)啟動(dòng)兩個(gè)線程，一個(gè)負(fù)責(zé)頁(yè)面渲染的webview，一個(gè)負(fù)責(zé)邏輯jscore。
邏輯層初始化后會(huì)將初始化數(shù)據(jù)（app.js中的global）通過JSBridge傳遞給渲染層進(jìn)行渲染，渲染層webview渲染完頁(yè)面之后又會(huì)跟邏輯層通信。

WXML寫完之后經(jīng)過編譯工具WCC轉(zhuǎn)成可執(zhí)行的JS。wcc和wcsc是小程序的wxml和wxss的編譯工具，是二進(jìn)制文件。
這個(gè)JS會(huì)接受一個(gè)path,將path的頁(yè)面轉(zhuǎn)換成一個(gè)virtual DOM。
這個(gè)virtual DOM 結(jié)構(gòu)里面就會(huì)找到以 wx-*開頭的tag,有了這個(gè)VDOM結(jié)構(gòu)，就可以使用對(duì)應(yīng)的tag創(chuàng)建HTML片段了。

以上內(nèi)容主要是參看三清水老師的小冊(cè)子寫的。覺得寫的不錯(cuò)，大家也可以去購(gòu)買一起學(xué)習(xí)交流謝謝。