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

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

中圖分類號：TP311" 文獻標志碼：A

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

作者簡介：張瑋（1990— ），女，講師，學士；研究方向：軟件技術。

0" 引言

近年來，隨著移動互聯(lián)網(wǎng)技術的發(fā)展，以微信小程序為首的各類小程序（百度小程序、支付寶小程序等）讓用戶對移動應用有了全新的認知［1］。微信小程序是一種無須下載安裝，即可在微信環(huán)境中使用的輕應用。微信小程序依托于微信平臺，提供了無須安裝、即用即走的服務［2］。

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

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

1.1" uni-App簡介

uni-App是使用Vue.js開發(fā)的一個前端框架，基于該框架可以很方便地進行多端項目開發(fā)。uni-App框架開發(fā)項目有4點優(yōu)勢。

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

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

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

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

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

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

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

（2）跨平臺支持方面，微信小程序僅支持在微信平臺上運行，無法直接在其他平臺上運行。uni-App支持多個平臺，可以實現(xiàn)一次開發(fā)構建多個平臺的應用。

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

（4）從應用程序編程接口和能力上分析來看，微信小程序提供了豐富的微信原生接口和能力，在獲取用戶信息、支付、地理位置獲取等方面非常便捷。uni-App的應用程序接口由標準ECMAScript的接口以及uni擴展接口2個部分組成。uni-App基于ECMAScript擴展了uni對象。接口命名與小程序保持兼容。

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

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

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

2.1" 系統(tǒng)背景

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

2.2" 系統(tǒng)分析

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

2.3" 系統(tǒng)設計與實現(xiàn)

2.3.1" 系統(tǒng)架構設計

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

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

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

2.3.3" 系統(tǒng)詳細設計與實現(xiàn)

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

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

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

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

3" 結語

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

參考文獻

［1］任遠，丁玲，戚偉.Uni-App移動應用開發(fā)技術分析［J］.電子技術與軟件工程，2023（3）：41-44.

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

［3］吳建成，楊亞.Uni-App框架下基于Token的身份認證及持久化登錄設計與實現(xiàn)［J］.數(shù)字技術與應用，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