一 、uni-app简介与使用方法
1.1 uni-app简介
uni-app是一个全端开发框架，可以将开发的项目一次性编译为Web、App、小程序（微信、支付宝、百度、头条、QQ、钉钉、淘宝）、快应用。uni-app支持使用各种IDE进行开发，如Vscode,WebStorm,但与HBuilderX结合更完美。
1.2 uni-app的由来
uni-app的由来可以追溯到2018年，它是由中国科技公司大前端团队（前身是DCloud公司）开发的。DCloud公司是一家专注于移动应用开发技术的公司，早在2013年就推出了HBuilder开发工具，该工具是一款基于HTML5的跨平台移动应用开发工具，被广泛应用于国内外的移动应用开发中。
随着移动应用开发技术的不断发展，DCloud公司意识到了Vue.js框架的强大和流行，于是在2018年推出了uni-app框架，将Vue.js与跨平台开发结合起来。uni-app基于Vue.js框架，通过封装和优化，使得开发者可以用Vue.js语法开发一次代码，然后编译成多个平台的原生应用，包括iOS、Android、H5等。
uni-app的推出，受到了广大开发者的欢迎和关注，成为了一种流行的跨平台应用开发框架。它简化了跨平台应用开发的流程，提升了开发效率，同时也为开发者提供了更多的选择和灵活性。
1.3 uni-app的特点
uni-app是一种基于Vue.js框架的跨平台应用开发框架，它可以让开发者使用Vue.js进行一次开发，同时将代码编译成各种平台上的原生应用，包括iOS、Android、H5等。
1.跨平台性：uni-ann在跨平台的过程中不牺牲平台特色，而是结合了平台专有特征，真正做到海纳百川，各取所长。在跨平台的同时，通过条件编译+平台特有API(Application Proprammina Interface 应用程序接口)调用，可以为某平台编写个性化代码，调用专有特征而不影响其他平台。uni-app支持原生代码混写和原生SDK(SoftwareDevelopment Kit，软件开发工具包)集成。
2.基于Vue.js： uni-app基于Vue.js框架，开发者可以使用Vue.js熟悉的语法和开发方式进行开发，降低学习成本。
3.灵活扩展： uni-app支持插件市场和组件市场，开发者可以根据需求选择性地引入插件和组件，提升开发效率。
4.性能优化： uni-app对性能进行了优化，包括页面预加载、数据请求优化等，提升了应用的运行效率和用户体验。
总的来说，uni-app是一种简单易用、跨平台性强、性能优秀的应用开发框架，适用于各种类型的应用开发。
1.4 uni-app开发工具简介
在uni-app的日常开发中，使用得比较多的是HBuilderX编辑器。“HBuilderX”中，H是HTML(Hyper Text Markup Language，超文本标记语言)，Builder是构造者，X是HBuilder的下一代版本，简称HX。HX是为前端开发者服务的通用IDE，或称为编辑器，与VSCode、Sublime、WebStorm等编辑器类似，可以开发普通Web项目，也可以开发DCloud推出的uni-app项目、5+App项目、wap2app项目。除了支持前端技术栈，HBuilderX也可以借助插件支持PHP等其他语言。
HBuilderX的主要特点和功能：
(1)轻巧、极速：HBuilderX绿色发行包只有10MB。不管是启动、打开大文档，还是编码提示，都能极速响应。采用C++的架构，性能远超Java或Electron架构。
(2)强大的语法提示：HBuilderX具有优秀的AST(Abstract Syntax Tree，抽象语法树)语法分析能力，其语法提示精准、全面、细致。
(3)专为Vue打造：提供比其他工具更优秀的Vue支持，大幅提升Vue开发效率。
(4)清爽护眼：界面清爽简洁，绿柔主题适合人眼长期观看。
(5)高效极客操作：HBuilderX对字处理提供了强大的支持，多光标、智能双击、选区管理等让文字处理的效率大幅提升。
(6)markdown优先：HBuilderX是唯一一个新建文件默认类型是markdown的编辑器，也是对MD书写支持最强的编辑器，甚至可以直接粘贴表格、图片。
(7)小程序支持：国外的开发工具没有对中国的小程序开发进行优化，HBuilderX可以新建小程序项目，为国人提供更高效的工具。
(8)拓展性强：HBuilderX支持Java插件、Node.js插件，并兼容很多VSCode插件及代码块；还可以通过外部命令方便地调用各种命令行功能，并设置快捷键。如果想要使用其他工具(如VSCode或Sublime)的快捷键，可以在【工具】→【预设快捷键方案切换】菜单中进行切换。
二 、uni-app开发规范
在使用uni-app进行开发时，通常会遵循一些开发规范以保证项目的可维护性和可扩展性。以下是一些常见的uni-app开发规范：
-
目录结构规范： 统一的目录结构有助于开发者更好地组织和管理项目。一般来说，uni-app项目的主要目录结构包括
pages（页面文件）、components（组件文件）、static（静态资源文件）、utils（工具函数文件）等。 -
命名规范： 统一的命名规范有助于提高代码的可读性和可维护性。包括页面、组件、变量、函数等命名都应该采用有意义的英文单词或者驼峰命名法。
-
代码规范： 统一的代码风格有助于多人协作开发时的代码一致性。开发者可以根据个人或团队的习惯选择合适的代码规范，比如缩进、注释、命名等。
-
样式规范： 统一的样式规范有助于保持页面样式的一致性。开发者可以使用预处理器（如Less、Sass等）编写样式，并遵循统一的命名规范和组织结构。
-
组件化开发： uni-app支持组件化开发，开发者应该充分利用组件化的优势，将页面拆分成独立的组件，提高代码复用性和可维护性。
-
异步请求规范： 在进行异步请求时，应该遵循一定的规范，比如统一错误处理、合理使用loading状态等，以提高用户体验和代码可维护性。
-
性能优化规范： uni-app提供了一些性能优化的手段，比如图片懒加载、页面预加载等，开发者应该根据实际情况合理使用这些优化技术。
-
版本管理规范： 使用版本管理工具（如Git）管理项目的版本，合理使用分支管理、提交规范等，以保证代码的可追溯性和协作效率。
总的来说，uni-app开发规范可以根据项目的需求和团队的实际情况进行适当调整和补充，但以上提到的规范是大多数项目都应该遵循的基本规范。
1. Vue单文件组件规范
编写Vue单文件组件时，遵循一致的规范有助于提高代码的可读性、可维护性和团队协作效率。以下是一些常见的Vue单文件组件规范：
-
文件命名： 单文件组件的文件名通常使用PascalCase（首字母大写）命名规范，例如
MyComponent.vue。 -
组件结构： 单文件组件通常包含三个主要部分：模板（template）、脚本（script）和样式（style），它们分别用
<template>、<script>和<style>标签包裹，并按照顺序排列。 -
模板： 在模板中应该避免使用复杂的逻辑，尽量保持简洁，可读性高。推荐使用语义化的HTML标签，避免使用直接操作DOM的方式。
-
脚本： 在脚本部分，首先应该导入Vue库，并导出一个Vue实例或者组件对象。在脚本中可以包含组件的逻辑、数据和生命周期钩子等。
-
样式： 样式部分可以使用CSS、SCSS、Less等预处理器编写样式，建议使用局部作用域（scoped）来限制样式的作用域，避免样式污染和冲突。
-
命名规范： 组件中的变量、方法、组件名等命名应该遵循一致的命名规范，通常使用camelCase命名法，并且具有描述性。
-
组件导出： 如果是默认导出，应该使用
export default关键字导出组件，如果是命名导出，则使用export关键字导出。 -
组件通信： 合理使用Vue提供的组件通信方式，比如props和events来实现父子组件之间的通信，或者使用Vuex来管理全局状态。
-
注释： 在必要的地方添加注释，解释代码的作用、用法或者注意事项，提高代码的可读性和可维护性。
-
代码格式化： 使用一致的代码格式化工具（如ESLint、Prettier等）来格式化代码，保持代码风格的一致性。
遵循以上规范可以使得Vue单文件组件的开发更加规范化、可维护化，提高团队协作效率和代码质量。
2.uni-app接口规范
编写uni-app应用时，与后端接口交互的规范是至关重要的，它可以确保前后端之间的通信顺畅、数据传输可靠。以下是一些常见的uni-app接口规范：
-
接口路径： 接口路径应该清晰明了，能够反映其功能和作用。通常采用RESTful风格的路径命名，例如
/api/users表示获取用户列表。 -
请求方法： 使用合适的HTTP请求方法，如GET、POST、PUT、DELETE等，来执行对应的操作。GET用于获取资源，POST用于创建资源，PUT用于更新资源，DELETE用于删除资源。
-
请求参数： 参数应该按照接口文档要求传递，可以分为查询参数（query parameters）、路径参数（path parameters）、请求体参数（request body parameters）等。确保参数的名称和类型与后端接口要求一致。
-
请求头： 如果需要在请求头中添加特定的信息，如认证信息、Token等，应该按照接口文档要求添加。
-
响应数据： 接口返回的数据应该是结构清晰、语义明确的JSON格式数据。通常包括状态码（status code）、消息（message）、数据（data）等字段，可以根据具体需求进行扩展。
-
错误处理： 对于可能发生的错误情况，应该返回合适的HTTP状态码，并在响应数据中提供错误信息，以便前端能够进行相应的处理。
-
安全性： 在涉及用户隐私或敏感信息的接口中，需要采取适当的安全措施，如使用HTTPS协议进行数据传输，对用户输入进行有效的验证和过滤，防止SQL注入、跨站脚本攻击等安全漏洞。
-
文档和注释： 提供清晰完整的接口文档，包括接口路径、请求方法、请求参数、响应数据等信息，并在代码中添加必要的注释，说明接口的作用、参数含义、返回数据结构等。
-
版本控制： 在接口发生变更时，应该及时更新接口文档，并根据需要对接口进行版本控制，以确保旧版本的兼容性。
-
测试和调试： 在开发阶段，需要对接口进行测试和调试，确保接口的功能和性能符合预期，并及时修复发现的问题。
遵循以上规范可以使得uni-app应用与后端接口的交互更加规范化、可靠性更高，有助于提高应用的质量和用户体验。
三、uni-app的生命周期
1.应用生命周期
uni-app框架提供了一套类似于Vue.js的生命周期钩子函数，用于在组件的不同阶段执行特定的操作。这些生命周期钩子函数可以帮助开发者在组件的不同生命周期中执行初始化、数据加载、事件处理等操作。以下是uni-app中常用的生命周期钩子函数：
-
beforeCreate： 在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，实例的属性和方法还不能被访问。
-
created： 实例已经创建完成之后被调用。在这个阶段，可以访问实例的属性和方法，但是DOM还未生成，无法访问DOM。
-
beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。
-
mounted： 在挂载完成之后被调用，对应于 Vue 中的 mounted 钩子。在这个阶段，组件已经被挂载到DOM中，可以访问DOM节点，进行DOM操作。
-
beforeUpdate： 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。
-
updated： 在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。
-
beforeDestroy： 在实例销毁之前调用。在这个阶段，实例仍然完全可用，可以执行清理操作。
-
destroyed： 在实例销毁之后调用。在这个阶段，实例的所有指令已经解绑，所有事件监听器已被移除，所有子实例也已被销毁。
除了以上这些常用的生命周期钩子函数外，uni-app还提供了一些特定平台的生命周期钩子函数，如onLoad、onReady、onShow、onHide等，用于处理特定平台的生命周期事件。这些钩子函数可以在uni-app的页面组件和组件中使用。
在实际开发中，开发者可以根据需要重写这些生命周期钩子函数，在不同的阶段执行相应的操作，实现业务逻辑的控制和管理。
2.页面生命周期
在uni-app中，页面也有自己的生命周期，包括全局生命周期和页面独有的生命周期。下面是uni-app页面的生命周期：
全局生命周期：
-
onLaunch(options)： 应用初始化时触发，全局只触发一次。可以在此生命周期中获取并处理应用启动参数。
-
onShow(options)： 应用启动、或从后台进入前台显示时触发。可以在此生命周期中获取并处理从其他页面传递的参数。
-
onHide()： 应用从前台进入后台时触发。
-
onError()： 当 uni-app 运行出现错误时触发。
-
onUniNViewMessage(message)： 在uni-app中使用原生 nvue 时，用于监听 nvue 页面发送的消息。
页面独有生命周期：
-
onLoad(query)： 页面加载时触发，可以在此生命周期中获取页面加载的参数。
-
onShow()： 页面显示时触发，包括首次进入页面和从其他页面返回到该页面。
-
onReady()： 页面初次渲染完成时触发。表示页面已经准备就绪，可以进行页面的渲染和操作。
-
onHide()： 页面隐藏时触发，例如跳转到其他页面时。
-
onUnload()： 页面卸载时触发，可以在此生命周期中执行一些清理操作，如清除定时器、取消订阅等。
-
onPullDownRefresh()： 下拉刷新时触发，用于处理下拉刷新事件。
-
onReachBottom()： 页面上拉触底时触发，用于实现上拉加载更多数据。
-
onPageScroll(Object)： 页面滚动时触发，可以在此生命周期中实现一些滚动相关的效果。
-
onResize(Object)： 页面尺寸改变时触发，如横屏、竖屏切换时。
-
onTabItemTap(Object)： 在使用tabbar组件时，点击 tab 时触发。
这些生命周期函数可以在uni-app的页面组件中进行监听和使用，通过重写这些函数，可以实现页面的初始化、数据加载、事件处理等功能，从而实现丰富的页面交互效果。
3.组件生命周期
在uni-app中，组件也有自己的生命周期，类似于Vue.js的生命周期。下面是uni-app组件的生命周期：
创建生命周期：
-
beforeCreate()： 在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，实例的属性和方法还不能被访问。
-
created()： 实例已经创建完成之后被调用。在这个阶段，可以访问实例的属性和方法，但是DOM还未生成，无法访问DOM。
挂载生命周期：
-
beforeMount()： 在挂载开始之前被调用，相关的 render 函数首次被调用。
-
mounted()： 在挂载完成之后被调用，对应于 Vue 中的 mounted 钩子。在这个阶段，组件已经被挂载到DOM中，可以访问DOM节点，进行DOM操作。
更新生命周期：
-
beforeUpdate()： 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。
-
updated()： 在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。
销毁生命周期：
-
beforeDestroy()： 在实例销毁之前调用。在这个阶段，实例仍然完全可用，可以执行清理操作。
-
destroyed()： 在实例销毁之后调用。在这个阶段，实例的所有指令已经解绑，所有事件监听器已被移除，所有子实例也已被销毁。
这些生命周期函数可以在uni-app的组件中进行监听和使用，通过重写这些函数，可以实现组件的初始化、数据加载、事件处理等功能，从而实现丰富的组件交互效果。
四、uni-app的路由操作
uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，类似于小程序在app.json中配置页面路由。因此，uni-app路由的使用方法与Vue Router同，如仍希望采用Vue Router方式管理路由，可在插件市场搜索Vue-Router。
1. 路由跳转
在uni-app中，可以使用内置的uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab 等方法进行页面的路由跳转。
1.uni.navigateTo： 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。示例：
2.uni.redirectTo： 关闭当前页面，跳转到应用内的某个页面。不允许跳转到tabBar页面，并且使用uni.navigateBack也无法返回到原页面。示例：
3.uni.reLaunch： 关闭所有页面，打开到应用内的某个页面。示例：
4.uni.switchTab： 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。示例：
这些方法可以通过触发事件、点击按钮等方式来调用，实现页面之间的跳转和导航。在url参数中，可以指定要跳转的页面路径，路径可以是相对路径或绝对路径。
2.页面管理
在uni-app中，页面管理是指如何管理应用程序中的各个页面，包括页面的创建、跳转、销毁等操作。uni-app提供了一套完整的页面管理机制，可以方便地管理应用程序中的页面。
页面创建与跳转：
-
创建页面： 在uni-app中，页面可以通过在
pages.json文件中配置页面路径来创建，也可以使用uni.navigateTo、uni.redirectTo等方法动态创建页面。 -
页面跳转： 使用
uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab等方法进行页面跳转。具体使用方法已在前面的回答中介绍。
页面间传值：
-
通过URL参数传值： 可以在跳转页面时通过URL参数传递数据，接收页面可以通过
this.$route.query或this.$mp.query来获取参数。 -
使用全局变量或状态管理器： 可以使用Vue.js的全局变量、Vuex状态管理器或uni-app自带的App.vue作为全局数据中心，在不同页面间共享数据。
-
通过事件总线进行通信： 可以创建一个全局的事件总线实例，不同页面通过事件的触发和监听来进行通信。
页面生命周期管理：
uni-app中的页面具有生命周期，可以通过重写页面组件的生命周期方法来管理页面的生命周期，如onLoad、onShow、onReady、onHide、onUnload等。
页面销毁与返回：
-
页面销毁： 页面可以通过
uni.reLaunch、uni.redirectTo等方法销毁，也可以在页面组件的生命周期方法中进行销毁操作。 -
返回页面： 可以使用
uni.navigateBack方法返回上一个页面，也可以通过页面导航栏、按钮等触发返回操作。
通过以上方式，可以在uni-app中方便地管理页面，实现页面的创建、跳转、数据传递、生命周期管理等功能。
五、uni-app的基础配置
1.全局配置
概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。
配置项列表
| 属性 | 类型 | 必填 | 描述 |
| globalStyle | Object | 否 | 设置默认页面的窗口表现 |
| pages | Object Array | 是 | 设置页面路径及窗口表现 |
| tabBar | Object | 否 | 设置底部 tab 的表现 |
| condition | Object | 否 | 启动模式配置 |
| easycom | Object | 否 | 组件自动引入规则 |
| subPackages | Object Array | 否 | 分包加载配置 |
更多详细参考此链接：配置项列表
2.应用配置
概述：应用配置主要在manifest.json文件里进行配置，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
配置项列表
| 属性 | 类型 | 默认值 | 描述 |
| name | String | 无 | 应用名称 |
| appid | String | 新建 uni-app 项目时，DCloud 云端分配。 | 应用标识 |
| description | String | 无 | 应用描述 |
| versionName | String | 无 | 版本名称，例如：1.0.0。详见下方Tips说明 |
| versionCode | Number | 无 | 版本号，例如：36 |
更多详细参考此链接：配置项列表
3.页面配置
概述：页面配置主要配置页面的样式、标题、导航栏等等，主要在page.json文件中的pages节点进行页面的配置，页面配置的权重高于全局配置
pages属性表
| 属性 | 类型 | 默认值 | 描述 |
| path | String | 无 | 配置页面的路径 |
| style | Object | 无 | 配置页面的窗口表现（样式） |
更多详细参考此链接：pages属性表
六、uni-app内置组件
1.外部资源的引入
在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。
1、本地图片或视频的引入
-
绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。
例如：<image src="https://example.com/images/image.jpg">
-
相对路径，需提供相对于当前文件的路径
例如：<image src="../../static/images/image.jpg">
或者
<image src="@/static/images/image.jpg"> 但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。
2、js文件的引入
例如：import "../../common/js/index.js"
或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）
写法一： import common from '@/utils/common.js'
写法二： import common from '../../utils/common.js' 具体相对路径请根据实际文件夹情况来设置
3、css文件的引入
写法一： @import "@/styles/common.css"
写法二： @import "../../styles/common.css" 具体相对路径请根据实际文件夹情况来设置
2.uni-app组件基础信息
概述：组件是页面的基本组成单位，类似原HTML页面的标签，主要用于进行页面结构的搭建。
组件的组成结构：开始/结束标签、内容、属性、属性值。
基础结构如下图所示：
常用组件
| 属性 | 描述 |
| view | 类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签 |
| scroll-view | (可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等 |
| swiper | 滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图 |
| text | 类似于h5里面的span标签，文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异 |
| button | uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享等功能。 |
更多详细组件参考此链接：更多组件的使用
3.uni-app的页面样式与布局
一、uni-app尺寸单位
在 uni-app 中，可以使用以下几种尺寸单位来定义页面元素的大小：
1、px : 像素（Pixel）是最常见的尺寸单位，表示固定大小的像素值。在 uni-app 中，1px 相当于设备上的一个物理像素。
2、rpx : rpx（Responsive Pixel）是相对长度单位，可以根据屏幕宽度进行自适应缩放。在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。通常在 uni-app中推荐使用rpx来定义长度单位，特别是用于移动端小程序和 App 的开发。
3、百分比（%）: 百分比是相对长度单位，基于父元素的大小来定义元素的大小。可以使用百分比来实现响应式布局，让页面元素根据父元素的大小进行自适应调整。
二、设置背景图片注意事项
-
支持base64格式的图片，网址
-
支持网络路径图片。
-
支持小于40KB的图片。
-
使用本地背景图需注意：在线压缩图片
-
-
若背景图小于40KB,uni-app编译到不支持本地背景图片的平台时，会自动将其转换为base64格式。
-
若背景图大于40KB,不建议使用，若执意使用的话，需要手动将其转换为base64格式使用，或最好将其上传到服务器上面，通过网络路径来引用。
本地背景图引用路径建议使用"~@"格式来引用，例如：
-
.test{background: url("~@/static/img1.png");}
-
-
三、使用字体图标
uni-app支持各种字体图标的使用，以下讲解几种使用字体图标的方式：
-
方式一：使用网络路径字体图标（以阿里巴巴矢量图标库为例）
-
1、注册登录阿里巴巴矢量图标库，找到自己想要的图标，加入购物车，然后新建一个项目，把购物车的图标加入项目中，然后进入自己的项目图标，复制css代码
-
2、在项目的App.vue中引入刚刚复制的代码
-
3、在页面中通过class使用字体图标
-
-
方式二：使用本地路径的字体图标（以阿里巴巴矢量图标库为例）
-
1、下载字体图标
-
2、把下载的字体图标放置到uni-app项目的static目录中
-
3、修改iconfont.css的引入路径
-
4、在App.vue中引入iconfont.css
-
5、在页面中通过class使用字体图标
-
七、常用API
概述：uni-app 是一个跨平台应用开发框架，具有丰富的 API 可供开发者使用，涵盖了页面开发、网络请求、
数据存储、设备信息获取、用户交互等多个方面。以下是 uni-app 中一些常用 API 的概述。
页面导航 API：包括 uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab 等用于页面跳转的 API，可以实现页面之间的跳转和切换。
数据存储 API：包括 uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync 等用于本地数据存储的 API，可以实现数据的存储和读取操作。
网络请求 API：包括 uni.request、uni.uploadFile、uni.downloadFile 等用于发起网络请求的 API，支持处理 HTTP 请求、上传文件、下载文件等操作。
用户界面 API：包括 uni.showToast、uni.showModal、uni.showLoading、uni.showActionSheet 等用于显示用户界面的 API，可以实现各种提示、弹窗、加载动画等功能。
多媒体 API：包括 uni.chooseImage、uni.previewImage、uni.chooseVideo、uni.createAudioContext 等用于处理图片、视频、音频等多媒体内容的 API。
位置信息 API：包括 uni.getLocation、uni.openLocation 等用于获取和展示地理位置信息的 API，支持获取当前位置、查看地图等功能。
数据的缓存
在Uni-app中，数据缓存是指将应用程序中的数据存储在本地设备上，以便在应用程序关闭后或用户重新打开应用程序时保留数据。这对于提高应用程序性能、减少网络请求和改善用户体验非常有用。
常用的数据缓存列表
| API | 描述 |
uni.setStorage（） | 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 |
uni.setStorageSync（） | 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 |
uni.getStorage() | 从本地缓存中异步获取指定 key 对应的内容 |
uni.getStorageSync() | 从本地缓存中同步获取指定 key 对应的内容。 |
uni.removeStorage() | 从本地缓存中异步移除指定 key。 |
更多详细参考此链接：数据缓存API
网络请求 API
一、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、把请求回来的数据渲染到页面上。
实际操作的代码案例如下：
八、运行环境的判断
1.开发环境和生产环境的判断
uni-app 可通过process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或者生产服务器的动态切换。在HBuilderX中，单击[运行]按钮编译出来的代码是开发环境，单击[发行]按钮编译出来的代码是生产环境。
例如：
2. 当前运行平台的判断
在 uni-app 中，可以通过判断运行平台的方式来实现特定平台下的逻辑处理。uni-app支持多个平台，包括H5、App（包括iOS和Android）、小程序（包括微信小程序、百度小程序、支付宝小程序、头条小程序等）等。判断平台主要有两种方式：编译期判断、运行期判断。
一、编译期判断，即条件编译，通过编译期判断可以在不同平台的代码包构建阶段针对不同平台编写不同的代码，以优化应用程序在不同平台上的运行效果。
以下代码是在js、template 组件和css中的具体写法
JavaScript
// #ifdef H5 | |
此处的js代码只对h5端有效果 | |
// #endif | |
<!-- #ifdef MP-WEIXIN --> | |
<view>此处的标签只在微信端有效</view> | |
<!-- #endif --> | |
/* #ifdef H5 */ | |
此处样式只对H5有效果 | |
/* #endif */ | |
取反，代码除了某个端，其他端都有效果 | |
<!-- #ifndef H5 --> | |
<view>以上标签除了H5端都显示</view> | |
<!-- #endif --> |
输入以上代码的快捷方式：输入：ifdef 选择对应的平台，回车即可 或者 ifn 选择对应的平台，回车即可
参考链接：条件编译处理多端差异
二、运行期判断：通过运行期判断可以在应用程序运行时动态地识别当前所处的平台，从而根据不同平台执行相应的逻辑处理。主要通过在代码中调用相应的 API 来获取当前的平台信息来实现判断。
九、uni-app扩展组件和自定义组件
1.uni-ui扩展组件
uni-app的内置组件只能满足基础的需求，当需要更多场景时，则需要用到uni-app的扩展组件来实现，扩展组件是对内置组件进行了二次封装，是官方提供的uni-ui扩展组件。
uni-ui扩展组件的使用方式：
方式一：在创建项目的时候，直接选择包含uni-ui模板进行创建的项目。
方式二：在已有项目的基础上进行下载使用，网址。
uni-ui扩展包安装成功之后，找到自己项目所需要的组件，直接复制到页面使用即可，此操作类似vue的element-ui框架的使用：
2.自定义组件使用
一、自定义组件使用的步骤：
1、在components新增一个自定义组件，如custom-button
2、编写组件内容
3、在页面引入、注册、使用组件
Tip 小技巧：
如果在新建自定义组件的时候，起名字的时候以uni-开头，即可直接在页面使用，不需要引入和注册，例如：
3.第三方UI库的使用
uni-app有自己的内置组件，内置组件基本适配了手机的风格。但有时候内置组件只能满足基础需求，当需要更多场景时，就要使用到扩展组件。从性能上面来说，扩展组件的性能略低于内置组件，因此开发者切勿抛弃内置组件，直接使用全套的第三方UI组件库。
uni-app官方对组件的使用建议如下：
1、优先使用内置组件
2、然后使用uni-ui扩展组件
3、其他需求依靠插件市场的其他组件灵活补充。
以下介绍其中一款第三方插件的使用流程，以uView为例：
1、前往uView插件市场，下载相关插件到项目中，下载网址为：网址
2、进行项目的基础配置
2.1 main.js中添加如下配置：
//按照自己项目的实际路径引入 | |
import uView from '@/uni_modules/uview-ui' | |
Vue.use(uView) |
2.2 引入uView样式文件
App.vue 文件
<style lang="scss"> @import "@/uni_modules/uview-ui/index.scss"; </style>
uni.scss
@import '@/uni_modules/uview-ui/theme.scss';
3、在页面开始使用uView的相关组件
十、uniCloud云开发平台
1.uniCloud简介
uniCloud是DCloud联合阿里云和腾讯云推出的基于serverless服务的、跨全端的、用JS开发服务端的云产品。
2.uniCloud的使用
以下讲解uniCloud的使用步骤：
1、创建uniCloud项目
2、创建云服务空间
3、右键选择-->【云服务空间初始化向导】，进行关联云空间
通过以上操作，uniCloud的环境即配置完成，接下来就可以正常去使用了。
3.云函数
云函数即在云端（服务器端）运行的函数，开发者无须购买、搭建服务器，只需编写函数代码并部署到云端即可在客户端（App、H5、小程序等）调用，同时云函数之间也可以相互调用。
一个云函数的写法与一个在本地定义的JavaScript方法无异，当云函数被客户端调用时，定义的代码会被放在Node.js运行环境中执行。
开发者可以和在Node.js环境中使用JavaScript一样在云函数中进行网络请求等操作，而且还可以通过云函数服务端SDK搭配使用多种服务，如使用云函数SDK中提供的数据库和存储API操作数据库和存储。
云函数使用步骤：
1、创建云函数
2、编写云函数文件
3、在页面调用云函数
4.云数据库
云数据库是被优化或部署到一个虚拟计算环境中的数据库，可以实现按需付费、按需扩展，具有可用性高及存储整合等优势。
云数据库使用步骤：
1、创建云数据
2、添加云数据，如需添加多条数据重复多遍即可
3、在云函数中操作云数据库，并获取、返回user表中的数据
4、在页面调用云函数，获取数据并打印在控制台里面
5.分包优化
在实际开发过程中，伴随着项目的业务量不断增大，功能越来越复杂，项目的体积会变得越来越大，此时就需要对项目进行分包优化。不然项目在微信小程序当中是有大小限制，是无法正常进行真机调试的。
小程序分包大小限制如下：
-
整个小程序所有分包大小不超过 20M
-
单个分包/主包大小不能超过 2M
微信小程序分包优化的具体步骤：
1、配置manifest.json 开启分包功能
"optimization": { | |
"subPackages": true | |
} |
2、配置pages.json
2.1 新建分包文件夹，把需要分包的页面存入对应的分包文件夹里面
2.2 在pages.json 新增subPackages配置项，进行分包设置
2.3 删除原来的 pages/login/login等其他被分包的页面路径。
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
