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开发规范遵循以下原则:
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、注释规范
-
在关键代码和复杂逻辑处添加必要的注释,方便其他开发者理解代码意图。
-
注释应该清晰简洁,描述代码的功能、参数和返回值等信息。
开发环境准备
1.下载HBuilderX,官网下载地址:HBuilderX-高效极客技巧 (dcloud.io)
2.下载安装微信开发者工具,下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档
3.打开HBuilderX工具,选择【工具】-->【设置】-->【运行设置】,在微信开发者工具路径输入框中填入微信开发者工具的安装路径。
uni-app项目的创建和运行
通过HBuilderX可视化界面创建第一个uni-app项目并运行在浏览器端:
打开HBuilderX,点击工具栏里的文件 -> 新建 -> 项目
选择类型,输入工程名,选择模板,点击创建,即可成功创建
项目运行到微信开发者工具:
选择“运行”-->"运行到小程序模拟器“-->"微信开发者工具“命令,即可在微信开发者工具中体验uni-app。
项目运行到真机:
第一步:使用数据线连接手机和电脑,选择“传输文件”模式。
第二步:将手机设置为“USB调试模式”,具体如何调,自行操作。
第三步:在HBuilderX中单机“运行”-->“运行到手机或模拟器”,选择相应的设备,即可在手机中查体验uni-app。