摘要:小程序的布局信息微信小程序中使用作為長度單位,可以根據屏幕寬度進行自適應。運行環境普通都是執行在瀏覽器的宿主環境,瀏覽器提供等對象但是小程序是運行在微信上下文中的,沒有和。
小程序堅持著 “無需下載、觸手可及、用完即走”的設計理念和價值觀,幫助用戶縮短完成任務的時間。下面從以下幾點進行總結。
總結是參考三清水老師的小冊子,推薦大家去購買。寫的很棒。
微信小程序是在微信的上下文中運行的,而不是在瀏覽器中運行的,所以瀏覽器特有的window對象、BOM和DOM等相關的API都不能使用。 同時,跟瀏覽器相關的操作,Cookie、Ajax請求(XMLHttpRequest)、DOM選擇器、DOM事件、路由history、緩存、設備信息、位置等都不存在。 但是,微信小程序為我們提供了一套自己的API。3. 小程序的布局信息
微信小程序中使用rpx作為長度單位,可以根據屏幕寬度進行自適應。 rpx是以小程序容器寬度 === 設備寬度 == 屏幕寬度 === 750rpx來做定義的。 如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 官方iPhone手機尺寸對照表格
建議: 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準
4. 微信小程序與H5對比在微信小程序中,一切皆組件(視圖組件)。
運行環境
普通H5都是執行在瀏覽器的宿主環境,瀏覽器提供window、document等BOM對象;但是小程序是運行在微信上下文中的,沒有BOM和DOM。因此在小程序中不能使用BOM 和DOM 提供的接口
路由
H5是通過URL進行訪問的,小程序沒有對外暴漏統一的URL路徑進行訪問。小程序是通過信道服務進行通信和會話管理,所以它不支持Cookie存儲,訪問資源使用 wx.request 而不是 ajax 的 xmlhttprequet API,小程序的 wx.request 請求不存在跨域的問題。
注意: 不要嘗試修改頁面棧,會導致路由以及頁面狀態錯誤 不要在 App.onLaunch 的時候調用 getCurrentPages(),此時 page 還沒有生成
模塊化
微信小程序在JS模塊化上支持CommonJs,通過require加載,跟node.js類似。
樣式
微信小程序的頁面樣式完全繼承了CSS語法,支持FLEX布局
框架
微信小程序的整體框采用面向狀態編程方式,狀態管理從API來看采用類似Redux的設計方式;
單項數據綁定方式,當view在action操作后,只能通過action的業務處理來更新view。
微信小程序分為視圖層和邏輯層,視圖層在webview中渲染,主要負責頁面的渲染工作,其中視圖可以有多個,目前最多10個; 邏輯層在jscore中進行渲染,負責邏輯處理、全局狀態管理、請求和接口調用,邏輯層全局只有一個(實際通過X5內核,另起一個JScore線程)。 微信小程序的視圖層和邏輯層通過微信的JSBridge來實現通信。 邏輯層數據變化通過JSBridge通知視圖層,視圖層進行更新處理。視圖層觸發事件通過JSBridge將事件通知到邏輯層,邏輯層進行處理; JSBridge提供的方法有invoke(調用native)、publish(消息分發)和subscribe。 因為在一個小程序中可以打開多個視圖層(webview),要保證從邏輯層發送的數據可以準確送到具體的某個webview中, 需要通過每webview 唯一標識符webviewID來實現。發送event的時候攜帶webviewID,然后邏輯層處理完對應的邏輯, 如果需要下發數據,則通過webviewID找到對應的webview。6.小程序生命周期
小程序在啟動時,會同時啟動兩個線程,一個負責頁面渲染的webview,一個負責邏輯jscore。 邏輯層初始化后會將初始化數據(app.js中的global)通過JSBridge傳遞給渲染層進行渲染,渲染層webview渲染完頁面之后又會跟邏輯層通信。7.小程序WXML怎么轉成HTML
WXML寫完之后經過編譯工具WCC轉成可執行的JS。wcc和wcsc是小程序的wxml和wxss的編譯工具,是二進制文件。 這個JS會接受一個path,將path的頁面轉換成一個virtual DOM。 這個virtual DOM 結構里面就會找到以 wx-*開頭的tag,有了這個VDOM結構,就可以使用對應的tag創建HTML片段了。
以上內容主要是參看三清水老師的小冊子寫的。覺得寫的不錯,大家也可以去購買一起學習交流謝謝。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98064.html
摘要:傳輸時間與數據量大體上呈現正相關關系,傳輸過大的數據將使這一時間顯著增加。小程序不管從組件化開發調試發布灰度回滾上報統計監控和最近的云能力都非常完善,小程序的工程化簡直就是前端的典范。 研究背景 上一篇文章了解了小程序的生命周期,接下來研究一下數據通信,我覺得清楚了生命周期和數據通信,就能對整個程序有一定的把控能力,定位問題和解決問題的能力將大幅提高我剛開始擼小程序的時候,覺得看看文...
摘要:由于微信小程序沒有一套身份驗證管理的框架,只提供等幾個,所以對于我這種初學者來說,小程序登陸狀態管理就顯得很麻煩。按照個人的理解,需要攜帶??傊椭灰渲兄徊淮嬖冢家训顷憼顟B標記為未登陸。不然用戶不清楚不確定是否登陸成功。 ...
摘要:微信小程序的一種框架簡述由于項目原因,我于兩個多月前轉到微信端用進行開發。事件發起組件的所有祖先組件會依次接收到事件。注意,如果用了自定義事件,則中對應的監聽函數不會再執行。 wepy——微信小程序的一種框架 簡述 由于項目原因,我于兩個多月前轉到微信端用wepy進行開發。wepy開發風格接近于 Vue.js,支持組件 Props 傳值,自定義事件、組件分布式復用Mixin、Redux...
閱讀 1765·2021-09-22 15:10
閱讀 1261·2021-09-07 09:58
閱讀 2333·2019-08-30 15:44
閱讀 1635·2019-08-26 18:29
閱讀 2033·2019-08-26 13:35
閱讀 759·2019-08-26 13:31
閱讀 720·2019-08-26 11:42
閱讀 1065·2019-08-23 18:39