uni-app基础知识总结_uniapp

一、uni-app简介与使用方法

1.1 uni-app简介

Uni-app是一个跨平台开发框架，可以帮助开发者快速构建多端应用，包括Web、iOS、Android、H5、小程序等。Uni-app的特点是使用Vue.js作为开发语言，可以在不同的移动端平台上共享组件库和业务逻辑代码，大大提高了开发效率和代码重用率。同时，Uni-app提供了丰富的原生API和插件来实现更多功能。

1.2  uni-app开发环境搭建

1.下载安装开发工具：首先，你需要下载并安装HBuilder X，这是DCloud（数字天堂）推出的一款支持HTML5的跨平台开发环境。它专为前端开发者打造，集成了一系列的开发工具和服务，使得开发者可以更方便、高效地进行uni-app的开发。同时，你也需要下载并安装微信开发者工具，以便在微信小程序模拟器中运行和调试你的uni-app项目。

2.创建uni-app项目：打开HBuilder X后，你可以通过其提供的界面来创建一个新的uni-app项目。在创建项目时，你需要设置一些基本的项目信息，如项目名称、项目路径、模板等。配置项目：创建项目后，你可能还需要进行一些基本的配置，如设置项目的图标、启动页面等。这些都可以在HBuilder X的项目管理器中进行。

3.配置项目：创建项目后，你可能还需要进行一些基本的配置，如设置项目的图标、启动页面等。这些都可以在HBuilder X的项目管理器中进行。

4.编写代码：在HBuilder X中，你可以使用熟悉的Web技术（HTML、CSS和JavaScript）来编写uni-app的代码。同时，你也可以利用uni-app提供的丰富组件和API来构建你的应用界面和功能。

5.运行和调试：完成代码编写后，你可以通过HBuilder X的运行功能来启动你的uni-app项目。你可以选择将项目运行到浏览器中进行预览，或者运行到微信开发者工具中进行更深入的调试。

二、uni-app开发基础知识

2.1 uni-app开发规范

2.1.1  代码编写规范

• 遵循一致的代码缩进和空格规则，确保代码整洁易读。
• 使用有意义的变量名和函数名，避免使用缩写或简写，以提高代码的可读性。
• 注释要清晰明了，解释代码的功能和逻辑，方便他人理解和维护。

2.1.2 项目结构规范

• 合理的项目结构有助于代码的管理和维护。一般来说，项目应该包括pages（页面）、components（组件）、static（静态资源）、utils（工具函数）等目录。
• 每个页面和组件都应该有自己的文件夹，并包含对应的.vue文件、.js文件、.json文件等。
• 静态资源如图片、字体等应放在static目录下，并按照一定的命名规则进行组织。

2.1.3 组件使用规范 

• 优先使用uni-app官方提供的组件，以确保兼容性和性能。
• 自定义组件时，要遵循Vue的单文件组件规范，确保组件的独立性和可复用性。
• 在使用组件时，要注意组件的属性和事件的传递方式，确保数据的正确流通。

2.1.4 性能优化规范 

• 尽量减少页面的加载时间和资源消耗，优化图片和资源的加载方式。
• 合理利用uni-app的懒加载功能，提高页面的响应速度。
• 避免在页面中频繁操作DOM，尽量使用Vue的数据驱动方式来实现界面的更新。

2.1.5 跨平台适配规范 

• uni-app支持多个平台，因此在开发过程中要注意不同平台之间的差异和特性。
• 针对不同平台进行适配和测试，确保应用在不同平台上都能够正常运行和展示。

2.1.6 代码审查和测试规范 

• 定期进行代码审查，确保代码质量和风格的一致性。
• 编写测试用例并进行测试，确保应用的稳定性和功能的正确性。

 2.2 uni-app文件目录结构

2.3 外部资源引入

2.3.1 引入外部的JS文件

在uni-app项目的pages目录下创建一个新的JS文件，然后在需要引用这个JS文件的页面中进行引入。假设你在pages目录下创建了一个名为test.js的文件，并在其中定义了一个方法。你可以在需要使用这个方法的页面中，通过import语句引入这个JS文件，并调用其中的方法。例如： 

 

2.3.2 引入外部的CSS文件 

你可以在项目的根目录下创建一个新的CSS文件，然后在需要引入这个CSS文件的Vue组件中，使用import语句引入该CSS文件。例如： 

 这样，你就可以在Vue组件的样式中使用这个CSS文件中定义的样式了。

2.3.3 引入插件

uni-app支持在manifest.json文件中声明插件，然后在需要使用插件的页面中进行引入。具体的引入方法会根据插件的不同而有所差异，通常插件的文档会提供详细的引入和使用说明。

2.4 uni-app的生命周期 

uni-app的生命周期主要包括应用生命周期、页面生命周期和组件生命周期三个部分。

应用生命周期是指应用程序从启动到关闭的整个过程，包括应用的启动、前后台切换、退出等。应用生命周期钩子函数由Uniapp提供，包括onLaunch（应用程序启动时触发，仅在应用程序第一次启动时触发）、onShow（应用程序进入前台时触发，可以获取到应用程序被打开的方式和场景值）、onHide（应用程序进入后台时触发）、onError（应用程序发生错误时触发，可以用来捕获和处理错误信息）以及onUniNViewMessage（监听来自nvue页面的消息）。

页面生命周期是指页面从创建到销毁的整个过程，包括页面的创建、显示、隐藏和销毁等。页面生命周期钩子函数也由Uniapp提供，如onInit（页面被初始化时触发，可以获取页面参数和数据）、onShow（页面被展示时触发，可以处理页面的显示效果和动画等操作）以及onUnload（页面被销毁时触发，可以进行资源释放和清理等操作）。

组件生命周期则是指组件从创建到销毁的整个过程，包括组件的创建、更新、销毁等。这部分与Vue组件的生命周期类似。

 2.5 uni-app路由操作

2.5.1 路由跳转 

在uni-app中，你可以使用uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch和uni.navigateBack等API进行页面跳转。

1. uni.navigateTo(OBJECT)
   • 用于保留当前页面，跳转到应用内的某个页面。
2. uni.redirectTo(OBJECT)
   • 关闭当前页面，跳转到应用内的某个页面。
3. uni.switchTab(OBJECT)
   • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
4. uni.reLaunch(OBJECT)
   • 关闭所有页面，打开到应用内的某个页面。
5. uni.navigateBack(OBJECT)
   • 关闭当前页面，返回上一页面或多级页面。可通过delta属性设置返回的页面数，不传则默认返回上一级。

2.5.2 路由传参 

1.通过URL携带参数
在跳转页面时，可以将参数附加到URL中，然后在目标页面通过this.$route.query获取这些参数。例如：

2.在目标页面获取参数

2.6 uni-app的页面样式及布局 

2.6.1 样式编写

uni-app支持在.vue文件中使用<style>标签来编写样式。你可以直接编写常规的CSS样式，也可以使用预编译的CSS工具，如Sass或Less。此外，uni-app还支持几种方式来引入样式，如直接在.vue文件中编写样式、引入外部的.css或.scss文件，以及使用scoped属性将样式限制在当前组件内，避免样式污染其他组件。

2.6.2 布局方式 

1. Flex布局：通过设置display:flex属性，你可以实现简单的自适应布局。Flex布局非常适合用于实现水平或垂直居中对齐、等高布局等复杂布局需求。
2. Grid布局：通过设置display:grid属性，你可以实现更复杂的自适应布局。Grid布局非常适合用于实现类似于网格的页面布局。
3. 组件库：uni-app自带了一些组件库，如uni-ui，你可以直接使用这些组件库中的组件进行页面设计。此外，你还可以使用第三方组件库，如vant、element-ui等

2.6.3 响应式布局 

在uni-app中，你可以使用媒体查询和单位转换等技术来实现响应式布局。例如，你可以根据设备的屏幕尺寸和分辨率来调整元素的尺寸和位置，以适应不同设备的显示需求。

2.6.4 注意事项 

在进行uni-app开发时，需要注意不同平台的兼容性。不同的平台可能对CSS属性和布局方式有不同的支持程度，因此你需要确保你的样式和布局在多个平台上都能正常工作。此外，你还需要注意性能优化，避免使用过多的样式和布局方式导致页面加载缓慢或渲染效率低下。

2.3 uni-app中Vue的使用 

2.3.1 使用Vue的注意事项

1. 生命周期差异：uni-app扩展了Vue的生命周期，除了Vue自身的生命周期外，还新增了应用生命周期和页面生命周期。这意味着你需要更深入地理解并合理使用这些生命周期钩子函数，确保你的代码在正确的时机执行。
2. 页面路由操作：与纯Vue应用不同，uni-app中的页面跳转和路由管理有其特定的API和规则。你需要使用uni-app提供的API（如uni.navigateTo、uni.redirectTo等）进行页面间的导航和传参，而不是Vue Router。
3. 组件使用：虽然uni-app支持大部分Vue组件的使用，但由于其跨平台特性，某些Vue组件可能无法在所有平台上正常工作。在使用组件时，需要特别注意组件的兼容性和平台差异。
4. 样式与布局：uni-app的样式和布局需要考虑到不同平台的差异。某些CSS属性和布局方式可能在某些平台上不被支持或表现不一致。因此，在编写样式时，你需要测试并确保其在不同平台上都能正确显示。
5. 权限与API使用：在uni-app中，某些API可能需要特定的权限才能使用。在调用这些API时，你需要确保已经获得了必要的权限，并妥善处理权限被拒绝的情况。此外，还需要注意API在不同平台上的差异和兼容性。
6. 性能优化：由于uni-app需要同时适配多个平台，因此性能优化尤为重要。你需要关注代码的复用性、资源的加载效率、页面的渲染性能等方面，以确保你的应用在各种设备上都能流畅运行。
7. 插件与扩展：虽然uni-app提供了丰富的功能和组件，但有时你可能需要使用一些第三方插件或扩展来满足特定需求。在选择和使用这些插件时，你需要确保它们与uni-app的兼容性，并仔细阅读其文档以了解其用法和限制。

2.4 Vue特性支持表 

2.4.1 全局配置

2.4.2 生命周期钩子