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开发规范遵循以下原则:
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跨平台开发的优势主要包括高效开发、成本低廉、丰富的开发社区生态、跨平台特性、使用Vue.js语法、强大的设备适配能力、调用原生API、数据管理和状态管理、良好的用户体验与交互设计、安全与性能优化。
高效开发:uni-app的最大亮点在于其跨平台特性,允许开发者使用一套代码同时应用于多个平台,极大提升了开发效率。基于Vue.js开发,使得大部分原生开发程序员能够迅速上手,节省了人力成本,加快了产品上市速度。
成本低廉:相较于传统开发模式,需要分别为不同平台配备技术人员并耗费数月时间进行开发,uni-app仅需3-5人团队,在短短一个月内便能完成开发任务,大大降低了技术人员的开发成本。
丰富的开发社区生态:uni-app致力于打造一个开放、兼容的生态系统,其插件市场汇聚了数千款插件,足以满足众多企业的实际需求。同时,它还支持前端组件、js等多样化开发资源。
跨平台特性:支持一次编写代码,生成多个平台的应用,这意味着开发者可以使用同一套代码库,同时为Android和iOS等平台开发应用程序。这种跨平台开发的优势在于提高开发效率和降低维护成本。
使用Vue.js语法:基于Vue.js,意味着开发者可以使用熟悉的Vue.js语法进行开发。Vue.js是一种流行的前端框架,具有简洁的语法和强大的组件化能力,使用Vue.js语法可以快速构建高效、可维护的应用程序。
强大的设备适配能力:支持多种分辨率和屏幕尺寸,开发者可以使用uni-app提供的组件和布局方式,轻松实现安卓设备的适配。
调用原生API:提供了与安卓原生API的桥接机制,允许开发者在uni-app中调用安卓原生代码,充分发挥安卓设备的性能和功能优势。
数据管理和状态管理:提供了Vuex类似的状态管理工具,帮助开发者有效地管理应用的状态。还支持本地存储和数据持久化,方便开发者存储和读取数据。
良好的用户体验与交互设计:支持响应式布局和组件化开发,使得开发者可以轻松创建美观、易用的界面。通过组件的事件处理和数据绑定机制,可以实现流畅的交互效果。
安全与性能优化:提供了安全机制和性能优化建议,帮助开发者构建安全、高效的应用程序。例如,使用加密算法保护用户数据,优化网络请求和资源加载等。
view
视图容器。
它类似于传统html中的div,用于包裹各种元素内容。
如果使用nvue,则需注意,包裹文字应该使用<text>
组件。
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态,App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持) |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
flex-direction: row
<text>\n横向布局</text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red">A</view>
<view class="flex-item uni-bg-green">B</view>
<view class="flex-item uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
flex-direction: column
<text>\n纵向布局</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red">A</view>
<view class="flex-item flex-item-V uni-bg-green">B</view>
<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>
</view>
</view>
</template>