一、关于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 进行跨平台应用开发,实现代码的复用和降低开发成本,提高开发效率。