基于uni-App的小程序開(kāi)發(fā)技術(shù)路線及系統(tǒng)研究

摘要：微信小程序作為一種新型的移動(dòng)應(yīng)用形態(tài)，以其輕量級(jí)、易傳播、低成本等特點(diǎn)，被越來(lái)越多的企業(yè)和開(kāi)發(fā)者所采用。同時(shí)，文化創(chuàng)意產(chǎn)業(yè)作為推動(dòng)經(jīng)濟(jì)轉(zhuǎn)型升級(jí)的重要力量，日益受到社會(huì)各界的關(guān)注。該研究通過(guò)分析傳統(tǒng)微信小程序開(kāi)發(fā)與uni-App跨平臺(tái)開(kāi)發(fā)的異同，采用uni-App開(kāi)發(fā)所需要掌握的核心技能與技術(shù)路線，結(jié)合蜀道文創(chuàng)產(chǎn)品在線交易平臺(tái)進(jìn)行系統(tǒng)研究，開(kāi)發(fā)出一個(gè)基于uni-App的蜀道文創(chuàng)產(chǎn)品在線交易小程序，通過(guò)平臺(tái)的建設(shè)和運(yùn)營(yíng)，可以推動(dòng)蜀道文創(chuàng)產(chǎn)業(yè)的創(chuàng)新發(fā)展，促進(jìn)文化資源的有效轉(zhuǎn)化和利用。

關(guān)鍵詞：uni-App；微信小程序；蜀道文創(chuàng)

中圖分類號(hào)：TP311" 文獻(xiàn)標(biāo)志碼：A

基金項(xiàng)目：2024年廣元市哲學(xué)社會(huì)科學(xué)規(guī)劃項(xiàng)目“蜀道文化研究”專項(xiàng)課題；項(xiàng)目名稱：基于微信小程序的蜀道文創(chuàng)產(chǎn)品在線交易平臺(tái)研究；項(xiàng)目編號(hào)：SDZX24GJ017。

作者簡(jiǎn)介：張瑋（1990— ），女，講師，學(xué)士；研究方向：軟件技術(shù)。

0" 引言

近年來(lái)，隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，以微信小程序?yàn)槭椎母黝愋〕绦颍ò俣刃〕绦?、支付寶小程序等）讓用戶?duì)移動(dòng)應(yīng)用有了全新的認(rèn)知［1］。微信小程序是一種無(wú)須下載安裝，即可在微信環(huán)境中使用的輕應(yīng)用。微信小程序依托于微信平臺(tái)，提供了無(wú)須安裝、即用即走的服務(wù)［2］。

除微信以外，支付寶、百度等App都發(fā)布了各自的小程序開(kāi)發(fā)標(biāo)準(zhǔn)，這給本來(lái)就需要適配Android、iOS、Web App多系統(tǒng)的移動(dòng)應(yīng)用開(kāi)發(fā)人員增加了更為艱難的任務(wù)。如果每個(gè)平臺(tái)都組建單獨(dú)的移動(dòng)應(yīng)用開(kāi)發(fā)團(tuán)隊(duì)，就會(huì)面臨人力成本高、后期維護(hù)難、開(kāi)發(fā)周期長(zhǎng)的困境。針對(duì)這個(gè)困境，DCloud公司的開(kāi)源框架uni-App能夠滿足一套代碼適配多端、一次開(kāi)發(fā)即可同時(shí)生成iOS App Android App、Web App以及各種小程序等全平臺(tái)的移動(dòng)應(yīng)用，極大地降低了開(kāi)發(fā)成本［1］。本研究對(duì)uni-App技術(shù)進(jìn)行分析，對(duì)學(xué)習(xí)路線進(jìn)行總結(jié)，結(jié)合實(shí)踐開(kāi)發(fā)了一個(gè)蜀道文創(chuàng)在線交易小程序。

1" uni-App跨端開(kāi)發(fā)技術(shù)分析

1.1" uni-App簡(jiǎn)介

uni-App是使用Vue.js開(kāi)發(fā)的一個(gè)前端框架，基于該框架可以很方便地進(jìn)行多端項(xiàng)目開(kāi)發(fā)。uni-App框架開(kāi)發(fā)項(xiàng)目有4點(diǎn)優(yōu)勢(shì)。

（1）平臺(tái)能力不受限。本文使用uni-App框架進(jìn)行項(xiàng)目開(kāi)發(fā)，能夠做到“一套代碼，多端發(fā)行”。

（2）性能體驗(yàn)優(yōu)秀。加載新頁(yè)面速度快，可以自動(dòng)更新數(shù)據(jù)。

（3）基于通用技術(shù)棧，學(xué)習(xí)成本低。uni-App框架基于前端開(kāi)發(fā)中比較通用的Vue.js技術(shù)棧，使開(kāi)發(fā)者不必增加學(xué)習(xí)成本。

（4）具有開(kāi)放的生態(tài)且組件更豐富。例如：支持通過(guò)Node Package Manager安裝第三方包，支持微信小程序自定義組件及軟件開(kāi)發(fā)工具包。

1.2" uni-App與微信小程序異同

本研究采用uni-App開(kāi)發(fā)小程序，傳統(tǒng)的微信小程序開(kāi)發(fā)與uni-App開(kāi)發(fā)小程序相比有以下異同。

（1）開(kāi)發(fā)語(yǔ)言的異同。微信小程序主要使用WXML（類似于HTML）、WXSS（類似于CSS）和JavaScript進(jìn)行開(kāi)發(fā)；而uni-App基本語(yǔ)言包括JavaScript、Vue、CSS以及TS、SCSS等CSS預(yù)編譯器。

（2）跨平臺(tái)支持方面，微信小程序僅支持在微信平臺(tái)上運(yùn)行，無(wú)法直接在其他平臺(tái)上運(yùn)行。uni-App支持多個(gè)平臺(tái)，可以實(shí)現(xiàn)一次開(kāi)發(fā)構(gòu)建多個(gè)平臺(tái)的應(yīng)用。

（3）從組件庫(kù)和生態(tài)系統(tǒng)上分析來(lái)看，微信小程序具有豐富的官方組件庫(kù)和生態(tài)系統(tǒng)，提供了各種常見(jiàn)的UI組件和開(kāi)發(fā)能力。uni-App也支持使用各種UI組件庫(kù)，比如uView UI、Vant等，同時(shí)還能夠關(guān)聯(lián)Vue.js生態(tài)系統(tǒng)的豐富資源，包括使用第三方的組件和插件。

（4）從應(yīng)用程序編程接口和能力上分析來(lái)看，微信小程序提供了豐富的微信原生接口和能力，在獲取用戶信息、支付、地理位置獲取等方面非常便捷。uni-App的應(yīng)用程序接口由標(biāo)準(zhǔn)ECMAScript的接口以及uni擴(kuò)展接口2個(gè)部分組成。uni-App基于ECMAScript擴(kuò)展了uni對(duì)象。接口命名與小程序保持兼容。

1.3" uni-App開(kāi)發(fā)小程序?qū)W習(xí)路線

uni-App使用Vue.js框架進(jìn)行開(kāi)發(fā)，同時(shí)也支持JavaScript和TypeScript語(yǔ)言。通過(guò)學(xué)習(xí)與實(shí)際運(yùn)用，本文總結(jié)出使用uni-App開(kāi)發(fā)小程序，必須掌握的技能包括Vue.js框架知識(shí)、JavaScript編程能力、HTML5及CSS3的熟練應(yīng)用、HBuilderX工具的操作技能等多個(gè)方面，如圖1所示。通過(guò)對(duì)這些技能的不斷學(xué)習(xí)和實(shí)踐，開(kāi)發(fā)者可以更加熟練地使用uni-App來(lái)開(kāi)發(fā)高效、高質(zhì)量的跨平臺(tái)App。

2" 蜀道文創(chuàng)產(chǎn)品在線交易平臺(tái)系統(tǒng)研究

2.1" 系統(tǒng)背景

2024年廣元市政府工作報(bào)告中指出：聚力推進(jìn)文旅產(chǎn)業(yè)發(fā)展，圍繞打造大蜀道國(guó)際文化旅游目的地和康養(yǎng)度假勝地，完善和實(shí)施景區(qū)提檔升級(jí)規(guī)劃，持續(xù)深化景區(qū)“二次創(chuàng)業(yè)”，加快曾家山、唐家河國(guó)家級(jí)旅游度假區(qū)創(chuàng)建，推進(jìn)米倉(cāng)山大峽谷創(chuàng)國(guó)家5A級(jí)旅游景區(qū)、鹽井河大峽谷和黃貓埡創(chuàng)國(guó)家4A級(jí)旅游景區(qū)建設(shè)。因此，蜀道文化旅游產(chǎn)品的建設(shè)推廣以及周邊的文創(chuàng)產(chǎn)品的研發(fā)推銷將是今后的工作方向和重點(diǎn)，通過(guò)蜀道文創(chuàng)產(chǎn)品在線交易平臺(tái)的建設(shè)和運(yùn)營(yíng)，可以推動(dòng)蜀道文創(chuàng)產(chǎn)業(yè)的創(chuàng)新發(fā)展，促進(jìn)文化資源的有效轉(zhuǎn)化和利用。

2.2" 系統(tǒng)分析

本研究首先對(duì)蜀道文創(chuàng)產(chǎn)品市場(chǎng)進(jìn)行全面的調(diào)研和分析，了解當(dāng)前市場(chǎng)上的主要產(chǎn)品類型、價(jià)格定位、銷售渠道等情況。同時(shí)，本文通過(guò)問(wèn)卷調(diào)查、訪談等方式收集目標(biāo)用戶的需求和偏好，包括用戶對(duì)蜀道文創(chuàng)產(chǎn)品的認(rèn)知程度、購(gòu)買動(dòng)機(jī)、使用場(chǎng)景等?；谶@些數(shù)據(jù)，本文進(jìn)行市場(chǎng)細(xì)分和目標(biāo)用戶定位，為平臺(tái)的設(shè)計(jì)和功能開(kāi)發(fā)提供決策依據(jù)。

2.3" 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

2.3.1" 系統(tǒng)架構(gòu)設(shè)計(jì)

在深入分析市場(chǎng)需求和用戶需求的基礎(chǔ)上，本文設(shè)計(jì)小程序的平臺(tái)架構(gòu)，包括前端界面設(shè)計(jì)、后端邏輯處理、數(shù)據(jù)庫(kù)設(shè)計(jì)等多個(gè)方面。前端界面設(shè)計(jì)注重用戶體驗(yàn)和視覺(jué)效果，提供直觀、簡(jiǎn)潔的操作界面；后端邏輯處理確保平臺(tái)數(shù)據(jù)的準(zhǔn)確性和安全性，實(shí)現(xiàn)用戶注冊(cè)、登錄、商品瀏覽、購(gòu)買結(jié)算等功能；數(shù)據(jù)庫(kù)設(shè)計(jì)中考慮數(shù)據(jù)的存儲(chǔ)、檢索和管理需求，確保平臺(tái)的高效運(yùn)行。系統(tǒng)整體分“小程序前端”和“后臺(tái)數(shù)據(jù)管理”2部分。本文采用前端技術(shù)，負(fù)責(zé)數(shù)據(jù)展示與用戶交互，后端采用Java進(jìn)行數(shù)據(jù)管理，如圖2所示。

2.3.2" 開(kāi)發(fā)環(huán)境

蜀道文創(chuàng)產(chǎn)品在線交易平臺(tái)中，“小程序前臺(tái)”采用HBuilderX作為開(kāi)發(fā)工具，后端采用IntelliJ IDEA作為開(kāi)發(fā)工具。前端框架采用uni-App、Element Ui、Vue.js，后端框架采用SpringBoot，數(shù)據(jù)庫(kù)采用MySQL數(shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)，在IDEA中集成。

2.3.3" 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

蜀道文創(chuàng)產(chǎn)品在線交易小程序端分為4個(gè)頁(yè)面，分別是首頁(yè)、文創(chuàng)產(chǎn)品分類頁(yè)面、購(gòu)物車頁(yè)面以及我的個(gè)人信息管理頁(yè)面，如圖3所示。在全局文件App.json中，使用tabbar配置項(xiàng)指定一級(jí)導(dǎo)航欄以及tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)。小程序端主要包括用戶信息管理、文創(chuàng)產(chǎn)品展示、個(gè)性化產(chǎn)品推薦、文創(chuàng)產(chǎn)品交易以及用戶訂單管理五大功能。

用戶打開(kāi)小程序首先進(jìn)入首頁(yè)，首次登錄須要先注冊(cè)或者使用微信賬號(hào)授權(quán)用戶信息進(jìn)行注冊(cè)和登錄，用戶下次進(jìn)入小程序可直接登錄。這一部分主要使用uni.getUserProfile接口獲取用戶信息，每次請(qǐng)求" 都會(huì)彈出授權(quán)窗口，用戶同意后返回用戶信息。另一個(gè)接口uni.login是一個(gè)客戶端應(yīng)用程序編程接口（Application Programming Interface，API），統(tǒng)一封裝了各個(gè)平臺(tái)的各種常見(jiàn)的登錄方式，包括App手機(jī)號(hào)一鍵登錄、第三方登錄、各家小程序內(nèi)置登錄［3］。用戶注冊(cè)登錄用例如圖4所示。

用戶登錄成功后，進(jìn)入首頁(yè)。首頁(yè)最上方是搜索框，然后是輪播區(qū)域，緊接著是宮格導(dǎo)航。用戶可以瀏覽目前熱門(mén)的文創(chuàng)產(chǎn)品，進(jìn)一步滑動(dòng)可瀏覽各景點(diǎn)當(dāng)前正在促銷的有關(guān)文創(chuàng)產(chǎn)品，點(diǎn)擊宮格導(dǎo)航可快速進(jìn)入對(duì)應(yīng)頁(yè)面。在首頁(yè)主要使用uni.request發(fā)起網(wǎng)絡(luò)請(qǐng)求，與服務(wù)器交互獲取文創(chuàng)產(chǎn)品的數(shù)據(jù)信息，將其用前端組件顯示在頁(yè)面中。首頁(yè)中主要采用普通視圖容器lt;viewgt;，可滾動(dòng)視圖容器組件lt;scroll-viewgt;來(lái)進(jìn)行商品的展示；使用lt;swipergt;滑塊視圖容器和lt;imagegt;組件進(jìn)行文創(chuàng)產(chǎn)品廣告輪播的展示，配合圖標(biāo)lt;icongt;和表單相關(guān)組件，可實(shí)現(xiàn)搜索功能。實(shí)際實(shí)現(xiàn)效果如圖5所示。

在文創(chuàng)產(chǎn)品分類頁(yè)面，小程序可以根據(jù)個(gè)人需要查找產(chǎn)品，分為兩級(jí)目錄，進(jìn)入二級(jí)目錄后展示具體產(chǎn)品，點(diǎn)擊某一文創(chuàng)產(chǎn)品即可進(jìn)入該產(chǎn)品的詳情展示頁(yè)面。詳情頁(yè)采用高清大圖進(jìn)行輪播，展示相應(yīng)促銷信息，在詳情中可看到關(guān)于此產(chǎn)品的各種細(xì)節(jié)以及購(gòu)買評(píng)價(jià)。用戶在詳情頁(yè)可以實(shí)現(xiàn)收藏和加入購(gòu)物車操作。在購(gòu)物車頁(yè)面，用戶可對(duì)當(dāng)前購(gòu)物車中的商品進(jìn)行增刪，選擇最終需要購(gòu)買的商品進(jìn)行結(jié)算。點(diǎn)擊結(jié)算購(gòu)買按鈕后，小程序會(huì)自動(dòng)跳轉(zhuǎn)到付款頁(yè)面并提示用戶下一步操作，用戶確定購(gòu)物金額并付款。支付模塊采用uni.requestPayment這個(gè)客戶端支付API，這里不僅須要開(kāi)發(fā)客戶端，還須要開(kāi)發(fā)服務(wù)端。支付流程為首先在支付平臺(tái)功能申請(qǐng)，然后在manifest.json里配置支付參數(shù)，最后在uni-App里調(diào)用API進(jìn)行支付。

3" 結(jié)語(yǔ)

本文針對(duì)目前流行的跨端框架uni-App進(jìn)行研究，提出基于其開(kāi)發(fā)微信小程序的技術(shù)路線，以蜀道文創(chuàng)產(chǎn)品在線交易平臺(tái)的開(kāi)發(fā)為例，針對(duì)蜀道文創(chuàng)產(chǎn)品的特點(diǎn)進(jìn)行分類，合理分析數(shù)據(jù)進(jìn)行產(chǎn)品的推薦與展示，實(shí)際運(yùn)用多種前端開(kāi)發(fā)技術(shù)和后端框架，完成前后端的連接與交互。本系統(tǒng)通過(guò)優(yōu)化平臺(tái)的界面設(shè)計(jì)、操作流程和交易流程，提供直觀、簡(jiǎn)潔的操作界面，簡(jiǎn)化用戶的購(gòu)物步驟，提高購(gòu)物效率。同時(shí)，該平臺(tái)將提供豐富的商品信息、高清的產(chǎn)品圖片和詳細(xì)的購(gòu)買指南，幫助用戶更好地了解產(chǎn)品特性和使用方法。

參考文獻(xiàn)

［1］任遠(yuǎn)，丁玲，戚偉.Uni-App移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)分析［J］.電子技術(shù)與軟件工程，2023（3）：41-44.

［2］王偉東.基于微信小程序的智能出入登記系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.現(xiàn)代信息科技，2024（10）：96-100，106.

［3］吳建成，楊亞.Uni-App框架下基于Token的身份認(rèn)證及持久化登錄設(shè)計(jì)與實(shí)現(xiàn)［J］.數(shù)字技術(shù)與應(yīng)用，2024（3）：123-125.

（編輯" 王永超）

Research on technical route and system of mini program development based on uni-App

ZHANG" Wei， LIAO" Ruofei

（Sichuan Vocational College of Information Technology， Guangyuan 628040， China）

Abstract： WeChat mini programs， as a new form of mobile application， are increasingly being adopted by the enterprises and developers due to their lightweight，easy to spread，and low-cost characteristics. At the same time， the cultural and creative industries， as an important force in promoting economic transformation and upgrading，are increasingly receiving attention from all sectors of society. This study analyzes the similarities and differences between the traditional WeChat mini program development and uni-App cross platform development， as well as the core skills and technical routes required for using uni-App development. Combined with the Shu Dao cultural and creative product online trading platform， a systematic research is conducted to develop a Shu Dao cultural and creative product online trading mini program based on uni-App. Through the construction and operation of the platform， it can promote the innovative development of the Shu Dao cultural and creative industry， and facilitate the effective transformation and utilization of cultural resources.

Key words： uni-App; WeChat mini program; Shu Dao cultural and creative industry