基礎(chǔ)軟件平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架的設(shè)計(jì)與實(shí)現(xiàn)

文/陳雄華 張謀東 孫照波

1 引言

目前移動(dòng)平臺(tái)開(kāi)發(fā)主要是APP開(kāi)發(fā)、移動(dòng)WEB開(kāi)發(fā)、小程序的開(kāi)發(fā)。APP主流開(kāi)發(fā)運(yùn)行于Android操作系統(tǒng)和iOS兩大操作系統(tǒng)，分別使用兩大操作系統(tǒng)提供的技術(shù)棧進(jìn)行開(kāi)發(fā)；移動(dòng)WEB開(kāi)發(fā)使用傳統(tǒng)WEB技術(shù)棧。小程序開(kāi)發(fā)運(yùn)行于各大廠商移動(dòng)宿主APP平臺(tái)上，目前分別有微信小程序、頭條小程序、支付寶小程序、百度小程序、QQ小程序。各大廠商的技術(shù)棧和開(kāi)發(fā)工具不統(tǒng)一，差異明顯。

當(dāng)需要開(kāi)發(fā)一個(gè)需要發(fā)布到不同平臺(tái)的應(yīng)用時(shí)，如果不使用跨平臺(tái)開(kāi)發(fā)技術(shù)，將需要在多個(gè)端使用不同的技術(shù)棧分別進(jìn)行開(kāi)發(fā)和發(fā)布。慶幸的是，已經(jīng)有一些移動(dòng)跨平臺(tái)技術(shù)可供選擇，可以最大程度上做到編寫(xiě)同一套代碼和功能，發(fā)布到不同的移動(dòng)平臺(tái)上！

我們?cè)谶x擇合適移動(dòng)跨平臺(tái)的基礎(chǔ)上，根據(jù)自身業(yè)務(wù)場(chǎng)景和已有應(yīng)用基礎(chǔ)平臺(tái)平臺(tái)功能，設(shè)計(jì)了通用整合方案，形成一套基礎(chǔ)軟件平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架，滿(mǎn)足移動(dòng)跨平臺(tái)開(kāi)發(fā)的需求，提升移動(dòng)開(kāi)發(fā)效率。當(dāng)需要開(kāi)發(fā)一個(gè)新的移動(dòng)應(yīng)用時(shí)，只需在移動(dòng)應(yīng)用開(kāi)發(fā)框架的基礎(chǔ)上進(jìn)行業(yè)務(wù)模塊開(kāi)發(fā)，即可實(shí)現(xiàn)多平臺(tái)的應(yīng)用發(fā)布。

2 總體設(shè)計(jì)思路

在基礎(chǔ)軟件平臺(tái)的基礎(chǔ)上，使用uni-app作為平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架，通過(guò)平臺(tái)端和移動(dòng)端的功能模塊設(shè)計(jì)和開(kāi)發(fā)，形成一套基礎(chǔ)軟件平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架，使基于平臺(tái)業(yè)務(wù)的多端應(yīng)用開(kāi)發(fā)更加容易。如圖1所示。

圖1

整個(gè)移動(dòng)應(yīng)用開(kāi)發(fā)框架包括了平臺(tái)端和移動(dòng)端兩部分，平臺(tái)端功能包含了移動(dòng)應(yīng)用配置和移動(dòng)開(kāi)放開(kāi)發(fā)接口。移動(dòng)端包括平臺(tái)對(duì)接、通用頁(yè)面組件及可用的模板頁(yè)面，同時(shí)還提供了移動(dòng)開(kāi)發(fā)的開(kāi)發(fā)規(guī)范。項(xiàng)目開(kāi)發(fā)者可以直接通過(guò)配置化配置定制頁(yè)面組件，也可以在模板頁(yè)面基礎(chǔ)上進(jìn)行定制化開(kāi)發(fā)，即可快速開(kāi)發(fā)出與基礎(chǔ)軟件平臺(tái)對(duì)接的跨平臺(tái)移動(dòng)應(yīng)用出來(lái)。

3 平臺(tái)端功能設(shè)計(jì)

平臺(tái)端主要負(fù)責(zé)多端應(yīng)用的注冊(cè)、權(quán)限及監(jiān)管，同時(shí)提供一套供移動(dòng)端使用的平臺(tái)開(kāi)發(fā)接口，移動(dòng)端通過(guò)平臺(tái)開(kāi)發(fā)接口實(shí)現(xiàn)與平臺(tái)的對(duì)接整合。

3.1 移動(dòng)應(yīng)用管理

平臺(tái)端需要對(duì)移動(dòng)應(yīng)用的生命周期（注冊(cè)-發(fā)布-升級(jí)）進(jìn)行管理。在移動(dòng)應(yīng)用運(yùn)行時(shí)，平臺(tái)端需要管理應(yīng)用的權(quán)限和菜單，對(duì)接移動(dòng)應(yīng)用和第三方服務(wù)。同時(shí)，開(kāi)發(fā)框架還需要對(duì)移動(dòng)應(yīng)用的運(yùn)行情況進(jìn)行監(jiān)控。模塊包括應(yīng)用注冊(cè)管理、菜單管理、應(yīng)用權(quán)限管理、應(yīng)用對(duì)接管理、版本升級(jí)管理、應(yīng)用運(yùn)行管理。

3.1.1 應(yīng)用注冊(cè)管理

為了實(shí)現(xiàn)移動(dòng)應(yīng)用的生命周期管理及移動(dòng)應(yīng)用生產(chǎn)環(huán)境客戶(hù)具化配置，基礎(chǔ)平臺(tái)需要對(duì)移動(dòng)應(yīng)用進(jìn)行統(tǒng)一的注冊(cè)管理，為每個(gè)應(yīng)用提供平臺(tái)唯一ID和名稱(chēng)。應(yīng)用注冊(cè)管理包括移動(dòng)應(yīng)用ID、名稱(chēng)、描述等基本信息，還包括生產(chǎn)環(huán)境下應(yīng)用對(duì)接的具體配置信息，如對(duì)于微信應(yīng)用來(lái)說(shuō)，需要配置微信公眾號(hào)ID、信息加密密鑰，對(duì)于微信企業(yè)號(hào)應(yīng)用來(lái)說(shuō)，需要配置通訊錄同步方式、通訊錄消息重密鑰。

3.1.2 應(yīng)用菜單管理

每個(gè)應(yīng)用都有一套對(duì)應(yīng)的功能菜單，為實(shí)現(xiàn)應(yīng)用功能名稱(chēng)、圖標(biāo)、地址等信息的靈活調(diào)整，移動(dòng)應(yīng)用管理后臺(tái)提供了應(yīng)用菜單注冊(cè)的功能。移動(dòng)端通過(guò)菜單組件通過(guò)指定菜單分枝的編碼即可展現(xiàn)特定分枝的菜單。此外，可通過(guò)基礎(chǔ)軟件平臺(tái)的用戶(hù)崗位權(quán)限進(jìn)行不同崗位不同應(yīng)用菜單權(quán)限的分配，實(shí)現(xiàn)移動(dòng)應(yīng)用人員權(quán)限的平臺(tái)總控。

3.1.3 應(yīng)用對(duì)接管理

當(dāng)移動(dòng)應(yīng)用發(fā)布成公眾號(hào)/企業(yè)號(hào)應(yīng)用時(shí)，需要集成在微信的環(huán)境中，平臺(tái)端就作為移動(dòng)應(yīng)用和微信環(huán)境中間的橋梁，一方面與微信環(huán)境進(jìn)行對(duì)接功能，一方面對(duì)接移動(dòng)應(yīng)用保證應(yīng)用能在微信環(huán)境下正常運(yùn)行。

公眾號(hào)/企業(yè)號(hào)應(yīng)用入口是基于微信的3×5經(jīng)典菜單，需要點(diǎn)擊微信的3×5經(jīng)典菜單，才能進(jìn)入我們的移動(dòng)應(yīng)用，所以平臺(tái)端支持和微信服務(wù)器進(jìn)行交互，來(lái)創(chuàng)建和配置微信3×5菜單。

企業(yè)號(hào)通訊錄和平臺(tái)系統(tǒng)用戶(hù)是獨(dú)立的兩套用戶(hù)數(shù)據(jù)，需要通過(guò)通訊錄同步建立兩者的關(guān)聯(lián)。這樣，當(dāng)企業(yè)號(hào)用戶(hù)進(jìn)入企業(yè)號(hào)的應(yīng)用時(shí)即可創(chuàng)建平臺(tái)的用戶(hù)會(huì)話(huà)，完成用戶(hù)權(quán)限的控制。

3.1.4 版本升級(jí)管理

當(dāng)移動(dòng)應(yīng)用可發(fā)布成APP端應(yīng)用時(shí)，當(dāng)版本更新時(shí)手機(jī)端需要重新安裝APP應(yīng)用，因此平臺(tái)提供了移動(dòng)應(yīng)用版本升級(jí)的管理功能。手機(jī)端本地應(yīng)用和平臺(tái)端都存有當(dāng)前移動(dòng)應(yīng)用的版本號(hào)，如果沒(méi)有升級(jí)的需求，那么手機(jī)端本地應(yīng)用和平臺(tái)端的版本號(hào)是一致的。當(dāng)需要升級(jí)時(shí)，平臺(tái)端配置移動(dòng)應(yīng)用的新版本號(hào)，并上傳安裝包或者應(yīng)用商店的鏈接（鏈接指向發(fā)布到Android或者iOS應(yīng)用商店的安裝程序）。手機(jī)端本地應(yīng)用不斷和平臺(tái)端的版本號(hào)進(jìn)行對(duì)比，發(fā)現(xiàn)版本號(hào)不一致時(shí)，就從平臺(tái)端獲取應(yīng)用安裝的地址，進(jìn)行重新安裝。

3.1.5 應(yīng)用監(jiān)控管理

移動(dòng)應(yīng)用在用戶(hù)使用和交互的過(guò)程中，會(huì)產(chǎn)生用戶(hù)行為和使用軌跡的信息，這些信息有助于分析移動(dòng)應(yīng)用、功能使用情況和分析用戶(hù)行為。移動(dòng)應(yīng)用在運(yùn)行期間，向平臺(tái)端發(fā)送用戶(hù)進(jìn)行登錄、菜單點(diǎn)擊、功能使用等操作信息，平臺(tái)端將信息分類(lèi)進(jìn)行存儲(chǔ)，并提供統(tǒng)計(jì)分析頁(yè)面來(lái)監(jiān)控應(yīng)用數(shù)據(jù)。

3.2 平臺(tái)開(kāi)放接口

平臺(tái)端開(kāi)放接口給移動(dòng)端調(diào)用，來(lái)完成基本信息的交互和基礎(chǔ)功能的實(shí)現(xiàn)。包括認(rèn)證服務(wù)、用戶(hù)管理服務(wù)、會(huì)話(huà)保持、用戶(hù)菜單權(quán)限服務(wù)、日志上報(bào)服務(wù)、應(yīng)用升級(jí)等模塊。

3.2.1 登錄認(rèn)證服務(wù)

登錄的用戶(hù)來(lái)源于平臺(tái)端用戶(hù)信息，平臺(tái)端作為移動(dòng)端后臺(tái)管理用戶(hù)信息。移動(dòng)應(yīng)用用戶(hù)登錄調(diào)用平臺(tái)端開(kāi)放接口進(jìn)行認(rèn)證。登錄方式應(yīng)支持用戶(hù)名/密碼登錄和手機(jī)/驗(yàn)證碼登錄，其中敏感信息密碼進(jìn)行加密處理。

3.2.2 用戶(hù)管理服務(wù)

登錄用戶(hù)有時(shí)會(huì)有忘記密碼、修改密碼、修改用戶(hù)信息的需求，開(kāi)發(fā)框架移動(dòng)端應(yīng)支持相應(yīng)功能，平臺(tái)端應(yīng)提供相應(yīng)開(kāi)放接口來(lái)管理相關(guān)信息。當(dāng)移動(dòng)應(yīng)用發(fā)布成公眾號(hào)或者企業(yè)應(yīng)用的時(shí)候，應(yīng)用的用戶(hù)來(lái)源于微信用戶(hù)而非平臺(tái)端系統(tǒng)用戶(hù)，這就需要將平臺(tái)端系統(tǒng)用戶(hù)和微信用戶(hù)進(jìn)行關(guān)聯(lián)綁定。公眾號(hào)的用戶(hù)綁定需要移動(dòng)端主動(dòng)發(fā)起，調(diào)用平臺(tái)端提供的接口將微信用戶(hù)openId與平臺(tái)端系統(tǒng)用戶(hù)綁定。而企業(yè)號(hào)的用戶(hù)綁定由平臺(tái)端手動(dòng)操作完成，無(wú)需移動(dòng)端調(diào)用接口實(shí)現(xiàn)。當(dāng)微信用戶(hù)和平臺(tái)端用戶(hù)綁定后，就可以以平臺(tái)用戶(hù)的身份使用公眾號(hào)或企業(yè)號(hào)應(yīng)用。

3.2.3 會(huì)話(huà)保持

用戶(hù)登錄后，平臺(tái)端會(huì)生成該用戶(hù)的會(huì)話(huà)信息和上下文，并將會(huì)話(huà)信息提供給移動(dòng)端，這樣移動(dòng)端就持有當(dāng)前用戶(hù)的會(huì)話(huà)信息，后續(xù)向服務(wù)器發(fā)送的請(qǐng)求就可以攜帶當(dāng)前用戶(hù)會(huì)話(huà)信息，平臺(tái)端會(huì)根據(jù)會(huì)話(huà)上下文關(guān)聯(lián)當(dāng)前用戶(hù)，提供基于當(dāng)前用戶(hù)的各種數(shù)據(jù)和操作。

3.2.4 用戶(hù)菜單權(quán)限服務(wù)

為了讓移動(dòng)端的菜單在運(yùn)行期可動(dòng)態(tài)修改菜單信息，如修改菜單標(biāo)題或圖標(biāo)、刪除菜單、添加菜單等操作。所有移動(dòng)端的菜單信息全部配置在平臺(tái)端，就可以實(shí)現(xiàn)運(yùn)行期動(dòng)態(tài)修改菜單信息。移動(dòng)端在運(yùn)行期間，所有菜單信息都通過(guò)平臺(tái)端提供的接口進(jìn)行獲取，并根據(jù)當(dāng)前用戶(hù)角色和權(quán)限對(duì)菜單進(jìn)行過(guò)濾。

3.2.5 日志上報(bào)服務(wù)

平臺(tái)端提供日志上報(bào)接口，可以用來(lái)統(tǒng)計(jì)應(yīng)用使用的情況。主要采集用戶(hù)登錄和菜單使用的相關(guān)數(shù)據(jù)。

平臺(tái)端會(huì)收集用戶(hù)當(dāng)前應(yīng)用和機(jī)器信息，用作統(tǒng)計(jì)和相關(guān)功能的使用。比如統(tǒng)計(jì)Android和iOS用戶(hù)的分布和使用，clientId用來(lái)注冊(cè)APP推送等。

3.2.6 應(yīng)用升級(jí)

當(dāng)移動(dòng)應(yīng)用發(fā)布到APP端，是基于本地應(yīng)用的C/S模式，當(dāng)應(yīng)用需要升級(jí)時(shí)，需要重新安裝本地應(yīng)用。是否升級(jí)的判斷基于版本號(hào)，移動(dòng)應(yīng)用調(diào)用開(kāi)放接口獲取應(yīng)用當(dāng)前版本號(hào)和應(yīng)用安裝鏈接，與移動(dòng)應(yīng)用本地版本號(hào)進(jìn)行對(duì)比。發(fā)現(xiàn)有新版本后，通過(guò)應(yīng)用安裝鏈接來(lái)重新安裝應(yīng)用。

4 移動(dòng)端功能設(shè)計(jì)

移動(dòng)端框架基于uni-app技術(shù)棧進(jìn)行功能擴(kuò)展，滿(mǎn)足跨平臺(tái)和統(tǒng)一技術(shù)棧的需求。作為開(kāi)發(fā)框架，需要為實(shí)際開(kāi)發(fā)提供基礎(chǔ)的模板和功能，這樣業(yè)務(wù)系統(tǒng)的移動(dòng)端開(kāi)發(fā)就可以在此基礎(chǔ)上進(jìn)行二次開(kāi)發(fā)，只需開(kāi)發(fā)與業(yè)務(wù)直接相關(guān)的功能。發(fā)框架還需要為實(shí)際開(kāi)發(fā)提供包裝過(guò)的CSS樣式和頁(yè)面快速開(kāi)發(fā)的例子頁(yè)面，業(yè)務(wù)系統(tǒng)移動(dòng)端開(kāi)發(fā)可以參考該項(xiàng)目的頁(yè)面效果，找到相應(yīng)源碼拷貝使用，大大提升頁(yè)面開(kāi)發(fā)效率。

業(yè)務(wù)系統(tǒng)開(kāi)發(fā)就有了開(kāi)發(fā)框架的支持，在實(shí)際的業(yè)務(wù)系統(tǒng)移動(dòng)端開(kāi)發(fā)中，將開(kāi)發(fā)框架源碼拷貝到自己業(yè)務(wù)的移動(dòng)端項(xiàng)目中進(jìn)行二次開(kāi)發(fā)。在開(kāi)發(fā)中頁(yè)面部分還可以參考開(kāi)發(fā)框架中的例子頁(yè)面快速開(kāi)發(fā)頁(yè)面，在功能開(kāi)發(fā)中可以參考開(kāi)發(fā)框架中基礎(chǔ)功能的實(shí)現(xiàn)快速開(kāi)發(fā)功能。

4.1 平臺(tái)接口對(duì)接

平臺(tái)端接口對(duì)接模塊基于HTTP請(qǐng)求，與平臺(tái)端的服務(wù)接口進(jìn)行對(duì)接，把功能對(duì)接和數(shù)據(jù)處理邏輯封裝成相應(yīng)JavaScript的API，簡(jiǎn)單調(diào)用API即可完成復(fù)雜的接口調(diào)用。

4.2 開(kāi)發(fā)規(guī)范管理

開(kāi)發(fā)框架首先要對(duì)實(shí)際業(yè)務(wù)移動(dòng)端開(kāi)發(fā)提供編程標(biāo)準(zhǔn)規(guī)范，使代碼能夠統(tǒng)一標(biāo)準(zhǔn)，方便管理，提高可讀性和開(kāi)發(fā)效率。在目錄規(guī)范中，需要規(guī)定框架的代碼放在同一目錄中，和業(yè)務(wù)移動(dòng)端開(kāi)發(fā)的代碼進(jìn)行解耦，方便升級(jí)和源碼組織。業(yè)務(wù)代碼也需按照開(kāi)發(fā)框架規(guī)范的目錄進(jìn)行組織，方便源碼的管理。在系統(tǒng)變量管理（vuex）中，開(kāi)發(fā)框架需要規(guī)范系統(tǒng)變量的組織方式，業(yè)務(wù)移動(dòng)端開(kāi)發(fā)遵循規(guī)范方便系統(tǒng)變量的統(tǒng)一組織管理。在api規(guī)范中，開(kāi)發(fā)框架需要規(guī)范api文件和方法的組織方式，以及需要放置于相應(yīng)目錄下，方便代碼管理和提升開(kāi)發(fā)效率。

uni-app有提供全局的樣式風(fēng)格，但是樣式不夠美觀，不夠豐富。所以，開(kāi)發(fā)框架需要提供一套更美觀，更豐富的統(tǒng)一樣式風(fēng)格的css，并提供足夠的css和例子頁(yè)面展現(xiàn)。業(yè)務(wù)移動(dòng)端開(kāi)發(fā)可以使用開(kāi)發(fā)框架提供的css，參考例子頁(yè)面，快速開(kāi)發(fā)美觀、風(fēng)格統(tǒng)一的頁(yè)面。

4.3 默認(rèn)模板頁(yè)面

開(kāi)發(fā)框架需要提供一些基礎(chǔ)頁(yè)面的模板實(shí)現(xiàn)，使業(yè)務(wù)移動(dòng)端開(kāi)發(fā)只需關(guān)注業(yè)務(wù)功能的開(kāi)發(fā)。模板頁(yè)面包括登錄頁(yè)、主頁(yè)和菜單加載、微信綁定頁(yè)面、消息中心、個(gè)人中心等的默認(rèn)頁(yè)面和功能實(shí)現(xiàn)，業(yè)務(wù)系統(tǒng)移動(dòng)端做二次開(kāi)發(fā)時(shí)可以在默認(rèn)實(shí)現(xiàn)上進(jìn)行微調(diào)和功能定制擴(kuò)展實(shí)現(xiàn)。

4.4 頁(yè)面組件

頁(yè)面組件是可復(fù)用的vue組件，封裝了可復(fù)用的頁(yè)面展現(xiàn)和功能。開(kāi)發(fā)框架提供了一些可復(fù)用基礎(chǔ)功能的頁(yè)面組件，包括圖片上傳、加載loading、導(dǎo)航欄、菜單組件、菜單搜索組件、流程待辦列表、流程流轉(zhuǎn)等。業(yè)務(wù)系統(tǒng)移動(dòng)端開(kāi)發(fā)頁(yè)面功能時(shí)，可以直接使用這些基礎(chǔ)組件直接復(fù)用組件的展現(xiàn)和功能。

5 結(jié)語(yǔ)

本文對(duì)移動(dòng)應(yīng)用開(kāi)發(fā)框架進(jìn)行了介紹和設(shè)計(jì)剖析，指出了移動(dòng)應(yīng)用開(kāi)發(fā)框架產(chǎn)生的原因和最終的目的。通過(guò)移動(dòng)應(yīng)用開(kāi)發(fā)框架，解決了跨平臺(tái)的難題，統(tǒng)一了開(kāi)發(fā)的技術(shù)棧，集成了框架該有的基礎(chǔ)功能，為業(yè)務(wù)系統(tǒng)移動(dòng)端開(kāi)發(fā)提供了集成解決方案。在移動(dòng)應(yīng)用開(kāi)發(fā)框架的基礎(chǔ)上，進(jìn)行二次開(kāi)發(fā)和參考，可以大大提升開(kāi)發(fā)效率，快速開(kāi)發(fā)高質(zhì)量的業(yè)務(wù)移動(dòng)應(yīng)用。