寧肖

（中海油信息科技有限公司數(shù)字技術(shù)中心 天津市 300452）

1 現(xiàn)有移動(dòng)應(yīng)用開發(fā)模式分析

常見的開發(fā)模式包括原生開發(fā)、B/S 模式開發(fā)、跨平臺(tái)框架應(yīng)用開發(fā)。

1.1 原生開發(fā)

原生應(yīng)用開發(fā)模式，其特征是產(chǎn)出品可作為獨(dú)立可執(zhí)行的程序直接運(yùn)行在操作系統(tǒng)上。由于客戶端應(yīng)用和操作系統(tǒng)銜接更為緊密，故一般流暢度較高，能獲得較好的用戶體驗(yàn)，但通常需要采用操作系統(tǒng)支持的原生開發(fā)語(yǔ)言和框架來(lái)完成，原生開發(fā)方式為了提供各種強(qiáng)大能力一般都會(huì)比較復(fù)雜，學(xué)習(xí)曲線陡峭，且不同的操作系統(tǒng)提供的原生開發(fā)語(yǔ)言、框架都不盡相同，如：蘋果iOS 平臺(tái)采用 Objective-C 語(yǔ)言或Swift 語(yǔ)言進(jìn)行開發(fā)，Android 平臺(tái)采用 Java 或 Kotlin 語(yǔ)言，PC 平臺(tái)可選擇的余地較多，如：C/C++/.NET/Java 等語(yǔ)言，界面框架涉及 Qt/Gtk/Win32/MFC/wxWidgets 等，且框架形式分為跨平臺(tái)及平臺(tái)專有[1]，因此為打造全平臺(tái)可用應(yīng)用，企業(yè)需組建一系列專業(yè)技術(shù)開發(fā)人員針對(duì)不同平臺(tái)編寫代碼，同時(shí)應(yīng)兼顧各平臺(tái)的體驗(yàn)接近、邏輯一致，從而開發(fā)效率十分低下。在大型企業(yè)持續(xù)發(fā)展建設(shè)中，應(yīng)用數(shù)量多，需求變化快，若采用原生開發(fā)模式，投入的成本及時(shí)間也將隨之攀升[2]。

1.2 B/S模式應(yīng)用

B/S 架構(gòu)是指應(yīng)用界面部分采用 HTML/Javascript等語(yǔ)言開發(fā)，并運(yùn)行在瀏覽器中的應(yīng)用。B/S 架構(gòu)發(fā)展至今，由于標(biāo)準(zhǔn)統(tǒng)一[1]，且各平臺(tái)的瀏覽器都能提供較好的支持，設(shè)計(jì)界面美觀，開發(fā)效率高，一次開發(fā)，多平臺(tái)適用，目前大部分企業(yè)桌面系統(tǒng)均會(huì)采用 B/S 架構(gòu)進(jìn)行系統(tǒng)開發(fā)。然而B/S 架構(gòu)也存在明顯缺點(diǎn)，首先對(duì)于離線使用場(chǎng)景，由于緩存 API 未統(tǒng)一標(biāo)準(zhǔn)，無(wú)法支持所有平臺(tái)，且存在較多限制條件，比如使用空間大小限制，僅支持 GET 請(qǐng)求的緩存；其次，在移動(dòng)終端用戶普遍適應(yīng)獨(dú)立應(yīng)用的使用方式，不習(xí)慣使用瀏覽器訪問(wèn)應(yīng)用程序，且H5 性能在不同的終端上差異較大，對(duì)移動(dòng)設(shè)備配置要求較高，利用 JS 實(shí)現(xiàn)過(guò)場(chǎng)動(dòng)畫可能會(huì)出現(xiàn)卡幀、丟幀而造成用戶體驗(yàn)較差的問(wèn)題[3]。故B/S 架構(gòu)存在應(yīng)用場(chǎng)景受限的問(wèn)題，如：在嵌入式設(shè)備上使用的工業(yè)應(yīng)用，有離線使用場(chǎng)景的閱讀、學(xué)習(xí)類移動(dòng)應(yīng)用，需要離線編輯在線同步的郵件類應(yīng)用以及希望使用操作系統(tǒng)更多能力且獲得良好交互體驗(yàn)的應(yīng)用等。

1.3 跨平臺(tái)框架

為了解決在不同平臺(tái)開發(fā)不同代碼的問(wèn)題，一些公司推出了跨平臺(tái)框架的概念，目的是編寫一次代碼可實(shí)現(xiàn)在多個(gè)不同的平臺(tái)上發(fā)布程序，提升開發(fā)效率。跨平臺(tái)框架主要包括中間語(yǔ)言編譯模式和基于H5 的混合開發(fā)模式。

1.3.1 中間語(yǔ)言編譯模式

主要代表有：Facebook 公司推出的 ReactNative 框架，Google 公司推出的 Flutter,微軟公司的 Xamarin,NativeScript 等，其主要特點(diǎn)是不依賴 H5 技術(shù)，而是采用一種中間語(yǔ)言進(jìn)行業(yè)務(wù)邏輯的開發(fā)，編譯打包為不同目標(biāo)平臺(tái)的應(yīng)用，如 ReactNative 采用 Javascript，F(xiàn)lutter 采用了 Durt 語(yǔ)言，為了調(diào)用操作系統(tǒng)提供的能力也需要利用原生語(yǔ)言開發(fā)一些插件開放給中間語(yǔ)言調(diào)用。這些框架的出現(xiàn)減少了跨平臺(tái)開發(fā)的工作，對(duì)于需求簡(jiǎn)單的場(chǎng)景，往往只需要編寫中間語(yǔ)言實(shí)現(xiàn)業(yè)務(wù)邏輯而無(wú)需考慮平臺(tái)間差異。然而也存在一些不足。首先，這些框架均為第三方公司產(chǎn)品，與原生開發(fā)之間存在著差異和滯后性，需伴隨原生平臺(tái)升級(jí)進(jìn)行適配；其次，此類框架主要為移動(dòng)平臺(tái)量身定制，對(duì)于桌面和 Web 端的開發(fā)支持能力有限，如果需要使用更多的原生功能或集成第三方的原生庫(kù)或組件，則仍然需要熟悉各個(gè)平臺(tái)的原生開發(fā)；再次，基于該類框架開發(fā)對(duì)開發(fā)生態(tài)依賴較重，插件大多來(lái)源于互聯(lián)網(wǎng)，很多插件的質(zhì)量難以保證，更新和版本沖突問(wèn)題時(shí)有發(fā)生，將會(huì)對(duì)開發(fā)造成一定影響。

1.3.2 基于H5 的混合開發(fā)模式

混合開發(fā)是指在原生應(yīng)用的基礎(chǔ)上利用 H5 技術(shù)制作界面，利用原生開發(fā)模塊實(shí)現(xiàn)系統(tǒng)功能調(diào)用的開發(fā)模式。代表的框架有 Apache Codova 和 Adobe PhoneGap 等，混合開發(fā)的優(yōu)點(diǎn)是直接采用前端開發(fā)人員熟悉的 H5 技術(shù)來(lái)制作界面，繼承B/S 開發(fā)模式的大部分優(yōu)點(diǎn)，且無(wú)需學(xué)習(xí)，開發(fā)效率比中間語(yǔ)言模式還高。但仍存在以下不足，目前前框架大部分都采用了單頁(yè)應(yīng)用的模式[2]，頁(yè)面間的過(guò)場(chǎng)動(dòng)畫由 H5 制作不能保證在低端設(shè)備上的交互體驗(yàn)。另外平臺(tái)能力交互部分同樣需要原生插件的支持，且中間語(yǔ)言框架的生態(tài)問(wèn)題它也同樣存在。

2 基于混合開發(fā)的企業(yè)內(nèi)部小程序平臺(tái)

原生開發(fā)、B/S 模式開發(fā)、跨平臺(tái)框架應(yīng)用開發(fā)側(cè)重不同、各有優(yōu)缺點(diǎn)，面對(duì)不同的應(yīng)用場(chǎng)景，選擇正確的開發(fā)方式十分重要。對(duì)于企業(yè)內(nèi)部應(yīng)用來(lái)說(shuō)，大部分企業(yè)將開發(fā)成本、可維護(hù)性、靈活性、健壯性、是否覆蓋使用場(chǎng)景等因素作為重要指標(biāo)。綜上分析可見，使用跨平臺(tái)框架，在開發(fā)效率、成本及用戶體驗(yàn)方面均存在較好的表現(xiàn)，但使用第三方框架仍然存在潛在的風(fēng)險(xiǎn)：

（1）框架無(wú)法自主，個(gè)性化需求通過(guò)修改或擴(kuò)展框架實(shí)現(xiàn)的可行性較低；

（2）使用權(quán)存在風(fēng)險(xiǎn)，修改開源協(xié)議事件易引發(fā)業(yè)界爭(zhēng)議[3]；

（3）原生交互依賴插件生態(tài)，開發(fā)質(zhì)量不可控。

為了解決上述問(wèn)題，集團(tuán)公司考慮對(duì)移動(dòng)應(yīng)用建設(shè)進(jìn)行統(tǒng)一管控，搭建自主可控的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，在統(tǒng)一規(guī)劃、統(tǒng)一管控模式下，進(jìn)行平臺(tái)基礎(chǔ)能力建設(shè)，各單位/業(yè)務(wù)基于平臺(tái)可專注業(yè)務(wù)邏輯實(shí)現(xiàn)高效快速建設(shè)，避免出現(xiàn)粗放式建設(shè)，為更好進(jìn)行集團(tuán)統(tǒng)一管理奠定技術(shù)基礎(chǔ)，提升企業(yè)資源整合及優(yōu)化。對(duì)比中間語(yǔ)言編譯模式框架和混合開發(fā)框架，可知混合開發(fā)可更好支撐集團(tuán)型企業(yè)移動(dòng)應(yīng)用建設(shè)需求，實(shí)現(xiàn)開發(fā)效率高、用戶體驗(yàn)佳、資源統(tǒng)籌率高。

2.1 設(shè)計(jì)目標(biāo)

我們把企業(yè)內(nèi)混合應(yīng)用開發(fā)的應(yīng)用稱為內(nèi)部小程序。小程序平臺(tái)的優(yōu)勢(shì)如下：

（1）支持跨平臺(tái)，目標(biāo)平臺(tái)有：Android、iOS、Windows、Macos、Linux、Web，滿足辦公場(chǎng)景常用平臺(tái)需求；

（2）混合開發(fā)，允許使用現(xiàn)有 web 技術(shù)，不限定UI 框架；

（3）支持一個(gè)框架多個(gè)應(yīng)用的模式，小程序支持預(yù)置安裝和應(yīng)用商店下載；

（4）小程序可按需下載自動(dòng)更新，版本升級(jí)簡(jiǎn)單高效，節(jié)省流量，減少對(duì)用戶的打擾；

（5）支持多用戶模式，不同賬號(hào)使用的小程序版本可以不同；

（6）小程序之間支持互相調(diào)用通訊；

（7）支持后臺(tái)任務(wù)，支持離線使用；

（8）設(shè)計(jì)可參照主流互聯(lián)網(wǎng)應(yīng)用，提高用戶體驗(yàn)。

2.2 架構(gòu)設(shè)計(jì)

小程序框架分為前臺(tái)應(yīng)用和后臺(tái)管理端兩部分，前臺(tái)由宿主應(yīng)用和SDK 組件組成，宿主應(yīng)用每個(gè)目標(biāo)平臺(tái)需要有一個(gè)獨(dú)立實(shí)現(xiàn)，SDK 組件為 Javascript 模塊，被小程序打包引用作為小程序和宿主應(yīng)用的橋梁，小程序通過(guò)調(diào)用 SDK 提供的接口和宿主應(yīng)用以及其他小程序進(jìn)行交互。后臺(tái)部分是小程序管理后臺(tái)并暴露接口給宿主應(yīng)用，提供小程序的發(fā)布、更新、權(quán)限管理等功能。整體架構(gòu)如圖1所示。

圖1：系統(tǒng)架構(gòu)

2.3 架構(gòu)和工作方式說(shuō)明

2.3.1 原生外殼

小程序需要運(yùn)行在原生外殼應(yīng)用中，對(duì)于不同的操作系統(tǒng)，平臺(tái)需要單獨(dú)開發(fā)不同的外殼應(yīng)用，對(duì)于移動(dòng)應(yīng)用可以使用平臺(tái)提供的原生語(yǔ)言進(jìn)行開發(fā)，對(duì)于 PC平臺(tái)和 Web 平臺(tái)，考慮代碼共用，可以采用 H5 技術(shù)制作界面的框架進(jìn)行開發(fā)，比如 Electron 或基于 Rust 的Tauri 框架。外殼應(yīng)用使用原生系統(tǒng)的 WebView 加載小程序頁(yè)面，初始化階段會(huì)注入原生接口到頁(yè)面空間，一個(gè)應(yīng)用可以包含多個(gè)小程序，一個(gè)小程序可以包含多個(gè)頁(yè)面。頁(yè)面間導(dǎo)航由外殼應(yīng)用負(fù)責(zé)，可以保證過(guò)場(chǎng)動(dòng)畫的流暢性。外殼程序可以打包若干預(yù)置的小程序，以滿足基本的使用，額外的小程序可以通過(guò)網(wǎng)絡(luò)接口下載后使用。

2.3.2 Web 端部署

小程序以 H5 技術(shù)為基礎(chǔ)實(shí)現(xiàn)，可以部署為 WEB應(yīng)用，利用 Electron 等桌面平臺(tái)開發(fā)避免使用前端頁(yè)面注入的方式添加對(duì) SDK 接口的支持，需采用后臺(tái)生成頁(yè)面的方式將接口封裝后發(fā)送至前端，從而實(shí)現(xiàn) PC 和Web 平臺(tái)一套代碼，多端運(yùn)行。

2.3.3 Javascript 橋接層接口

橋接層是原生系統(tǒng)模塊暴露給小程序頁(yè)面的調(diào)用入口，移動(dòng)平臺(tái)一般由系統(tǒng) WebView 提供注入接口，在PC 和 Web 端可以使用遠(yuǎn)程過(guò)程調(diào)用的方式注入接口。

2.3.4 SDK

SDK 封裝了對(duì)原生橋接層接口的調(diào)用，以及接口文檔的說(shuō)明，橋接層接口往往各個(gè)平臺(tái)的實(shí)現(xiàn)不同，提供的調(diào)用方式偏底層，SDK 負(fù)責(zé)把調(diào)用統(tǒng)一化，文檔化，小程序開發(fā)者不需要了解底層實(shí)現(xiàn)，只需要引入 SDK并了解 SDK 提供的接口即可[4]。

2.3.5 管理后臺(tái)

管理后臺(tái)提供小程序的注冊(cè)、發(fā)布、版本升級(jí)和權(quán)限管理的功能，結(jié)合企業(yè)內(nèi)用戶賬號(hào)體系及權(quán)限體系，實(shí)現(xiàn)小程序訪問(wèn)權(quán)限及版本升級(jí)管理。通過(guò)后臺(tái)管理配置實(shí)現(xiàn)小程序的發(fā)布主要功能，（包括但不限于）基本信息配置，包括配置應(yīng)用程序ID、小程序名稱、小程序標(biāo)簽等小程序發(fā)布基本信息；版本管理配置，包括配置小程序進(jìn)行版本升級(jí)；目標(biāo)應(yīng)用配置，包括控制小程序上架及下架；小程序管理員配置，包括配置小程序管理員、機(jī)構(gòu)白名單配置、用戶白名單配置等。

2.3.6 設(shè)計(jì)原則

小程序設(shè)計(jì)風(fēng)格應(yīng)貼近內(nèi)置應(yīng)用的設(shè)計(jì)，以不讓用戶啟動(dòng)本應(yīng)用后存在突兀感為宜。由于小程序支持在移動(dòng)端和 PC/Web 端使用，故界面設(shè)計(jì)應(yīng)盡量采用響應(yīng)式布局，同時(shí)支持小屏和大屏為宜。為了方便響應(yīng)式界面設(shè)計(jì)的調(diào)試，開發(fā)者可以使用桌面模擬器，來(lái)進(jìn)行開發(fā)、測(cè)試。

2.3.7 實(shí)現(xiàn)示例

實(shí)現(xiàn)一個(gè)待辦事項(xiàng)小程序，這個(gè)小程序由三個(gè)界面組成，主界面顯示一個(gè)列表，記錄要完成的事項(xiàng)。可通過(guò)添加按鈕創(chuàng)建新的待辦，點(diǎn)擊添加會(huì)打開新建待辦界面，可以錄入待辦內(nèi)容（支持附件：拍照、錄像、錄音），在列表上直接點(diǎn)擊待辦條目，可以打開待辦詳情，如果待辦完成，在詳情頁(yè)面點(diǎn)擊完成，可以修改這個(gè)待辦的狀態(tài)為已完成。涉及到的接口有：窗口管理API、數(shù)據(jù)庫(kù)接口API、后臺(tái)任務(wù)API、HTTP 接口、拍照、錄像、錄音接口等。小程序支持庫(kù)，可以提供和本機(jī)交互獲取拍照、錄音、錄像的功能，可以通過(guò)簡(jiǎn)單的調(diào)用 js 接口來(lái)實(shí)現(xiàn)基本需求，當(dāng)然也可以通過(guò)調(diào)用 H5 的媒體 API來(lái)實(shí)現(xiàn)一些特定需求。針對(duì)后臺(tái)任務(wù)（數(shù)據(jù)庫(kù)初始化和數(shù)據(jù)同步），非必要不要使用后臺(tái)腳本，因?yàn)榻^大多數(shù)業(yè)務(wù)在前臺(tái)頁(yè)面中就可以完成，只有很少數(shù)的需求會(huì)需要在后臺(tái)腳本中實(shí)現(xiàn)，比如離線數(shù)據(jù)同步等場(chǎng)景。實(shí)現(xiàn)新建待辦小程序示例如圖2所示。

圖2：新建待辦小程序示例

3 企業(yè)內(nèi)小程序開發(fā)平臺(tái)在某大型國(guó)企中的應(yīng)用

3.1 背景介紹

某能源企業(yè)建設(shè)的集團(tuán)移動(dòng)辦公應(yīng)用系統(tǒng)目標(biāo)是作為移動(dòng)辦公門戶，提供有即時(shí)通訊、業(yè)務(wù)審批、新聞資訊、會(huì)議中心等服務(wù)以及上百個(gè)業(yè)務(wù)系統(tǒng)的接入，為全集團(tuán)用戶提供服務(wù)。系統(tǒng)從2016年開始建設(shè)，起步初期使用 ReactNative 開發(fā)移動(dòng)應(yīng)用，快速搭建系統(tǒng)的雛形，并持續(xù)維護(hù)升級(jí)，隨著接入業(yè)務(wù)數(shù)量的增長(zhǎng)，以及后續(xù)維護(hù)、集成工作的增多，ReactNative 的缺點(diǎn)逐漸暴露，最終決定遷移到混合開發(fā)模式并自主構(gòu)建小程序開發(fā)平臺(tái)。小程序平臺(tái)建設(shè)周期1年左右，提供了 iOS、Android、Web、Windows、Linux、MacOS 等多種終端應(yīng)用，完全覆蓋了用戶的全部使用場(chǎng)景。

3.2 小程序框架的意義及價(jià)值

在采用小程序平臺(tái)改造后，系統(tǒng)界面全面改版，用戶體驗(yàn)大幅提升。該框架為企業(yè)自主研發(fā)，框架代碼自主可控，且與原生模塊集成的難度大幅降低。傳統(tǒng)混合開發(fā)模式，第三方系統(tǒng)采用標(biāo)準(zhǔn)接口或H5 接入，一方面無(wú)法滿足個(gè)性化需求，另一方面存在跨平臺(tái)開發(fā)難度搞，頁(yè)面設(shè)計(jì)不統(tǒng)一，性能較差問(wèn)題。基于小程序平臺(tái)，第三方業(yè)務(wù)系統(tǒng)基于該框架實(shí)現(xiàn)開發(fā)模式統(tǒng)一，且足夠靈活，可以滿足業(yè)務(wù)個(gè)性化需求，并可根據(jù)業(yè)務(wù)需求選擇集成到門戶應(yīng)用或行成獨(dú)立應(yīng)用單獨(dú)分發(fā)。經(jīng)測(cè)算，對(duì)比前后的接入方式，平均一個(gè)系統(tǒng)節(jié)省的時(shí)間和勞動(dòng)力成本大約在50 萬(wàn)元左右，極大的提升了經(jīng)濟(jì)效益。

4 結(jié)語(yǔ)

采用小程序平臺(tái)是企業(yè)開發(fā)內(nèi)部系統(tǒng)的有效手段，無(wú)論開發(fā)效率還是全平臺(tái)可用的特點(diǎn)，都極為適合企業(yè)辦公應(yīng)用，尤其是有移動(dòng)辦公需求的業(yè)務(wù)建設(shè)，隨著工業(yè)互聯(lián)網(wǎng)的推進(jìn)，更多的一線生產(chǎn)系統(tǒng)也存在大量的移動(dòng)終端使用場(chǎng)景，利用小程序平臺(tái)來(lái)建設(shè)這些應(yīng)用無(wú)疑可以為企業(yè)節(jié)省大量資金，且更為靈活，適應(yīng)性強(qiáng)。小程序平臺(tái)還可結(jié)合低代碼平臺(tái)共同打造更為輕量、高效的開發(fā)平臺(tái)，未來(lái)還有很大的演進(jìn)空間等待我們的探索?；谠撘苿?dòng)應(yīng)用框架的研究，我們更好的將移動(dòng)互聯(lián)網(wǎng)應(yīng)用于企業(yè)管理，加強(qiáng)管理信息化及生產(chǎn)信息化系統(tǒng)的移動(dòng)應(yīng)用建設(shè)，提升辦公效率及用戶體驗(yàn)，為集團(tuán)數(shù)字化轉(zhuǎn)型奠定基礎(chǔ)。