1、软件开发与应用Software Development&Application电子技术与软件工程Electronic Technology&Software Engineering41传 统 的 移 动 应 用 开 发 架 构 通 常 由 Native APP（Android APP 和 iOS APP）和 Web APP（移 动 端HTML5 网站）组成。近年来随着移动互联网技术的发展，以微信小程序为首的各类小程序（百度小程序、支付宝小程序等）让用户对移动应用有了全新的认知。小程序作为内嵌于互联网流量巨头平台中的无需下载即可使用的轻量级应用，相比 Native APP 具有触手可及、不会占用
2、用户内存、不会对用户造成打扰的优点，相比Web APP 又具有基于微信、百度、支付宝等互联网流量巨头强大的引流优势1。2022 年，微信小程序开发者突破 300 万，日活跃用户超过 4.5 亿，小程序作为移动互联网的重要新基建之一正在焕发新的活力。小程序成为移动应用开发的重要阵地，为开发者带来了全新的挑战。各大互联网巨头（腾讯、阿里、百度、字节跳动、美团等）均发布了各自的小程序开发标准，这让本来就需要适配安卓、苹果、HTML5 的移动应用开发人员又增加了巨大的工作量；同时对于商业公司而言如果每个平台组建单独的团队进行开发，会面临人力成本高、后期维护难、开发周期长的困境2。而DCloud 公司的
3、开源框架 Uni-APP，能够一套代码适配多端，一次开发可以同时生成 iOS APP、Android APP、Web APP、微信小程序、支付宝小程序、百度小程序等全平台的移动应用，极大的降低了开发成本。1 Uni-APP介绍Uni-APP 是一个使用 Vue.js 技术开发所有端移动应用的框架。开发者编写一套代码，可发布到 Native APP（Android APP 和 iOS APP）、Web APP（移 动 端HTML5 网站）以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。Uni-APP 具有学习成本低、扩展能力强和社区成熟度高Uni-AP
4、P 移动应用开发技术分析任远丁玲戚伟（江苏联合职业技术学院徐州财经分院 江苏省徐州市 221000）摘要：本文基于 Uni-APP 前端框架技术研究，阐述了 Uni-APP 的优点，并对 Uni-APP 框架的常用技术进行了分析。随着种类繁多的各类小程序出现，传统的移动应用开发已经从如何开发转变为如何更高效、低成本的开发，大量的框架技术应运而生。Uni-APP 前端框架编写一套代码可以发布到多个平台，具有学习成本低、扩展能力强和社区成熟度高等特点。关键词：Uni-APP；Vue.js；Web 前端开发；移动应用开发基金项目：2020年第三期徐州市职业教育教学改革研究课题“1+X 证书制度背景下
5、小规模限制性在线课程（SPOC）的实施研究以五年制高职 Web 前端开发（初级）证书为例”（ZKG338）2021 年江苏联合职业技术学院徐州财经分院校本研究课题“深化三教改革提高软件技术专业人才培养质量的实践研究”（2021Y0701）。图 1：Uni-APP 多端发布架构图软件开发与应用Software Development&Application电子技术与软件工程Electronic Technology&Software Engineering42等特点。1.1 学习成本低Uni-APP 移动应用开发框架：（1）Uni-APP 是基于三大前端框架之一的前端框架 Vue.js 衍生而来
6、，对于已经具备 Vue.js 开发能力的开发人员上手即用，无需二次学习语法。国内流行度较高的前端框架 Vue.js，秉承了“Angular”、“React”这两种前端 Uni-APP 组件 API 优点框架的优势，在框架中融入了双向数据绑定、组件化的响应式编程思想，国产化框架的背景又让开发文档也相对比较清晰易读3。Uni-APP 页面文件遵循 Vue 单文件组件规范，兼容 Vue.js 的所有优点。（2）Uni-APP 拥有大量封装好的组件和 API，而且语法和微信小程序非常类似，对于已经有微信小程序开发背景的前端人员来说学习成本极低。Uni-APP 的组件和 API 覆盖开发过程的各个需求，
7、功能丰富、多端兼容，方便开发人员快速集成。这些组件和 API 除了 Uni-APP内置预设之外，还可以通过插件市场进行扩展安装，降低了开发的复杂度。（3）DCloud 公司定制了开发工具 Hbuilder，专为Uni-APP 量身优化。通过 Hbuilder 进行 Uni-APP 开发可以直接通过编辑器创建项目、在线打包，无需做任何环境部署，且完备支持 Vue.js 语法，提高了开发效率4。1.2 扩展能力强Uni-APP 的扩展能力强，体现在 Uni-APP 到多端的互相转换和多种语言架构技术栈的扩展性两个方面。（1）Uni-APP 到多端的互相转换。通过 Uni-APP的编译工具可以轻松地
8、把 Uni-APP 编译到多端移动应用，也可以把各平台之前的老项目向 Uni-APP 转换。目前其它端的迁移到 Uni-APP 中已经形成多套成熟的技术，包括将 Vue.js 编写的 HTML5 转换 Uni-APP；原生微信小程序转换 Uni-APP；通过 wepy 框架编写的小程序转换 Uni-APP；通过 mpvue 框架编写的小程序转换Uni-APP 等。（2）多种语言架构技术栈的扩展性。Uni-APP 可以通过混合式开发融合原生 APP 和 Uni-APP 各自的优点，既可以在 Uni-APP 中通过使用 APP 离线 SDK 开发原生插件来扩展原生能力，也可以在原生 APP 中把部
9、分功能栏目使用 Uni-APP 实现，实现途径为在原生 APP里集成uni小程序sdk或把Uni-APP代码发布成H5方式，在原生 APP 里通过 webview 打开。1.3 社区成熟度高Uni-APP 通过推出插件市场、建立视频教程、开设社区博客等方式创建了成熟的社区环境。其中，插件市场在 2018 年底推出以来，发布插件超过 1500 个，头部插件下载量都在万次以上。支持前端组件、jssdk、页面模板、项目模板、原生插件等多种类型，且提供了赞赏、付费购买等手段，调动了开发者的创作热情。同时，插件也支持npm方式安装第三方包，兼容mpvue。Uni-APP的问答社区，也积累了丰富的帖子，目
10、前已沉淀 2 万多相关帖子，每日更新帖子数百篇，月uv 达到百万。除了 Uni-APP 官网外，开发者通常还会通过 Gitee研发管理平台、视频网站、社区博客等方式发布教程资源。目前，Uni-APP 的 Gitee 仓库 star 数已达到 3500，视频网站 bilibili 上 Uni-APP 相关视频教程超过 1000 个，图 2：Uni-APP 三层架构图软件开发与应用Software Development&Application电子技术与软件工程Electronic Technology&Software Engineering43CSDN博客网站上Uni-APP相关技术博客超过4
11、5000篇。相关学习资源的丰富程度，也能侧面反映一个框架的社区成熟程度。2 Uni-APP框架的常用技术分析Uni-APP 框架的常用技术包括 Uni-APP 的组件和API，这些常用技术奠定了 Uni-APP 高效开发的基础。2.1 组件组件是视图层的基本组成单元，由一个单独且可复用的功能模块进行封装而来。通过组件可以实现用简单的标记对完成复杂的视图功能（包括 HTML、CSS 和JS），例如轮播图组件、可滚动视图组件和地图组件等。每个组件包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。其中，组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束
12、标签的 后面用/来表示结束，结束标签也称为闭合标签。例如是开始标签，是结束标签。在开始标签和结束标签之间的是组件内容，也就是 Vue.js 中的 slot，如下面示例的 组件内容 中的“组件内容”。在每个标签对的开始标签内可以写属性，属性可以有多个，多个属性之间用空格分割。例如 中 的 scroll-x 和 scroll-y。每个属性通过“=”赋值。上面的例子中，属性 scroll-x和 scroll-y 的值都被设定为布尔值 true。常见的组件的类型包括视图容器、表单组件、路由与页面跳转、媒体组件和画布等。视图容器中，代表视图容器，用于替代传统 HTML 中的 div，包裹各种元素内容；代
13、表可滚动视图区域，用于实现区域滚动；代表轮播图，用于实现左右滑动或上下滑动的视图容器。表单组件中，、等的用法类似于 HTML5中的表单标签，但是比 HTML5 中的标签扩展了更多的 可 选 属 性，例 如 size、type、plain、disabled 等；代表富文本编辑器，可以对图片、文字格式进行编辑和混排；代表从底部弹起的滚动选择器，通过 mode 属性切换模式可以实现时间选择器、日期选择器和省市区选择器等功能；代表开关选择器，可以实现当用户切换开关状态后通过 change 属性获得当前开关选中状态的布尔值。路由与页面跳转中，可以通过 标签实现类似 标签的效果，通过url 属性跳转到目标
14、页面路由。媒体组件中，除了类似HTML5 的、和 标签外，增加了 用于实现页面内嵌的区域相机组件、用于实现实时音视频播放（直播拉流）、用于实现实时音视频录制（直播推流）。画布中，在传统HTML5中的标签内嵌入更多交互属性，例如 touchstart 代表手指触摸动作开始，touchmove代表手指触摸后移动，touchend 代表手指触摸动作结束，touchcancel 代表手指触摸动作被打断，longtap代表手指长按，触发了长按事件后进行移动不会触发屏幕的滚动。2.2 APIUni-APP 的 API 主要用于对 ECMAScript 通过复杂的 Javascript 代码实现的常用功能进
15、行扩展和封装，除此之外也可以使用标准 ECMAScript 的原生 Javascript API。Uni-APP 的 API 可以分为网络 API、路由与页面跳转 API、数据缓存 API、键盘 API、界面 API、页面和窗体 API、文件 API、绘画 API、第三方服务 API 等，下面挑选一些常用 API 进行介绍。网 络 API 中 最 常 用 的 API 是 HTTP 请 求 API，可以通过 uni.request()实现在不刷新页面的情况下请求特定 URL 获取数据的功能，类似原生 Javascript 中XMLHttpRequest 或者 Vue.js 中的 Axios5。路
16、由与页面跳转 API 中最常用的 API 包括 uni.navigateTo()用于实现保留当前页面并跳转到应用内的某个页面；uni.redirectTo()用于关闭当前页面并跳转到应用内的某个页面；uni.navigateBack()用于关闭当前页软件开发与应用Software Development&Application电子技术与软件工程Electronic Technology&Software Engineering44面并返回上一页面或多级页面。数 据 缓 存 API 中 最 常 用 的 功 能 是 通 过 uni.setStorage()和 uni.getStorage()实现对于本地缓存的存和取，类似于原生 Javascript 中的 localStorage.setItem()和 localStorage.getItem()。该 API 在 实 现 层 H5 端 为localStorage，APP 端为原生 plus.storage，小程序端为小程序 API 的 storage API。2.3 基于Uni-APP的生态框架除了以上 Uni-APP 的内置组件和 API
