基于uni-app框架的校園極簡生活跨平臺移動應用的設計與實現

廖黎莉 王磊 李太 武璐瑜

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

關鍵詞：uni-app框架;跨平臺移動應用開發;校園極簡生活

0 ? 引言

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

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

1 ? uni-app框架與其他跨平臺移動應用開發框架的對比

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

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

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

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

綜上，uni-app框架學習成本低，上手速度快，跨平臺能力強，生態繁榮，鑒于上述原因，本項目基于uni-app框架創建以校園極簡生活為主題的跨平臺移動應用程序。

2 校園極簡生活跨平臺移動應用的設計與實現

2.1 框架結構設計

系統結構采用前后端分離的開發模式。前端架構方案基于MVVM設計模式，采用基于Vue規范的uni-app跨平臺應用框架，通過HBuilderX進行開發、調試和發布。后端架構方案基于MVC設計模式，采用基于PHP語言的PHPThink5.1框架，通過VSCode進行開發和調試。服務器部署在阿里云上，操作系統為CentOS，通過寶塔面板在云服務器上部署Nginx的Web服務器和MySQL的數據庫服務器。具體框架結構如圖1所示。

2.2 功能模塊設計

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

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

（2）分類瀏覽。用戶根據信息類別實現分類瀏覽，在瀏覽的過程中可以對感興趣的內容點贊或者踩踏，也可以對其發表評論。本系統的信息類別主要為物品交換、時間管理、學習充電、健康環保、心靈減壓。

物品交換：用戶在此發布自己的二手生活物品或者學習物品的需求及饋贈信息，學會掌控消費，拒絕浪費。

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

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

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

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

（3）信息檢索。用戶根據自己的需要輸入關鍵字進行搜索，以此查找自己感興趣的內容。

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

（5）關注互動。用戶在此查找用戶、查看好友列表并與好友進行關注互動和私信互動。

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

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

關注互動：凡是被加入關注列表的其他用戶，其動態信息都會推送給當前用戶，凡是被加入黑名單的其他用戶，其動態信息都會在推送時被過濾。

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

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

2.3? 系統實現

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

由于私信互動需要客戶端與客戶端之間通信，因此本系統在PHPThink5.1的基礎上使用GatewayWorker和websocket來實現基于TCP的長連接，客戶端不直接與Gateway通信，不處理任何業務邏輯，僅作為單向推送通道，通過請求thinkPHP5.1控制器轉發消息到GatewayWorker中，從而實現用戶與用戶之間的私信互動功能。

2.4? 系統部署

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

3 結語

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

[參考文獻]

[1]許溜溜.基于HBuilder快速開發移動端APP的設計與實現[J].電腦知識與技術，2020（10）：74-75.

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

[3]張洋.“極簡主義”對大學生創新思維能力培養的啟示[J].教育現代化，2018（8）：21-22.

[4]喬治強.混合移動APP跨平臺混合開發綜述[J].現代信息科技，2020（10）：71-73.

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

（編輯 王雪芬）