基于uni-App的小程序開發技術路線及系統研究

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

關鍵詞：uni-App；微信小程序；蜀道文創

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

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

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

0" 引言

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

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

1" uni-App跨端開發技術分析

1.1" uni-App簡介

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

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

（2）性能體驗優秀。加載新頁面速度快，可以自動更新數據。

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

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

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

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

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

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

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

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

1.3" uni-App開發小程序學習路線

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

2" 蜀道文創產品在線交易平臺系統研究

2.1" 系統背景

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

2.2" 系統分析

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

2.3" 系統設計與實現

2.3.1" 系統架構設計

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

2.3.2" 開發環境

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

2.3.3" 系統詳細設計與實現

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

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

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

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

3" 結語

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

參考文獻

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

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

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