動態

詳情 返回 返回

小程序會帶動Hybrid App崛起嗎? - 動態 詳情

Hybrid App 開發模式

Hhybrid App顧名思義就是原生 App 與 Web App 的結合。它的殼是原生 App,但是裏面放的是網頁。 可以理解成,混合 App 裏面隱藏了一個瀏覽器,用户看到的實際上是這個隱藏瀏覽器渲染出來的網頁。

混合 App 的原生外殼稱為"容器",內部隱藏的瀏覽器,通常使用系統提供的網頁渲染控件(即 WebView 控件),也可以自己內置一個瀏覽器內核。結構上,混合 App 從上到下分成三層:HTML5 網頁層、網頁引擎層(本質上是一個隔離的瀏覽器實例)、容器層。

混合 App 同時具有原生 App 和 Web App的優點,又可以避免它們的一些缺點。具體來説,可以總結為三點。

(1)跨平台

Web 技術是跨平台的,開發者只寫一次頁面,就能支持多個平台。也就是説,混合 App 只需要一個團隊就夠了,開發成本較低。

(2)靈活性

混合 App 的靈活性大,很容易集成多種功能。一方面,混合 App 很容易加載外部的 H5 頁面,實現 App 的插件結構;另一方面,Web 頁面可以方便地調用外部的 Web 服務。

(3)開發方便

Web 頁面的調試和構建,遠比原生控件簡單省時。頁面的更新也容易,只要在服務器上發佈新版本,觸發容器內更新就可以了。另外,Web 開發人員也比較容易招聘,傳統的前端程序員可以承擔開發任務。

現在比較流行的混合方案主要有三種,主要是在UI渲染機制上的不同:

基於 WebView UI 的基礎方案,市面上大部分主流 App 都有采用,例如微信JS-SDK、Cordova,通過 JSBridge 完成 H5 與 Native 的雙向通訊,從而賦予H5一定程度的原生能力。
基於 Native UI 的方案,例如 React-Native、Weex。在賦予 H5 原生API能力的基礎上,進一步通過 JSBridge 將js解析成的虛擬節點樹(Virtual DOM)傳遞到 Native 並使用原生渲染。
在此特別強調一下第三種方案——基於小程序方案,也是通過更加定製化的 JSBridge,並使用雙 WebView 雙線程的模式隔離了JS邏輯與UI渲染,形成了特殊的開發模式,加強了 H5 與 Native 混合程度,提高了頁面性能及開發體驗。

小程序在JS-SDK的基礎上,一方面進一步開放和拓展原生的能力給到Web前端調用,另一方面,頁面渲染(Webview Render)的UI層和邏輯層,使用了兩個獨立的線程。如下圖所示:

小程序運行時本質上是一個處理Web頁面渲染、數據邏輯交互的虛擬機,這個虛擬機提供了豐富的原生能力供小程序調用(API、組件、AI能力等),極大的拓展了Web應用的能力邊界,尤其是在諸如滾動視圖(scrool-view)、導航(navigator)、圖片預覽(cover-image)等組件的提供,使得前端開發人員在使用現有的web前端技術,就可以開發出接近原生體驗的應用。

技術選型

任何技術方案的選型,其實都應該基於使用場景和現有條件。基於公司現有情況的幾點考慮,在方案一上進一步優化,更加適合我們的需求。

業務功能可以快速迭代、靈活開發並且支持線上熱更新的機制。
公司業務上,並沒有非常複雜的UI渲染需求,而且公司已經有一套完善的前端框架並且已經非常成熟,因此我們並不強需類似 RN 這樣的方案。
產品的核心能力是需要調用系統權限,因此單純的 H5技術能做的事非常有限,不能滿足需求,需要通過 Hybrid 技術來強化,例如「Native+小程序」技術框架

如何藉助「小程序運行時引擎」改造你的App?

以往業務部門要發佈一些新的功能的時候,用户必須要主動更新App,而且任何一個局部功能的變化升級需要去重新去應用市場再操作一次,成本很高。由於並不是所有的用户都去更新,造成IT團隊需要花費大力氣去維護多個不同的版本。這種方式造成用巨大的資源浪費和用户體驗的不便利。

如果用小程序,這個問題會迎刃而解。首先,小程序可以獨立的去更新,App作為了一個載體,很長的一段時間內,不需要被頻繁更新。其次,每個小程序可以按照業務具體需要去獨立發佈各自的版本,不同的小程序之間的更新升級彼此獨立、互不干擾。最後,由於小程序運行的沙箱機制,保證了不論是哪個小程序出現Bug、崩潰等情況,不會拖累應用本身,即便出現嚴重問題,也不過就是把它下線即可。

目前市面上也提供了小程序的通用解決方案,今天為大家介紹一下——FinClip。它的最大特點,就是能夠讓任何 App 運行小程序。

只需要在你的 App 裏面,引入它的 SDK,就能加載運行外部小程序了。除了 SDK,它還提供一個後台管理系統,統一管理小程序的上架和下架,以及收集和分析小程序數據。

而且FinClip完全遵循微信小程序的開發標準與規範。也就是説,現有的微信小程序可以不改一行代碼,直接放進你的 App 裏面,運行效果保持不變,不必額外二次開發和改造,大大節省了人力成本。

不僅如此,FinClip 還支持手機以外的多種終端,包括 Linux、Windows、MacOS、麒麟等操作系統。這意味着,PC 端、車載設備、智能電視都能使用小程序了,實現了小程序的“一次開發,到處運行”,同時觸達眾多流量平台,而不僅僅侷限於微信生態。

FinClip 還提供小程序 IDE 開發工具,界面與微信小程序的開發工具類似,自帶調試和真機預覽,簡單易上手。你可以在這個 IDE 裏面,對現有項目進行二次開發,擴展功能和接口,或者從零開始寫出一個小程序。

目前,FinClip已經得到了很多大公司的認可,有上百家客户,包括券商、股份制銀行、航空公司、車載設備服務商、省級移動警務平台等重要企業。開發者人數超過3萬,服務用户達到2500萬人,在真實的生產環境經受了百萬級的併發壓力考驗。

user avatar tianmiaogongzuoshi_5ca47d59bef41 頭像 haoqidewukong 頭像 zaotalk 頭像 smalike 頭像 nihaojob 頭像 freeman_tian 頭像 jingdongkeji 頭像 qingzhan 頭像 kobe_fans_zxc 頭像 dirackeeko 頭像 aqiongbei 頭像 chongdianqishi 頭像
點贊 152 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.