uni-app跨平台开发知识点总结

uni-app简介

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

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

---

文章目录

1. uni-app环境搭建
2. uni-app项目的创建和运行
3. uni-app开发规范
4. uni-app文件目录结构
5. uni-app外部资源引入
6. uni-app的页面样式与布局

---

一、uni-app环境搭建

1. 安装HBuilderX：HBuilderX是uni-app官方推荐的开发工具，支持uni-app的开发和调试。你可以从HBuilderX官网下载适用于你操作系统的安装程序，并按照安装向导进行安装。

2. 创建uni-app项目：打开HBuilderX，选择“文件” > “新建” > “项目”，然后选择“uni-app”模板。按照向导提供的选项设置项目名称、路径和模板类型，然后点击“确定”来创建项目。

3. 选择项目模板：在创建项目时，你可以选择不同的模板类型，包括空模板、Hello uni-app、Vue、微信小程序、支付宝小程序等。根据你的需要选择合适的模板类型。

4. 安装运行依赖：一般情况下，uni-app项目创建完成后，HBuilderX会自动安装项目所需的依赖。如果没有自动安装，你可以在项目根目录下打开命令行终端，执行npm install命令来安装依赖。

5. 运行项目：依赖安装完成后，你可以通过HBuilderX提供的运行按钮来启动项目。选择“运行” > “运行到浏览器/手机”，即可在浏览器或手机上预览你的uni-app项目。

6. 编写代码：使用HBuilderX提供的代码编辑器，你可以开始编写uni-app的代码。uni-app的语法类似于Vue.js，因此如果你熟悉Vue.js，那么上手会更容易。

7. 调试和发布：在开发过程中，你可以通过HBuilderX提供的调试工具来检查和调试代码。在完成项目开发后，你可以使用HBuilderX提供的发布功能将项目发布为各种平台的应用程序，如微信小程序、支付宝小程序、App等。

---

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

创建uni-app项目：

1. 安装HBuilderX：

   • 前往HBuilderX官网，下载适用于你操作系统的安装程序，并按照安装向导进行安装。

2. 新建项目：

   • 打开HBuilderX，选择“文件” > “新建” > “项目”。
   • 在弹出的对话框中，选择“uni-app”模板，然后点击“确定”。

3. 填写项目信息：

   • 在项目向导中，填写项目名称、项目所在路径等信息，并选择适合你的项目类型，比如Vue、微信小程序、支付宝小程序等。

4. 确认创建：

   • 点击“确定”按钮，HBuilderX会自动为你创建uni-app项目，并安装相关依赖。

运行uni-app项目：

1. 选择运行方式：

   • 在HBuilderX的工具栏中，可以看到一排图标，其中有一个绿色的三角形图标，这是运行按钮。
   • 点击运行按钮，会弹出一个菜单，选择你要运行到的目标，比如浏览器、手机等。

2. 预览项目：

   • 选择运行到浏览器，则会在你的默认浏览器中打开项目的预览页面。
   • 选择运行到手机，则需要先连接手机，并确保手机开启了USB调试模式。然后HBuilderX会将项目编译并推送到手机上运行。

3. 调试项目：

   • 在运行过程中，你可以在HBuilderX的调试控制台中查看运行日志，并进行调试。

4. 停止项目：

   • 如果需要停止项目的运行，可以点击HBuilderX工具栏中的停止按钮

---

三、uni-app开发规范

1. 代码结构：

   • 将不同功能模块拆分为不同的页面或组件，便于维护和复用。
   • 使用 Vue 单文件组件 (.vue) 来组织页面和组件，保持代码的模块化和可维护性。

2. 命名规范：

   • 变量名、函数名、组件名等采用有意义的英文命名，遵循驼峰命名规范。
   • 页面文件名建议使用小写字母，多个单词之间可以使用连字符 - 分隔。

3. 组件规范：

   • 编写可复用的组件，避免代码重复。
   • 组件的 props 命名应该清晰易懂，遵循驼峰命名规范。

4. 文件管理：

   • 统一管理静态资源，如图片、字体等，放置在特定的目录下。
   • 将页面和组件文件放置在统一的目录结构下，方便查找和管理。

5. 资源管理：

   • 使用 static 目录存放静态资源，如图片、字体等。
   • 使用 pages 目录存放页面文件，components 目录存放组件文件。

6. 样式规范：

   • 避免在样式中直接使用元素选择器，尽量使用类选择器或 ID 选择器。
   • 统一使用 scss 或 less 等预处理器编写样式，提高样式代码的可维护性。

7. 注释规范：

   • 合适的注释可以提高代码的可读性，建议在关键代码段、函数或组件上方添加注释说明其作用。

8. 代码规范：

   • 遵循 JavaScript 和 Vue 的编码规范，如避免使用全局变量、避免直接操作 DOM 等。
   • 统一缩进、代码格式，保持代码风格一致。

9. 性能优化：

   • 避免页面中加载过多的图片和动画，以提高页面加载速度和性能。
   • 使用合适的图片格式，并优化图片大小，减小应用的体积。

---

四、uni-app文件目录结构

• dist/：打包后的目录，包含编译后的小程序代码，用于发布到线上环境。
• node_modules/：npm 依赖的模块存放的目录。
• src/：项目源代码目录，包含了页面文件、组件文件、静态资源等。
  • assets/：存放静态资源，如图片、字体等。
  • components/：存放公共组件，可被多个页面引用和复用。
  • pages/：存放页面文件，每个页面文件夹下包含了该页面的 Vue 组件、配置文件和样式文件。
  • App.vue：应用程序主组件，是整个应用的入口。
  • manifest.json：应用程序配置文件，包含了全局配置信息，如应用名称、图标、权限等。
  • pages.json：页面路由配置文件，定义了页面路径、窗口样式等信息。
• unpackage/：编译前的源码目录，用于调试。
• .gitignore：Git 忽略文件配置，指定了哪些文件不需要纳入版本控制。
• package.json：npm 依赖配置文件，包含了项目的依赖信息、脚本命令等。
• README.md：项目说明文件，包含了项目的简要介绍、使用说明等。

---

五、uni-app外部资源引入

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

---

六、uni-app的页面样式与布

一、uni-app尺寸单位

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

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

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

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

二、设置背景图片注意事项

• 支持base64格式的图片，网址

• 支持网络路径图片。

• 支持小于40KB的图片。

• 使用本地背景图需注意：在线压缩图片

  • • 若背景图小于40KB,uni-app编译到不支持本地背景图片的平台时，会自动将其转换为base64格式。

    • 若背景图大于40KB,不建议使用，若执意使用的话，需要手动将其转换为base64格式使用，或最好将其上传到服务器上面，通过网络路径来引用。

      本地背景图引用路径建议使用"~@"格式来引用，例如：

      .test{
      background: url("~@/static/img1.png");
      }

三、使用字体图标

uni-app支持各种字体图标的使用，以下讲解几种使用字体图标的方式：

• 方式一：使用网络路径字体图标（以阿里巴巴矢量图标库为例）

  • 1、注册登录阿里巴巴矢量图标库，找到自己想要的图标，加入购物车，然后新建一个项目，把购物车的图标加入项目中，然后进入自己的项目图标，复制css代码

2、在项目的App.vue中引入刚刚复制的代码

3、在页面中通过class使用字体图标

方式二：使用本地路径的字体图标（以阿里巴巴矢量图标库为例）

1. 下载字体图标

2. 把下载的字体图标放置到uni-app项目的static目录中

     3.修改iconfont.css的引入路径

     4.在App.vue中引入iconfont.css

     5.在页面中通过class使用字体图标

总结

uni-app 是一个基于 Vue.js 的跨平台应用开发框架，具有以下特点和优势：

1. 跨平台：uni-app 支持开发微信小程序、支付宝小程序、H5 网页、App 等多个平台的应用，只需编写一套代码，即可在多个平台上运行。

2. 组件化开发：uni-app 采用组件化开发模式，页面由多个组件构成，开发者可以灵活组合和复用组件，提高开发效率和代码可维护性。

3. Vue.js 生态：uni-app 基于 Vue.js 框架，开发者可以充分利用 Vue.js 的生态系统和丰富的插件来开发应用，享受 Vue.js 带来的便利和效率。

4. 优秀的性能：uni-app 提供了优秀的性能优化策略，包括异步加载、懒加载、图片压缩等技术手段，保证应用在不同平台上的流畅性和稳定性。

5. 多端统一：uni-app 提供了多端统一的开发体验，开发者可以在同一个开发环境中编写代码，并通过条件编译来适配不同平台的特性和需求。

6. 社区活跃：uni-app 拥有庞大的开发者社区和丰富的资源库，开发者可以通过社区分享经验、解决问题，快速成长和提升技术水平。