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、在页面调用云函数,获取数据并打印在控制台里面

  • 29
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值