關於小程式的基礎庫解析

2022-09-20 18:24:08 字數 2902 閱讀 3479

小程式的基礎庫,它包含了哪些東西,以及載入、更新的機制又是怎樣的呢。

關於基礎庫的成分,不得不提到我們之前說過的小程式渲染機制,參考 react 的 virtual dom。

基礎庫除了處理 vd 的渲染問題,它還包括內建元件和邏輯層api,總的來說負責處理資料繫結、元件系統、事件系統、通訊系統等一系列框架邏輯。

小程式的基礎庫是 j**ascript 編寫的,它可以被注入到渲染層和邏輯層執行。在渲染層可以用各類元件組建介面的元素,在邏輯層可以用各類 api 來處理各種邏輯。

同時,小程式的一些補充能力:自定義元件和外掛程式,也有相應的基礎**,當然也需要新增到基礎庫里。

所以我們可以看到,小程式的基礎庫主要是:

提供 vd 渲染機制相關基礎**。(exparser 框架)

提供封裝後的內建元件。

提供邏輯層的 api。

提供其他補充能力(自定義元件和外掛程式等)的基礎**。

exparser 是微信小程式的元件組織框架,內建在小程式基礎庫中,為小程式的各種元件提供基礎的支援。小程式內的所有元件,包括內建元件和自定義元件,都由 exparser 組織管理。

exparser 會維護整個頁面的節點樹相關資訊,包括節點的屬性、事件繫結等,相當於乙個簡化版的 shadow dom 實現。exparser 的主要特點包括以下幾點:

基於 shadow dom 模型:模型上與 webcomponents 的 shadowdom 高度相似,但不依賴瀏覽器的原生支援,也沒有其他依賴庫;實現時,還針對性地增加了其他 api 以支援小程式元件程式設計。

可在純 js 環境中執行:這意味著邏輯層也具有一定的元件樹組織能力。

高效輕量:效能表現好,在元件例項極多的環境下表現尤其優異,同時**尺寸也較小。

基於這個框架,內建了一套元件,以涵蓋小程式的基礎功能,便於開發者快速搭建出任何介面。同時也提供了自定義元件的能力,開發者可以自行擴充套件更多的元件,以實現**復用。

小程式基於 exparser 框架,內建了一套元件,提供了檢視容器類、表單類、導航類、**類、開放類等幾十種元件。

內建元件在小程式框架裡的定義是:在小程式架構裡無法實現或者實現不好某類功能,使用元件內建到小程式框架裡。常見包括:

開放類元件:如 open-data 元件提供展示群名稱、使用者資訊等微信體系下的隱私資訊,有 button 元件裡 open-type 屬性所提供分享、跳轉 app 等敏感操作的能力

檢視容器類元件:如 movable-view 這種因雙線程模型導致手勢識別不好實現的元件(在雙線程模型中,觸控事件從渲染層發出,派發到邏輯層,這中間是有一定的延時而導致檢視跟隨手指運動這類互動變得有些卡頓)宿主環境提供了豐富的api,可以很方便調起微信提供的能力。

小程式提供的 api 按照功能主要分為幾大類:網路、**、檔案、資料快取、位置、裝置、介面、介面節點資訊還有一些特殊的開放介面。

需要注意 api 呼叫大多都是非同步的。

自定義元件是開發者可以自行擴充的元件。開發者可以將常用的節點樹結構提取成自定義元件,實現**復用。

在使用自定義元件的小程式頁面中,exparser 將接管所有的自定義元件註冊與例項化。以 component 為例:

在小程式啟動時,構造器會將開發者設定的 properties、data、methods 等定義段,寫入 exparser 的元件登錄檔中。

這個元件在被其它元件引用時,就可以根據這些註冊資訊來建立自定義元件的例項。

page 構造器的大體執行流程與之相仿,只是引數形式不一樣。這樣每個頁面就有乙個與之對應的元件,稱為「頁面根元件」。

在初始化頁面時,exparser 會建立出頁面根元件的乙個例項,用到的其他元件也會響應建立元件例項(這是乙個遞迴的過程)。

外掛程式是對一組 js 介面、自定義元件或頁面的封裝,用於嵌入到小程式中使用。

外掛程式不能獨立執行,必須嵌入在其他小程式中才能被使用者使用;而第三方小程式在使用外掛程式時,也無法看到外掛程式的**。因此,外掛程式適合用來封裝自己的功能或服務,提供給第三方小程式進行展示和使用。

外掛程式開發者可以像開發小程式一樣編寫乙個外掛程式並上傳**,在外掛程式發布之後,其他小程式方可呼叫。小程式平台會託管外掛程式**,其他小程式呼叫時,上傳的外掛程式**會隨小程式一起**執行。

在開發網頁時,經常會引用很多開源的 js 庫,在使用到這些庫所提供的 api 前,我們需要先在業務**前邊引入這些庫。

同樣道理,我們需要在啟動 app 之前載入基礎庫,接著再載入業務**。由於小程式的渲染層和邏輯層是兩個執行緒管理,而我們一般說起基礎庫,也通常包括 webview 基礎庫(渲染層),和 appservice 基礎庫(邏輯層)。

顯然,所有小程式在微信客戶端開啟的時候,都需要注入相同的基礎庫。所以,小程式的基礎庫不會被打包在某個小程式的**包裡邊,它會被提前內建在微信客戶端。

將基礎庫內建在微信客戶端,有兩個好處:

降低業務小程式的**包大小。

可以單獨修復基礎庫中的bug,無需修改到業務小程式的**包。在小程式啟動前,微信會提前準備好乙個頁面層級用於展示小程式的首頁。這裡就包括了邏輯層和渲染層分別的初始化以及公共庫的注入。

在小程式啟動時,微信會為小程式展示乙個固定的啟動介面,介面內包含小程式的圖示、名稱和載入提示圖示。此時,微信會在背後完成幾項工作:**小程式**包、載入小程式**包、初始化小程式首頁。

小程式的很多能力需要微信客戶端來支撐,例如藍芽、直播能力、微信運動等,可以說,小程式基礎庫的迭代離不開微信客戶端的發布。

為了避免新版本的基礎庫給線上小程式帶來未知的影響,微信客戶端都是攜帶上乙個穩定版的基礎庫發布的。等到微信客戶端正式發布後,小程式會開始灰度推送新版本的基礎庫到微信客戶端裡,在這個過程需要仔細監控各類異常現象以及開發者和使用者的反饋,一般灰度時長為12小時,灰度結束後,使用者裝置上就會有新版本的基礎庫。如果存在重大bug,那此次推送會被回退。

本節大致結合了小程式的啟動來講了下小程式的基礎庫。其實很多都能在小程式開發指南裡找到,只是文字太多又有些亂,看一遍未必能記住,但是第二遍又找不到了。

哈哈哈吐槽下小程式的文件,很詳細就是有點容易找不到。

關於小程式的富文字解析問題

今天在開發小程式時,後台傳過來一串字串,當時看我一臉懵逼,後來才知道是富文字編輯器的內容當時也是很頭疼,後台問了度娘,知道怎麼辦。就一篇隨筆分享一下 路徑 放入專案裡面即可 然後在需要使用的wxml檔案引入wxparse.wxml模板 import src wxparse wxparse.wxml ...

小程式json格式解析

that.setdata 1 解析這個json wxml 資料 品種 最新價 開盤價 最 最低價 漲跌幅 昨收價 總成交量 js page success function res 效果 this.setdata 2 解析這個json wxml 列表測試 單價 元 m js page 生命週期函式 ...

小程式解析html文字

解決方法 使用外掛程式wxparse來解析 步驟三 配置你的專案 import wxparse wxparse.wxss var wxparse require wxparse wxparse.js 步驟四 在方法中呼叫 wxparse.wxparse bindname type,data,targ...