目录
1.uni-app的简介与环境搭建
1.1uniapp 简介
uniapp 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台。
1.2uniapp优势
1.多端泛滥
2.体验不好
3.生态不丰富
于是针对解决跨平台开发存在问题的uniapp顺势而生。
产品特征
1.跨平台更多
2.运行体验更好：
组件、api与原生小程序一致
兼容weex原生渲染，效率高，局部渲染。
3.通用技术栈，学习成本更低
vue的语法，微信小程序的api
内嵌mpvue
4.开放生态。组件更丰富
支持通过npm安装第三方包
支持微信小程序自定义组件及 SDK
兼容mpvue组件及项目
App端支持和原生
uniapp功能框架
uniapp在跨平台的过程中,可以调用平台专有能力。
1.3环境搭建
1.安装编辑器：HBuilderX
H是HTML的首字母，
Builder是构造者，
X是HBuilder的下一代版本。
我们也简称HX。
HBuilderX是通用的前端开发工具，但为uniapp做了特别强化。
下载App开发版，可开箱即用；如下载标准版，在运行或发行uniapp时，会提示安装uniapp插件，插件下载完成后方可使用。
如使用cli方式创建项目，可直接下载标准版，因为uniapp编译插件被安装到项目下了。
HBuilderX 的特点如下图所示：
1.4创建 uniapp
步骤：在点击工具栏里的文件 -> 新建 -> 项目，然后我们会看见新建项目的弹窗，默认为普通项目，我们手动选择第二个uniapp，手动输入项目名，系统会填入默认路径，但是个人可以根据需要进行修改，点击预览即可。
(1)page：存放所有的页面。
（2）static：存放静态资源（比如图片，视频，字体，图标等）。
（3）unpackage：即打包目录，存放各个平台最终打包输出的文件。
（4）App.vue：项目根组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件，可以调用应用的生命周期。
（5）main.js：项目入口文件，主要作用是初始化 vue 实例并使用需要的插件
（6）manifest.json：是应用的配置文件，用于指定应用的名称、图标、权限等。
（7）pages.json：用来对 uniapp 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等
（8）uni.scss：为了方便整体控制应用的风格，如按钮颜色、边框风格，本文件里预置了一批 scss 变量预置。
1.5运行项目
步骤：在点击工具栏里的运行 -> 运行到浏览器 -> Chrome/Firefox/IE/Edge 等任意一个浏览器都可，首推 Chrome
运行成功之后，终端会有对应的提示。
1.6开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uniapp有如下开发规范：
（1）页面文件遵循Vue 单文件组件(SFC)规范
(2)组件标签靠近小程序规范。
(3)接口能力(JS API)靠近微信小程序规范，但需将前缀 wx 替换为 uni。
(4)数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及页面的生命周期。
(5)为兼容多端运行，推荐建议使用flex布局进行开发。
2.uni-app基础知识总结
2.1介绍项目目录和文件作用
(1)pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
(2)manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
(3)App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
(4)main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
(5)uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
(6)unpackage就是打包目录，在这里有各个平台的打包文件
(7)pages所有的页面存放目录
(8)static静态资源目录，例如图片等
(9)components组件存放目录
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
(1)页面文件遵循Vue单文件组件(SFC)规范
(2)组件标签靠近小程序规范，详见uni-app组件规范
(3)接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为 uni，详见uni-app接口规
(4)数据绑定及事件处理同Vue.js规范，同时补充了App及页面的生命周期
(5)为兼容多端运行，建议使用flex布局进行开发
2.2全局配置和页面配置
2.2.1通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等
2.3创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板
通过pages来配置页面
pages数组数组中第一项表示应用启动页
通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式
配置tabbar
如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页。
（1）当设置 position为top时，将不会显示icon
（2）tabBar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。
属性说明：
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
案例代码：
condition启动模式配置
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
list说明：
组件的基本使用
uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用
uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构
text文本组件的用法
001 - text 组件的属性
text 组件相当于行内标签、在同一行显示
除了文本节点以外的其他节点都无法长按选中
002 - 代码案例
002 - 代码案例
button按钮组件的用法
001 - 组件的属性
总结：
随着移动互联网的快速发展，越来越多的企业开始将移动应用作为自己的核心业务。然而，由于各个平台之间的技术差异和开发成本的高昂，让很多企业望而却步。因此，Uni-app作为一个跨平台开发框架，应运而生。
本文将从入门到实践，带领大家了解Uni-app的基本概念和使用方法，并结合实例讲解如何使用Uni-app开发跨平台应用。
一、什么是Uni-app？
Uni-app是一款基于Vue.js框架的跨平台开发工具，它能够将一份代码同时编译成多个平台的应用，包括iOS、Android、H5等。Uni-app支持使用原生组件，同时也提供了一些跨平台组件。
Uni-app的特点如下：
统一封装了各平台API，能够通过JS调用原生API；
使用Vue.js语法，具有Vue.js的所有特性；
兼容性好，支持iOS、Android、H5等多个平台；
开发效率高，代码可以一次编写多端复用。
二、Uni-app的安装与使用
1. 安装Node.js和HBuilderX
Uni-app需要使用Node.js作为开发环境，因此需要先安装Node.js。可以在Node.js官网上下载对应的安装包进行安装。
另外，需要安装一款名为HBuilderX的开发工具，它是Uni-app官方推荐的开发工具。可以在HBuilderX官网上下载对应的安装包进行安装。
2. 创建Uni-app项目
打开HBuilderX，点击菜单栏上的“文件”->“新建”->“项目”，选择“Uni-app”类型，填写项目名称和保存路径，然后点击“创建”按钮即可。
创建完成后，可以看到项目的目录结构如下：
其中，App.vue是应用的根组件，main.js是应用的入口文件，manifest.json是应用的配置文件，pages.json是页面配置文件，uni.scss是应用的公共样式文件。
3. 运行Uni-app项目
在HBuilderX中，可以点击工具栏上的“运行”按钮，选择需要运行的平台，即可将代码编译成对应的应用，并在对应的模拟器或浏览器中运行。
三、Uni-app的基本语法
1. 模板语法
Uni-app的模板语法和Vue.js相同，支持v-bind、v-if、v-for等指令。例如，可以在模板中使用v-if指令判断条件来动态渲染页面元素
2. 样式语法
Uni-app的样式语法和普通的CSS语法相同，但需要注意的是，Uni-app使用了自己的一套样式变量，称为Uni样式变量。Uni样式变量可以通过uni.scss文件中定义，并在组件中使用。例如：
2. 事件处理
在Uni-app中，可以使用v-on指令来监听DOM事件。例如，可以在组件中使用v-on:click指令来监听点击事件
四．Uni-app的组件库
Uni-app提供了一些跨平台的组件，这些组件可以在iOS、Android、H5等多个平台上使用。Uni-app的组件库包括基础组件库和扩展组件库。
1. 基础组件库
Uni-app的基础组件库包括按钮、表单、布局、列表、导航等组件，这些组件可以直接在页面中使用。例如，可以使用uni-button组件来创建一个按钮：
2. 扩展组件库
Uni-app的扩展组件库包括图标、轮播图、消息提示等组件，这些组件需要先安装相应的插件，然后才能使用。例如，可以使用uni-icons插件来创建一个图标
五．Uni-app的常用API
Uni-app封装了各平台的API，可以通过JS调用原生API。以下是Uni-app中常用的API：
1. 跳转页面
可以使用uni.navigateTo和uni.redirectTo方法来跳转页面。其中，uni.navigateTo方法用于打开一个新页面，uni.redirectTo方法用于关闭当前页面并打开一个新页面。例如：
2. 获取设备信息
可以使用uni.getSystemInfo方法来获取设备的基本信息，例如设备的型号、操作系统版本、屏幕尺寸等。例如：
3. 发起网络请求
可以使用uni.request方法来发起网络请求。该方法支持各种HTTP请求方式，例如GET、POST、PUT等。例如：
六．Uni-app的打包和发布
Uni-app支持多种打包和发布方式，可以将应用程序打包成原生应用程序、小程序、H5应用等。以下是常用的打包和发布方式：
1. 原生应用程序
可以使用HBuilderX或Uni-app官方打包云服务来将应用程序打包成原生应用程序，支持iOS和Android平台。打包云服务可以通过Uni-app官方网站进行访问，需要购买相应的打包次数。
2. 小程序
可以使用HBuilderX来将应用程序打包成微信小程序或支付宝小程序。打包后的小程序可以在微信或支付宝平台上发布。
3. H5应用
可以将应用程序直接发布为H5应用，通过浏览器来访问。可以将应用程序部署到自己的服务器上，也可以将应用程序部署到Uni-app官方提供的云服务器上。
七．Uni-app的优缺点
Uni-app作为一种跨平台开发框架，具有以下优点：
1.跨平台支持：Uni-app支持多种平台，包括iOS、Android、H5、微信小程序、支付宝小程序等。
2.开发效率高：Uni-app使用Vue.js作为开发框架，开发效率比较高。
3.组件库丰富：Uni-app提供了丰富的组件库，可以快速构建应用程序
4.API丰富：Uni-app提供了许多API，可以方便地访问设备硬件和系统功能。
5.轻量级：Uni-app本身比较轻量级，不会占用太多系统资源。
6.高性能：Uni-app使用了原生渲染技术，性能比较高。
但是，Uni-app也存在一些缺点：
1.学习成本高：虽然Uni-app使用Vue.js作为开发框架，但是对于一些没有开2.发经验的人来说，学习成本还是比较高的。
3.兼容性问题：由于Uni-app要兼容多种平台，因此在某些平台上可能存在兼容性问题。
4.功能受限：Uni-app提供的API比较有限，某些高级功能可能无法实现。
5.系统限制：由于Uni-app使用的是原生渲染技术，因此受到了系统的限制，某些功能可能无法实现。
1. 介绍
1.1什么是 Uni-app？
Uni-app 是一个基于 Vue.js 开发的跨平台应用框架，它可以让开发者使用 Vue.js 的语法来开发一次代码，然后编译成多个平台的应用，包括iOS、Android、H5 等。Uni-app 的目标是帮助开发者快速构建高性能、跨平台的应用，并且尽可能地减少重复工作，提高开发效率。
1.2Uni-app 的优势和特点
一次开发，多端运行：Uni-app 允许开发者只编写一套代码，然后通过编译工具将代码分别编译成各个平台的应用，包括 iOS、Android、H5 等，极大地提高了开发效率。
基于 Vue.js：Uni-app 基于 Vue.js 开发，开发者可以利用 Vue.js 的语法和生态系统，快速上手，并且可以享受到 Vue.js 带来的便利和灵活性。
多端适配能力：Uni-app 提供了多端适配的能力，开发者可以针对不同平台编写特定的代码逻辑或样式，以实现更好的用户体验。
原生能力支持：Uni-app 提供了调用原生能力的接口，开发者可以通过特定的 API 调用原生功能，如相机、地理位置、支付等，实现更丰富的应用功能。
丰富的插件生态系统：Uni-app 有着丰富的插件生态系统，开发者可以通过插件扩展应用的功能，满足不同的业务需求，提高开发效率。
性能优化：Uni-app 在性能方面进行了优化，包括渲染性能、启动速度、包体积等方面，提升了应用的用户体验，使应用更具竞争力。
Uni-app的出现极大地简化了跨平台应用开发的复杂性，为开发者提供了一种高效、灵活的开发方式，成为了跨平台应用开发的重要选择之一。
2. 准备工作
2.1确保具备基本的 Vue.js 开发知识
在开始使用 Uni-app 进行跨平台应用开发之前，建议确保具备基本的 Vue.js 开发知识，包括但不限于以下内容：
（1）Vue.js 的核心概念：如组件、数据绑定、指令等。
（2）Vue.js 的路由管理和状态管理：使用 Vue Router 进行路由管理，使用 Vuex 进行状态管理。
（3）Vue.js 的生命周期钩子函数：了解 Vue.js 组件的创建、更新和销毁过程。
（4）Vue.js 的常用指令和事件处理：如 v-bind、v-on、v-model 等。
如果对 Vue.js 还不够熟悉，建议先学习 Vue.js 的相关知识，可以通过官方文档、在线教程或者相关书籍进行学习。
2.2安装和配置开发环境
在准备好 Vue.js 开发基础后，需要安装和配置 Uni-app 的开发环境。以下是一些常见的步骤：
1.安装 Node.js：Uni-app 的开发依赖于 Node.js，需要先安装 Node.js 环境。可以到 Node.js 的官方网站（https://nodejs.org/）下载对应平台的安装包，并按照提示进行安装。
2.安装 HBuilderX：HBuilderX 是一款专门用于 Uni-app 开发的 IDE，可以到官方网站（https://www.dcloud.io/hbuilderx.html）下载对应平台的安装包，并进行安装。
3.创建 Uni-app 项目：在 HBuilderX 中创建一个新的 Uni-app 项目，选择合适的模板和项目配置，可以选择使用 TypeScript 或者 JavaScript 进行开发。
4.配置编译环境：根据需要配置编译环境，包括选择需要编译的平台、配置应用名称、应用图标等。
5.安装依赖：进入项目目录，运行命令 npm install 安装项目依赖。
2.3了解 Uni-app 的目录结构和文件组织方式
Uni-app 的目录结构和文件组织方式与 Vue.js 类似，但也有一些差异。以下是 Uni-app 项目的常见目录结构：
（1）dist：存放编译后的代码，用于各个平台的发布。
（2）node_modules：存放项目依赖的 npm 包。
（3）src：存放项目的源代码。
（4）pages：存放页面文件，每个页面对应一个文件夹，包含页面的 Vue 组件、样式文件和相关资源文件。
（5）components：存放公共组件，可被多个页面共享使用。
（6）static：存放静态资源文件，如图片、字体等。
（7）unpackage：存放开发过程中编译产生的临时文件。
（8）manifest.json：Uni-app 项目的配置文件，包含应用的基本信息、页面路径配置等。
了解 Uni-app 的目录结构和文件组织方式有助于更好地组织项目代码和资源文件，提高开发效率和代码可维护性。
3.uni-app项目的创建和运行
通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：
第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目
第二步：选择uni-app
类型，输入工程名，选择模板，点击创建，即可成功创建
最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。
4.uni-app项目的打包发布
uni-app项目开发的最后一步就是对项目进行打包发布。打包发布主要分为几种类型：
1、打包为原生App（云端）
2、打包为原生App（离线）
3、发布为h5，操作流程如下：
4、发布为微信小程序
点击【发行】按钮之后，会自动启动微信开发者工具，点击【上传】按钮
出现此截图说明打包上传成功：
此时登录微信公众平台官网。
等待审核通过之后，点击【提交发布】即可发布成功。
5.uni-app插件与生态系统
Uni-app的插件生态系统非常丰富，涵盖了各种功能和需求。这些插件可以帮助开发者快速实现特定的功能，提高开发效率。以下是一些常用的Uni-app插件以及它们的使用技巧：
5.1常用插件推荐
1.uView UI：uView UI 是一套基于 Vue.js 的高质量、多端统一的 UI 框架，提供了丰富的组件和模板，能够满足多种需求，并且支持多端兼容，包括微信小程序、H5、App等。
2.uni-popup：uni-popup是一个弹出层组件库，提供了丰富的弹出层类型和动画效果，可以用于实现弹窗、提示框、菜单等功能。
3.uni-icons：uni-icons 是一个图标库，包含了各种常用的图标，开发者可以直接使用这些图标来美化应用界面。
4.uni-request：uni-request 是一个基于 Promise 封装的网络请求库，可以方便地进行 HTTP 请求，并提供了拦截器、请求取消等功能，使得网络请求更加便捷和灵活。
5.uni-simple-router：uni-simple-router 是一个轻量级的路由管理插件，可以帮助开发者更好地管理页面路由，并提供了一些额外的功能，如路由拦截、参数传递等。
5.2使用技巧
1. 在使用插件之前，需要根据项目的需求和功能选择合适的插件。可以通过阅读插件的文档、示例和用户评价来进行选择。
2.了解插件的配置和使用方法： 在引入插件之后，需要仔细阅读插件的文档，了解插件的配置项和使用方法，确保能够正确地使用插件，并根据需要进行相应的配置。
3.灵活运用插件： 插件通常提供了丰富的功能和选项，开发者可以根据项目的实际需求灵活地运用插件，并根据需要进行定制和扩展。
4.及时更新插件版本： 插件通常会不断更新版本，修复 bug、优化性能或增加新功能。开发者应该及时关注插件的更新，并根据需要更新插件版本，以确保应用的稳定性和安全性。
5.参与插件社区： 插件通常有相应的社区或论坛，开发者可以通过参与社区讨论、提问问题、分享经验等方式与其他开发者交流和学习，从而更好地理解和使用插件。
通过合理选择和灵活运用插件，开发者可以更加高效地开发Uni-app应用，并且提升应用的质量和用户体验。
6.uni-app扩展组件和自定义组件
6.1. 扩展组件
Uni-app 的扩展组件是基于原生组件进行的扩展和封装，提供了更多的功能和选项，可以方便开发者快速实现各种复杂的交互效果和功能。
一些常用的扩展组件包括：
uView UI：uView UI 是一套基于 Vue.js 的高质量、多端统一的 UI 框架，提供了丰富的组件和模板，能够满足多种需求，并且支持多端兼容，包括微信小程序、H5、App等。
uni-popup：uni-popup 是一个弹出层组件库，提供了丰富的弹出层类型和动画效果，可以用于实现弹窗、提示框、菜单等功能。
uni-icons：uni-icons 是一个图标库，包含了各种常用的图标，开发者可以直接使用这些图标来美化应用界面。
这些扩展组件通常提供了丰富的功能和选项，可以帮助开发者快速实现各种复杂的交互效果和功能，并且可以根据需要进行定制和扩展。
6.2. 自定义组件
Uni-app 还支持开发者自定义组件，通过编写自定义组件的代码，可以实现各种特定的功能和效果，并且可以在项目中复用。
自定义组件的开发流程包括：
创建一个新的 Vue 组件文件（.vue）。
在组件文件中编写 HTML 结构、CSS 样式和 JavaScript 逻辑。
在需要使用该组件的页面中引入并注册组件。
在页面中使用组件标签来引用和显示组件。
通过自定义组件，开发者可以根据项目的需求和特点，实现各种定制化的功能和效果，从而提高开发效率和应用质量。
总的来说，Uni-app 提供了丰富的扩展组件和自定义组件功能，开发者可以根据项目的需求和特点，选择合适的组件方式，来实现各种复杂的交互效果和功能。
以下是它的一些实例：
示例1: 使用扩展组件 uView UI
首先，你需要安装 uView UI 插件：
npm install uview-ui
然后，在你的页面中引入需要的组件，比如 Button：
示例2: 使用自定义组件
假设你想要创建一个自定义的计数器组件，可以按照以下步骤：
1.创建一个名为 Counter.vue 的 Vue 组件文件。
- 在需要使用计数器的页面中引入并注册该组件
这样，你就可以在页面中使用自定义的计数器组件了。
以上示例演示了如何使用 uView UI 扩展组件和自定义的计数器组件。你可以根据自己的项目需求，选择合适的组件方式，来实现各种功能和效果。
7.常用API
7.1 页面导航相关 API
(1)uni.navigateTo：保留当前页面，跳转到应用内的某个页面
(2)uni.redirectTo：关闭当前页面，跳转到应用内的某个页面
(3)uni.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
(4)uni.reLaunch：关闭所有页面，打开到应用内的某个页面
这些 API 可以帮助你实现页面之间的导航。
7.2.数据存储相关 API
链接如下：https://blog.csdn.net/h356363/article/details/102642930
(1)uni.setStorage：将数据存储到本地缓存中
(2)uni.getStorage：从本地缓存中获取数据
(3)uni.removeStorage：从本地缓存中移除数据
(4)uni.clearStorage：清空本地缓存
这些 API 可以帮助你在应用中进行数据的存储和管理。
7.3网络请求相关 API
链接如下：https://uniapp.dcloud.io/api/request/request
一、uni.request 是一个在uni-app框架中用来发起网络请求的API。通过这个API，开发者可以在uni-app中实现向服务器端发送HTTP请求并获取响应数据的功能。uni.request允许开发者指定请求的URL、请求方法、请求头部信息、请求数据等内容，以及定义请求成功和失败时的处理逻辑。开发者可以利用uni.request来实现与服务器端进行数据交互的功能，例如获取远程数据、上传文件等操作。 在uni-app中，uni.request是一种常用的实现网络请求的方法，开发者可以根据自己的需求灵活运用该API来实现网络请求功能。
使用uni.request发起接口数据请求的实际案例：
描述：接口文档提供了一个get请求的接口，需要把接口的分类数据请求回来并渲染到页面当中。
具体步骤如下：
1、在method里面定义一个用于请求分类数据的方法 ，方法名为getClassifyList
2、在getClassifyList方法里面使用uni.request API请求接口的数据
3、把请求回来的数据渲染到页面上。
实际操作的代码案例如下：
还有一些常用的网络请求API
链接如下：https://zhuanlan.zhihu.com/p/604842918
(1)uni.downloadFile：下载文件
(2)uni.uploadFile：上传文件
(3)uni.connectSocket：连接 WebSocket
(4)uni.onSocketMessage：监听 WebSocket 接收到的消息
这些 API 可以帮助你实现网络请求和 WebSocket 连接。
8.总结
通过掌握以上知识，你可以快速上手Uni-app框架，实现一次开发，多端部署的跨平台应用开发目标。Uni-app的跨平台特性使得开发者可以更高效地利用已有的前端技能，无需学习多个平台的开发语言和技术栈，从而节省开发成本和时间。同时，Uni-app提供了丰富的组件和API支持，使得开发者能够轻松地构建各种复杂的跨平台应用，满足不同平台的需求和用户体验。
另外，Uni-app还提供了强大的调试和测试工具，帮助开发者快速定位和解决问题，保证应用程序的质量和稳定性。而且，Uni-app的持续更新和社区支持也为开发者提供了持续学习和探索的机会，帮助他们跟上行业的最新动态，不断提升自己的技能和竞争力。
总之，通过学习和掌握Uni-app框架，你将能够轻松实现一次开发，多端部署的跨平台应用开发目标，快速响应市场需求，为用户提供优质的跨平台应用体验。
扫一扫
821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
