uni-app跨平台开发总结

一.介绍

1.概念

uni-app是一种基于Vue.js开发框架的跨平台应用开发框架，可以用于同时开发iOS、Android、H5和小程序等多个平台的应用。uni-app的设计理念是一套代码可以编译到多个平台运行，开发者只需要编写一次代码，就可以在多个平台上运行和发布应用。

uni-app的核心思想是使用一套Vue.js语法和组件体系，来实现多平台的兼容性。uni-app可以将Vue组件编译成原生小程序、H5、iOS和Android等平台的组件，保证了跨平台应用的一致性和性能。开发者可以使用熟悉的Vue开发方式，来开发跨平台应用，无需学习新的语法和技术。

uni-app支持各个平台的特有特性和能力，例如可以直接调用小程序的API，可以使用原生组件和插件，可以进行原生的性能优化和调试。uni-app还提供了丰富的插件市场，可以方便地集成第三方插件和服务，扩展应用的功能。

uni-app的开发流程简单易懂，可以使用Vue的开发工具和调试工具进行开发和调试。开发者只需要编写一次代码，然后使用uni-app的编译工具，就可以将应用发布到多个平台上。uni-app还提供了丰富的UI组件库和样式主题，可以快速搭建应用的界面和布局。

uni-app是一种简单易用的跨平台应用开发框架，可以帮助开发者快速地开发和发布应用到多个平台上，降低了应用开发的成本和难度。

2.特点

1. 跨平台： Uni-app可在微信、支付宝等平台运行，也可打包成原生应用在手机端运行。
2. 开发效率高：Uni-app使用Vue.js生态技术栈进行开发，减少了学习成本，提高了开发效率。
3. 组件丰富：Uni-app内置了众多常用组件，同时也支持第三方组件。
4. 双向绑定：Uni-app支持Vue.js的双向数据绑定，便于数据的传递、监听和管理。
5. 开放性：Uni-app基于Vue.js开发，支持大部分Vue.js生态技术栈，并支持自定义组件和插件的开发。

3.配置

• 安装uni-app开发工具：建议使用HBuilderX作为开发工具，因为它内置了uni-app所需的环境，开箱即用，无需配置nodejs。如果需要cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。
• 创建uni-app项目：在HBuilderX中，点击工具栏里的“文件” -> “新建” -> “项目”，然后选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建uni-app项目。
• 运行uni-app项目：在浏览器中运行uni-app项目，可以进入“hello-uniapp”项目，点击工具栏的“运行” -> “运行到浏览器” -> 选择浏览器，即可在浏览器里面体验uni-app的H5版。如果想在真机上运行uni-app，需要连接手机，开启USB调试，然后进入“hello-uniapp”项目，点击工具栏的“运行” -> “真机运行” -> 选择运行的设备，即可在该设备里面体验uni-app。

二.

1.组件

属性	描述
view	类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签
scroll-view	(可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等
swiper	滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图
text	类似于h5里面的span标签，文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异
button	uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享等功能。

2.路由

概述：uni-app项目的路由由框架统一管理，每新增一个页面，都需要在page.json里面进行配置，uni-app路由的跳转有2种方式，以下对这两种方式进行讲解：

方式一：

使用navigator组件进行跳转，该组件的属性说明如下：

属性名	类型	默认值	描述
url	String	无	应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加.vue后缀
open-type	String	navigate	跳转方式
delta	Number	无	当 open-type 为 'navigateBack' 时有效，表示回退的层数

方式二：

使用路由API进行跳转：

API	描述
uni.navigateTo()	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo()	关闭当前页面，跳转到应用内的某个页面
uni.switchTab()	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.reLaunch()	关闭所有页面，打开到应用内的某个页面
uni.navigateBack()	关闭当前页面，返回上一页面或多级页面

概述：uni-app完全支持Vue实例的生命周期，同时还新增了应用的生命周期和页面的生命周期。

3.生命周期

  应用生命周期列表

函数名	描述
onLaunch	应用初始化完成时触发（全局只触发一次）
onShow	应用启动，或从后台进入前台触发
onHide	应用从前台进入后台触发
onError	应用报错时触发

   页面生命周期列表

函数名	描述
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onHide	监听页面隐藏

 组件生命周期列表

函数名	描述
beforeCreate	实例初始化之后被调用
created	实例创建之后被调用
beforeMount	实例挂载之前被调用
mounted	实例挂载之后被调用