基于uni-app框架的校園極簡生活跨平臺移動應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)

廖黎莉 王磊 李太 武璐瑜

摘 要：為了在大學(xué)校園推行極簡主義生活方式，文章以uni-app跨平臺移動UI框架為技術(shù)基礎(chǔ)，開發(fā)了一款可以發(fā)布在Android、IOS、H5以及微信小程序等多平臺的應(yīng)用程序。通過對該系統(tǒng)的部署與應(yīng)用，為今后開展與校園極簡生活有關(guān)的實(shí)踐提供了技術(shù)支持。

關(guān)鍵詞：uni-app框架;跨平臺移動應(yīng)用開發(fā);校園極簡生活

0 ? 引言

隨著移動應(yīng)用的普及，我們的日常生活正在悄無聲息地發(fā)生著改變，它以其獨(dú)有的方式扮演著各種角色，并嵌入我們生活的方方面面。而當(dāng)前移動應(yīng)用的種類也從單純的APP應(yīng)用轉(zhuǎn)變?yōu)锳ndroid、IOS或者小程序、H5等多種類型。若使用原生方式開發(fā)應(yīng)用，則需要采用不同的生產(chǎn)環(huán)境使用不同的語言進(jìn)行開發(fā)，此外還要在不同的測試和應(yīng)用環(huán)境中進(jìn)行功能適配，這樣不但開發(fā)成本高、開發(fā)效率低，同時(shí)也會給用戶帶來不好的使用體驗(yàn)，因此就有了跨平臺應(yīng)用開發(fā)的需求。

2014年年底人民日報(bào)的一篇名為《極簡主義生活方式》的文章在社會上引起強(qiáng)烈反響，人們開始熱烈討論極簡主義的益處，以及如何踐行極簡主義。事實(shí)上極簡主義不是簡單強(qiáng)調(diào)減少物質(zhì)的占有，而是在解決問題時(shí)將極簡的思維貫穿于決策到執(zhí)行的完整過程。對于當(dāng)代大學(xué)生的校園生活而言，極簡主義也是一劑良藥，可以幫助他們樹立理性的消費(fèi)觀，正確的時(shí)間觀念，養(yǎng)成良好的時(shí)間管理習(xí)慣和學(xué)習(xí)生活習(xí)慣。而且智能移動設(shè)備是他們使用最為頻繁、普及率最高的一種信息交流工具，考慮到移動設(shè)備種類繁多，移動應(yīng)用需求也各式各樣，因此開發(fā)一款倡導(dǎo)校園極簡生活的跨平臺移動應(yīng)用程序?qū)υ诖髮W(xué)生中推廣宣和傳極簡主義生活方式具有非常重要的意義[1]。

1 ? uni-app框架與其他跨平臺移動應(yīng)用開發(fā)框架的對比

跨平臺移動應(yīng)用開發(fā)在解決方案上可以分為基于自繪UI的混合式開發(fā)技術(shù)和基于JS銜接的混合式開發(fā)技術(shù)。其中基于自繪UI的混合式開發(fā)技術(shù)的典型代表則是Flutter，而基于JS銜接的混合式開發(fā)技術(shù)的典型代表是React Native和uni-app。

Flutter是Google推出的開源UI工具包，開發(fā)者可以通過Dart語言開發(fā)APP，幫助開發(fā)者通過一套代碼庫高效構(gòu)建跨平臺、高性能的應(yīng)用。Flutter提供了豐富的組件、接口，開發(fā)者可以很快地為Flutter添加原生擴(kuò)展。但是開發(fā)者要先學(xué)習(xí)Dart，在開發(fā)過程中要與原生協(xié)作，這些無疑都增加了技術(shù)學(xué)習(xí)成本和難度[2]。

React Native是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物，支持IOS和Android兩大平臺。React Native使用Javascript語言以及CSS來開發(fā)移動應(yīng)用，因此熟悉Web前端開發(fā)的技術(shù)人員比較容易通過它進(jìn)入移動應(yīng)用開發(fā)領(lǐng)域。但是開發(fā)者要先學(xué)習(xí)React，在開發(fā)過程中要與原生協(xié)作，這些要求也增加了其技術(shù)學(xué)習(xí)成本和難度。

uni-app是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架，可發(fā)布到IOS、Android、H5以及微信小程序、百度小程序、頭條小程序、支付寶小程序等多個(gè)平臺，跨平臺能力極強(qiáng)。而React Native和 Flutter 在APP的開發(fā)上，針對IOS和Android需要使用兩套UI代碼，而uni-app的開發(fā)者只需要編寫一套代碼就可以發(fā)布上多個(gè)平臺上。基于JS銜接的混合式開發(fā)技術(shù)在性能上雖不及Flutter，但由于uni-app只需要學(xué)習(xí)Vue，而且可以不用與原生協(xié)作，所以學(xué)習(xí)成本和難度是最低的。另外，作為一款國產(chǎn)軟件，uni-app的社區(qū)非常活躍，插件資源也極為豐富，能較好地滿足日常開發(fā)的需求[3]。

綜上，uni-app框架學(xué)習(xí)成本低，上手速度快，跨平臺能力強(qiáng)，生態(tài)繁榮，鑒于上述原因，本項(xiàng)目基于uni-app框架創(chuàng)建以校園極簡生活為主題的跨平臺移動應(yīng)用程序。

2 校園極簡生活跨平臺移動應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)

2.1 框架結(jié)構(gòu)設(shè)計(jì)

系統(tǒng)結(jié)構(gòu)采用前后端分離的開發(fā)模式。前端架構(gòu)方案基于MVVM設(shè)計(jì)模式，采用基于Vue規(guī)范的uni-app跨平臺應(yīng)用框架，通過HBuilderX進(jìn)行開發(fā)、調(diào)試和發(fā)布。后端架構(gòu)方案基于MVC設(shè)計(jì)模式，采用基于PHP語言的PHPThink5.1框架，通過VSCode進(jìn)行開發(fā)和調(diào)試。服務(wù)器部署在阿里云上，操作系統(tǒng)為CentOS，通過寶塔面板在云服務(wù)器上部署Nginx的Web服務(wù)器和MySQL的數(shù)據(jù)庫服務(wù)器。具體框架結(jié)構(gòu)如圖1所示。

2.2 功能模塊設(shè)計(jì)

本系統(tǒng)是面向?qū)W生開發(fā)的，在充分考慮學(xué)生所持有的智能移動設(shè)備的差異性，保證能夠在大學(xué)生中推行極簡主義思想的前提下進(jìn)行設(shè)計(jì)和開發(fā)，其主要功能模塊包括：登錄注冊、分類瀏覽、信息檢索、信息發(fā)布、信息互動、個(gè)人管理[4-8]。

（1）登錄注冊。對于已注冊用戶允許其采用用戶名、手機(jī)號碼和郵箱方式進(jìn)行登錄，對于未注冊用戶允許其采用手機(jī)號碼直接注冊。未注冊用戶只能瀏覽和檢索，無法進(jìn)行信息發(fā)布和信息互動。

（2）分類瀏覽。用戶根據(jù)信息類別實(shí)現(xiàn)分類瀏覽，在瀏覽的過程中可以對感興趣的內(nèi)容點(diǎn)贊或者踩踏，也可以對其發(fā)表評論。本系統(tǒng)的信息類別主要為物品交換、時(shí)間管理、學(xué)習(xí)充電、健康環(huán)保、心靈減壓。

物品交換：用戶在此發(fā)布自己的二手生活物品或者學(xué)習(xí)物品的需求及饋贈信息，學(xué)會掌控消費(fèi)，拒絕浪費(fèi)。

時(shí)間管理：用戶在此交流時(shí)間管理的一些方法和技巧，學(xué)會將精力專注在重要的事情上，同時(shí)也避免碎片時(shí)間被浪費(fèi)。

學(xué)習(xí)充電：用戶在此分享一些好的學(xué)習(xí)資源和學(xué)習(xí)工具，學(xué)會用最低的成本獲得最好的學(xué)習(xí)效果。

健康環(huán)保：用戶在此探討健康環(huán)保的生活方式，學(xué)會珍愛地球資源，減少環(huán)境污染。

心靈減壓：用戶在此交流精神減壓的方法和技巧，學(xué)會保持平常心態(tài)，不隨波逐流。

（3）信息檢索。用戶根據(jù)自己的需要輸入關(guān)鍵字進(jìn)行搜索，以此查找自己感興趣的內(nèi)容。

（4）信息發(fā)布。用戶針對不同的主題分類發(fā)布不同的信息，信息內(nèi)容可以包含文字和圖片。

（5）關(guān)注互動。用戶在此查找用戶、查看好友列表并與好友進(jìn)行關(guān)注互動和私信互動。

查找用戶：通過在搜索框中輸入用戶名查找用戶信息，將其加入關(guān)注列表或者黑名單列表。

查看好友列表：查看用戶的好友，用戶關(guān)注的其他用戶，以及用戶的粉絲。

關(guān)注互動：凡是被加入關(guān)注列表的其他用戶，其動態(tài)信息都會推送給當(dāng)前用戶，凡是被加入黑名單的其他用戶，其動態(tài)信息都會在推送時(shí)被過濾。

私信互動：被搜索的用戶只要未被加入黑名單，即使是陌生人也可以聊天。聊天部分為基于TCP長連接的即時(shí)通信，即使用戶當(dāng)前不在線，也不影響消息的發(fā)送和接收。

（6）個(gè)人管理。查看并修改自己的頭像、昵稱等基本資料，設(shè)置賬號密碼及手機(jī)、郵箱等的綁定，查看近期瀏覽歷史和互動概況??信息。

2.3? 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)后端采用經(jīng)典的MVC設(shè)計(jì)模式，M就是模型Model，V就是視圖View，C就是控制器Controller。系統(tǒng)前端所采用的MVVM設(shè)計(jì)模式主要關(guān)注視圖層的分離，它將“數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心，因此在View和Model之間沒有聯(lián)系，通過ViewModel進(jìn)行交互，具體實(shí)現(xiàn)時(shí)，V對應(yīng)Vue實(shí)例所控制的元素區(qū)域，VM對應(yīng)Vue實(shí)例，M對應(yīng)Vue實(shí)例里的data值。本系統(tǒng)前后端協(xié)作的處理流程如圖2所示。

由于私信互動需要客戶端與客戶端之間通信，因此本系統(tǒng)在PHPThink5.1的基礎(chǔ)上使用GatewayWorker和websocket來實(shí)現(xiàn)基于TCP的長連接，客戶端不直接與Gateway通信，不處理任何業(yè)務(wù)邏輯，僅作為單向推送通道，通過請求thinkPHP5.1控制器轉(zhuǎn)發(fā)消息到GatewayWorker中，從而實(shí)現(xiàn)用戶與用戶之間的私信互動功能。

2.4? 系統(tǒng)部署

uni-app的開發(fā)者只需要編寫一套代碼就可以發(fā)布在IOS、Android、H5以及微信小程序、支付寶小程序等多個(gè)平臺，考慮到學(xué)生移動設(shè)備種類繁多，移動應(yīng)用需求也各式各樣，本項(xiàng)目分別打包為IOS、Android的APP應(yīng)用，微信小程序和H5移動網(wǎng)站。由于一套UI在多個(gè)環(huán)境下運(yùn)行，因此視圖效果稍有差異，但是整體運(yùn)行穩(wěn)定。

3 結(jié)語

為了在大學(xué)生中推廣宣和傳極簡主義生活方式，本項(xiàng)目以uni-app跨平臺移動UI開發(fā)框架為技術(shù)基礎(chǔ)，開發(fā)了一個(gè)集物品交換、時(shí)間管理、學(xué)習(xí)充電、健康環(huán)保、心靈減壓等主題為一體的跨平臺移動應(yīng)用程序，可以發(fā)布在IOS、Android、H5以及微信小程序、支付寶小程序等多個(gè)平臺。受限于技術(shù)、時(shí)間和人力等因素該系統(tǒng)功能目前還不夠完善，未來還需要進(jìn)一步擴(kuò)充其功能。

[參考文獻(xiàn)]

[1]許溜溜.基于HBuilder快速開發(fā)移動端APP的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識與技術(shù)，2020（10）：74-75.

[2]鄧皓瀚.基于Flutter的跨平臺移動APP開發(fā)前景研究[J].信息與電腦（理論版），2019（15）：197-199.

[3]張洋.“極簡主義”對大學(xué)生創(chuàng)新思維能力培養(yǎng)的啟示[J].教育現(xiàn)代化，2018（8）：21-22.

[4]喬治強(qiáng).混合移動APP跨平臺混合開發(fā)綜述[J].現(xiàn)代信息科技，2020（10）：71-73.

[5]潘哲寧.基于HBuilder構(gòu)建跨平臺移動應(yīng)用解決方案[J].電子世界，2018（20）：160-162.

（編輯 王雪芬）