一、关于uniapp的简介
1.uni-app概述
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
2.uni-app由来
是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。
3.uni-app特点
-
跨平台开发： Uni-app 使用了一套基于 Vue.js 的语法，通过编写一份代码，可以生成适用于多个平台的应用程序，极大地提高了开发效率。
-
支持的平台： Uni-app 目前支持微信小程序、H5、App（iOS 和 Android）、以及各种快应用等多个平台。你可以使用同一份代码，在这些平台上构建应用。
-
基于 Vue.js： Uni-app 的开发语法基于 Vue.js，如果你已经熟悉 Vue.js，那么学习和使用 Uni-app 将会非常容易。
-
易于上手： Uni-app 提供了丰富的文档和示例，对于新手来说，学习和上手 Uni-app 并不困难。同时，Uni-app 社区也非常活跃，你可以在社区中获取到丰富的资源和帮助。
-
组件丰富： Uni-app 内置了丰富的组件库，包括页面、导航、表单、媒体等各种类型的组件，可以满足大部分应用开发的需求。同时，Uni-app 也支持自定义组件的开发和使用。
-
性能优化： Uni-app 在跨平台性能优化方面做了很多工作，确保应用在不同平台上的运行效果和性能都能够得到
二、uni-app 搭建开发环境
-
安装 Node.js： Uni-app 的开发依赖于 Node.js，因此首先需要安装 Node.js。你可以到 Node.js 的官方网站（https://www.dcloud.io/hbuilderx.html）
-
安装 HBuilderX： HBuilderX 是 Uni-app 推荐的开发工具，它集成了代码编辑、调试、构建等功能，是进行 Uni-app 开发的首选工具。你可以到官方网站（https://www.dcloud.io/hbuilderx.html）下载并安装 HBuilderX。
-
创建 Uni-app 项目： 安装好 HBuilderX 后，打开它，选择新建项目 -> Uni-app 项目，填写项目名称、项目路径等信息，然后点击确定即可创建一个新的 Uni-app 项目。
-
选择模板： 在创建项目时，你可以选择使用默认模板，也可以选择其他模板。Uni-app 提供了一些官方模板，包括空模板、微信小程序模板、H5模板等，你可以根据自己的需求选择合适的模板。
-
运行项目： 项目创建完成后，你可以点击 HBuilderX 工具栏上的运行按钮，选择目标平台（如微信小程序、H5 等），然后就可以在对应的平台上预览你的应用了。
-
编写代码： 开始编写你的 Uni-app 应用代码。Uni-app 使用 Vue.js 的语法，因此如果你熟悉 Vue.js，那么编写 Uni-app 应用会非常简单。
-
调试和测试： 在编写代码的过程中，你可以使用 HBuilderX 提供的调试功能进行代码调试和测试，确保应用的正常运行。
三、uniapp开发三剑客
1.页面布局（Vue 页面）
Uni-app 使用 Vue.js 来进行页面布局。你可以使用 Vue.js 的模板语法编写页面结构，并通过 Vue.js 的指令来实现动态数据绑定和页面逻辑处理。在页面布局中，你可以使用 Vue.js 提供的诸多指令、组件和插槽等功能，来构建出丰富多样的页面结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
2.样式（CSS）
Uni-app 支持使用普通的 CSS 来定义页面的样式。你可以在 Vue 页面中使用 <style> 标签或者在单独的样式文件中编写 CSS 样式。Uni-app 也支持预处理器如 SCSS、LESS 等，使得样式的编写更加灵活和高效。
<style>
@import "../../common/uni.css";
.uni-card {
box-shadow: none;
}
</style>
3.JavaScript 逻辑（Vue 组件的 JavaScript 部分）
Uni-app 提供了丰富的生命周期钩子函数，让你可以在不同阶段执行相应的逻辑。你可以在 Vue 组件中编写 JavaScript 逻辑，处理页面的数据、事件响应、生命周期等。在 Uni-app 中，页面的 JavaScript 逻辑主要由 Vue 组件的 JavaScript 部分来实现。
4.uniapp和小程序，传统web对比
| 结构 | 小程序 | 传统web | uniapp |
|---|---|---|---|
| 结构布局 | Wxml | Html | 写在template里 |
| 样式 | Wxss | Css | 写在style里 |
| 逻辑 | JavaScript | JavaScript | 写在script里 |
| 配置 | Json | 无 | Json |
五、uniapp基础组件信息
1.uni-app的组件
基础组件: 基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如<view>组件。
uni-ui扩展组件的使用方式：
方式一：在创建项目的时候，直接选择包含uni-ui模板进行创建的项目。
方式二：在已有项目的基础上进行下载使用，网址。
2.常见组件
| 属性 | 描述 |
| scroll-view | (可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等。 |
| $refs | 父组件可以通过 ref 属性获取子组件的引用，从而直接调用子组件的方法或访问子组件的属性。 |
| text | 类似于h5里面的span标签，文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异 |
| button | uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享等功能。 |
| view | 类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签 |
六、uni-app的生命周期
1.Uni-app 组件生命周期
-
beforeCreate： 组件实例被创建之前调用。
-
created： 组件实例已经被创建，但尚未挂载到 DOM 中。
-
beforeMount： 组件挂载之前调用。
-
mounted： 组件已经挂载到 DOM 中。
-
beforeUpdate： 组件更新之前调用，发生在数据更新之前。
-
updated： 组件更新之后调用，发生在数据更新之后。
-
beforeDestroy： 组件销毁之前调用。
-
destroyed： 组件销毁之后调用。
2.小程序的生命周期
- onLoad:加载类似于vue中的created生命周期
- onShow：页面显示时执行
- onReady：准备
- onHide：后台运行时执行
- onUnload：卸载
七、uni-app的路由操作
1.路由操作
主要是通过 Vue Router 来管理的。Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由控制。下面是在 Uni-app 中进行路由操作的基本步骤：
2. 定义路由表
在项目的 pages.json 文件中定义路由表，指定页面路径和对应的 Vue 组件。例如：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "关于"
}
},
// 其他页面...
]
}
3. 使用路由导航
在 Vue 组件中，可以通过 $router 对象进行路由导航，常用的方法包括：
- 跳转到指定页面： 使用
$router.push()方法跳转到指定的页面路径。
this.$router.push('/pages/about/about');
- 替换当前页面： 使用
$router.replace()方法替换当前页面，不会留下历史记录。
this.$router.replace('/pages/about/about');
- 返回上一页： 使用
$router.back()方法返回上一页，相当于浏览器的后退操作。
| 属性名 | 类型 | 默认值 | 描述 |
| url | String | 无 | 应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加.vue后缀 |
| open-type | String | navigate | 跳转方式 |
| delta | Number | 无 | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 |
八、总结
-
组件化开发：支持组件化开发，提高代码复用性和维护性。
-
多端适配：提供丰富的多端适配能力，确保应用在各个平台上的良好运行。
-
原生能力调用：可调用原生能力和第三方 SDK，如相机、地理位置、微信 SDK 等。
-
状态管理：支持 Vuex 进行全局状态管理，便于管理应用的状态和数据流动。
-
路由管理：使用 Vue Router 进行路由管理，实现页面间的跳转和参数传递。
-
网络请求：提供内置的
uni.request方法，方便进行网络请求。 -
打包与发布：提供丰富的打包与发布功能，支持命令行和可视化界面操作。
-
调试与工具：拥有 HBuilderX 等调试工具，支持代码编写、调试和模拟器预览。
-
生态与社区：拥有庞大的开发者社区和丰富的生态系统，提供各种开发经验、技巧和插件。
通过以上特点和优势，开发者可以更加高效地利用 Uni-app 进行跨平台应用开发，实现代码的复用和降低开发成本，提高开发效率。
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
