uniapp跨平台开发

uni-app概述：

ni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程，它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。

uts是一门类ts的、跨平台的、新语言。uts在iOS端编译为swift、在Android端编译为kotlin、在Web端编译为js。

在Android平台，uni-app x 的工程被编译为kotlin代码，本质上是换了vue写法的原生kotlin应用，在性能上与原生kotlin一致。

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

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

一、uni-app尺寸单位

      在 uni-app 中，可以使用以下几种尺寸单位来定义页面元素的大小：

      1、px : 像素（Pixel）是最常见的尺寸单位，表示固定大小的像素值。在 uni-app 中，1px 相当于设备上的一个物理像素。

      2、rpx : rpx（Responsive Pixel）是相对长度单位，可以根据屏幕宽度进行自适应缩放。在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。通常在 uni-app中推荐使用rpx来定义长度单位，特别是用于移动端小程序和 App 的开发。

      3、百分比（%）: 百分比是相对长度单位，基于父元素的大小来定义元素的大小。可以使用百分比来实现响应式布局，让页面元素根据父元素的大小进行自适应调整。

uni-app特点：

1、跨更多平台

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

3、运行体验好，性能高

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

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

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

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

概述：uni-app有自己的内置组件，内置组件基本适配了手机的风格。但有时候内置组件只能满足基础需求，当需要更多场景时，就要使用到扩展组件。从性能上面来说，扩展组件的性能略低于内置组件，因此开发者切勿抛弃内置组件，直接使用全套的第三方UI组件库。

uni-app官方对组件的使用建议如下：

1、优先使用内置组件

2、然后使用uni-ui扩展组件
3、其他需求依靠插件市场的其他组件灵活补充。

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、注释规范

• 在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。
• 注释应该清晰简洁，描述代码的功能、参数和返回值等信息。
•