基于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