官网教程 uni-app官网

一、概念

1. 原生 VS 跨平台

1）原生开发

优点

性能稳定，使用流畅，用户体验好、功能齐全，安全性有保证，兼容性好 ，可使用手机所有硬件功能等

缺点

开发周期长、维护成本高、迭代慢、部署慢、新版本必须重新下载应用
不支持跨平台，必须同时开发多端代码

2）跨平台开发

优点

• 可以跨平台，一套代码搞定iOS、Android、微信小程序、H5应用等
• 开发成本较低，开发周期比原生短
• 适用于跟系统交互少、页面不太复杂的场景

缺点

• 对开发者要求高，除了本身JS的了解，还必须熟悉一点原生开发
• 不适合做高性能、复杂用户体验，以及定制高的应用程序。比如：抖音、微信、QQ等
• 同时开发多端兼容和适配比较麻烦、调试起来不方便

2. 跨平台框架对比

3. 认识uni-app

4. uni-app VS 微信小程序

相同点

• 都是接近原生的体验、打开即用、不需要安装
• 都可开发微信小程序、都有非常完善的官方文档

不同点

• 跨平台
• uni-app : 支持跨平台，编写一套代码，可以发布到多个平台
• 微信小程序 : 不支持
• 工程化
• uni-app : 纯Vue体验、高效、统一、工程化强
• 微信小程序 : 工程化弱、使用小程序开发语言
• 复杂程度
• uni-app : 适合不太复杂的应用，因为需要兼容多端，多端一起兼容和适配增加了开发者心智负担
• 微信小程序 : 适合较复杂、定制性较高、兼容和稳定性更好的应用

如何选择

需要跨平台、不太复杂的应用选 uni-app，复杂的应用使用uni-app反而增加了难度。
不需要跨平台、较复杂、对兼容和稳定性要求高的选原生微信小程序

5. uni-app架构图

二、uni-app初体验

1. 开发工具

Hbuilder X : 是通用的前端开发工具，但为 uni-app 做了特别强化
官网下载 : hbuilderx

2. 创建项目

可视化界面创建 ( 推荐 )

• 点工具栏里的文件 -> 新建 -> 项目 ( 快捷键Ctrl+N )
• 选择uni-app类型，输入工程名，选择模板，选择Vue版本，点击创建即可

Vue-CLI 命令行创建

3.调试项目

知识点：1 . 建议1个前端文件放一个文件夹

2. 有配置文件 如 pages.json 更改，要停止 运行 重新启动项目 负责容易出现单page模式情况

3.架构

这是一个 Uni-app / HBuilderX 项目的基本目录结构，主要用于跨端开发（如小程序、H5、App等）。下面是每个分支（文件夹/文件）的作用说明：

---

📁 demoApp

项目根目录，所有源码和配置都在这里。

---

📁 .hbuilderx

HBuilderX 的项目配置文件目录，通常包含编辑器相关的配置，如运行配置、项目设置等，一般不需要手动修改。

---

📁 pages

存放页面文件的目录，每个页面通常是一个文件夹，包含 .vue 文件。

• index
  首页文件夹，里面有一个 index.vue 文件，对应项目启动时默认打开的页面。
• login
  登录页面文件夹，里面有一个 login.vue 文件，对应登录页面。

---

📁 static

存放静态资源的目录，如图片、字体、音频、视频等。
注意： 这里的文件会直接拷贝到构建产物中，路径在代码中通常以 /static/ 开头引用。

---

📁 unpackage

这个是构建输出目录，当你编译项目到不同平台（如微信小程序、H5、App等）时，生成的代码会放在这里。
一般不需要手动修改，也不建议提交到版本控制系统（如Git）。

---

📄 App.vue

项目的根组件，用于设置全局样式、全局逻辑（如生命周期监听、全局变量等）。

---

📄 index.html

H5 平台的入口 HTML 文件，仅当编译到 H5 平台时有效，可用来配置页面标题、引入外部脚本等。

---

📄 main.js

项目的入口 JS 文件，用于初始化 Vue 应用、注册全局组件、插件等。

---

📄 manifest.json

项目配置文件，用于配置应用名称、图标、启动页、权限、各平台特有配置等。

---

📄 pages.json

页面路由与窗口样式配置文件，用于配置页面路径、导航栏样式、页面切换动画等。

---

📄 uni.promisify.adaptor.js

Promise 化适配器，用于将某些异步 API（如 uni.request）转换为 Promise 风格，方便使用 async/await。

---

📄 uni.scss

全局样式文件，可以在这里定义全局的 SCSS 变量、混入等，方便在各页面中复用。

4. 运行uni-app

在 浏览器 运行

点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器

在 微信开发者工具 运行

如果自动启动失败，可用微信开发者工具手动打开项目
项目在unpackage/dist/dev/mp-weixin路径下

01 - 开启服务端口

微信开发者工具需要开启服务端口：
小程序开发工具设置 -> 安全（目的是让HBuilder可以启动微信开发者工具）

02 - 运行

在 手机或模拟器 运行

这里是mac电脑 + ios手机环境

ps : 之所以要用XCode新建一个项目，先打开模拟器，再用hbuilderx打开相同的模拟器
是为了减少bug，不这么做容易有奇奇怪怪的小问题

XCode 设置

01 - 安装XCode

02 - 新建Xcode项⽬

uni-app 之 跨平台开发-CSDN博客