uni-app心得体会

目录

一、uni-app概述：

二、uni-app由来：

三、uni-app特点：

四、uni-app环境搭建

五、uni-app项目的创建和运行

六、uni-app项目的打包发布

七、uni-app开发规范

八、uni-app全局配置 

pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

九、外部资源的引入

十、网络请求 API

十一、云数据库

---

Uni-app 是一款跨平台应用开发框架，它允许开发者使用 Vue.js 技术栈编写一套代码，然后将其编译成 Android、iOS 和 Web 应用。参加 Uni-app 课程后，我获得了一些宝贵的经验和心得，以下是一些主要的体会：

1. 跨平台开发的优势：Uni-app 的最大优势在于其跨平台能力。通过一套代码库，可以同时开发多个平台的应用，这大大减少了开发时间和成本。这对于初创公司和小团队来说，尤其具有吸引力。

2. Vue.js 技能的重要性：要使用 Uni-app 开发应用，需要熟悉 Vue.js 框架。因此，参加 Uni-app 课程之前，具备 Vue.js 的基础知识是非常重要的。在课程中，我进一步加深了对 Vue.js 组件化开发模式的理解，并学习了如何在 Vue.js 中使用 Uni-app 的特定 API。

3. 组件化和自定义组件的强大：Uni-app 提供了丰富的组件库，使得开发工作更加高效。同时，它也支持开发者创建自己的组件，这有助于代码的重用和项目的模块化。

轮播图组件

4. API 的学习和使用：课程中，我学习了如何使用 Uni-app 提供的 API 来实现各种功能，如网络请求、文件操作、页面路由控制等。掌握这些 API 对于开发实际应用至关重要。

5. 性能优化和调试技巧：在开发过程中，我了解到了一些性能优化的技巧，比如如何减少页面加载时间、如何优化数据渲染等。此外，我还学习了使用 Uni-app 的调试工具来定位和解决问题。

6. 实际项目经验的积累：课程通常包含实战项目，通过这些项目，我能够将所学知识应用于实际开发中，从而加深理解和记忆。

7. 社区和文档资源：我意识到了 Uni-app 拥有活跃的社区和完善的文档资源，这对于解决开发过程中的问题非常有帮助。

8. 持续学习和更新知：由于技术和框架的不断更新，我需要保持学习的态度，定期查看 Uni-app 的更新日志和官方文档，以确保我的知识是最新的。

总的来说，Uni-app 课程为我提供了一个全面了解和使用 Uni-app 框架的机会，让我对跨平台移动应用开发有了更深入的理解。通过实践项目和课程学习，我获得了宝贵的开发经验，并准备好将这些知识应用到未来的工作中。

以下是对uni-app的介绍：

一、uni-app概述：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

二、uni-app由来：

是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

三、uni-app特点：

1、跨更多平台

2、一套代码，多平台运行

3、运行体验好，性能高

4、开发生态、周边生态丰富（组件丰富）

5、通用技术栈，学习/开发成本低，

四、uni-app环境搭建

选择对应的版本下载即可：

五、uni-app项目的创建和运行

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

类型，输入工程名，选择模板，点击创建，即可成功创建

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

六、uni-app项目的打包发布

uni-app项目开发的最后一步就是对项目进行打包发布。打包发布主要分为几种类型：

1、打包为原生App（云端）

2、打包为原生App（离线）

3、发布为h5

4、发布为微信小程序

七、uni-app开发规范

uni-app开发规范遵循以下原则：

1、页面文件遵循Vue单文件组件

2、组件标签规范类似于微信小程序规范。

3、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。

4、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。

5、为了更好的兼容多端运行，建议使用Flex布局进行开发。

除此以外，uni-app项目的开发还需遵循以下规范：

1、目录结构规范 

建议按照 uni-app 默认的目录结构组织项目，以保持统一性和易读性。将不同功能和模块的文件放置在对应的目录下，如 pages 存放页面，components 存放组件等。

2、命名规范

文件名、组件名、变量名等统一使用小写字母，多个单词之间可以使用中划线连接，例如：my-page.vue、login.vue等等

3、代码规范

• 遵循 Vue.js 官方的代码规范，保持代码风格的统一性。

• 注意代码的缩进和格式，提高代码的可读性。

• 避免在模板中直接编写过多逻辑，尽量将逻辑处理移到 JS 部分。

• 合理使用生命周期函数，避免在页面加载时做过多的初始化操作。

4、样式规范

• 推荐使用预处理器编写样式，如 Less、Sass 等，以提高样式代码的可维护性。

• 统一使用 rpx 作为尺寸单位，以便在不同设备上进行适配。

• 避免在样式中直接使用颜色值和尺寸值，建议提取出来作为变量统一管理

5、注释规范

• 在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。

• 注释应该清晰简洁，描述代码的功能、参数和返回值等信息。

八、uni-app全局配置 

概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。

pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

九、外部资源的引入

在进行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"   具体相对路径请根据实际文件夹情况来设置

十、网络请求 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、创建云数据

2、添加云数据，如需添加多条数据重复多遍即可

3、在云函数中操作云数据库，并获取、返回user表中的数据

4、在页面调用云函数，获取数据并打印在控制台里面