1.目录结构
1.1 main.js
main.js是 uni-app 的入口文件，主要作用是：
✓ 初始化vue实例。
✓ 定义全局组件。
✓ 定义全局属性。
✓ 安装插件，如：pinia、vuex 等。
1.2 App.vue
- App.vue入口组件
App.vue是uni-app的入口组件，所有页面都是在App.vue下进行切换
App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>元素 - App.vue的作用：
应用的生命周期
编写全局样式
定义全局数据 globalData
1.3 全局和局部样式
- 全局样式
App.vue 中style的样式为全局样式，作用于每一个页面（style标签不支持scoped，写了导致样式无效）。
✓ App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
uni.scss 文件也是用来编写全局公共样式，通常用来定义全局变量。
✓ uni.scss 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。 - 局部样式
在 pages 目录下 的 vue 文件的style中的样式为局部样式，只作用对应的页面，并会覆盖 App.vue 中相同的选择器。
vue文件中的style标签也可支持scss等预处理器，比如：安装dart-sass插件后，style标签便可支持scss写样式了。
style标签支持scoped吗？不支持，不需写。 - 注意：应用生命的周期仅可在App.vue中监听，在页面监听无效。
1.4 uni.scss
-uni.scss 全局样式文件
为了方便整体控制应用风格。 默认定义了uni-app框架内置全局变量，当然也可以存放自定义的全局变量等
在uni.scss中定义的变量，我们无需 @import 就可以在任意组件中直接使用。
使用uni.scss中的变量，需在 HBuilderX 里面安装 scss 插件（dart-sass插件），
然后在该组件的 style 上加 lang="scss"，重启即可生效。
- 注意事项：
这里的uni-app框架内置变量和后面uni-ui组件库的内置变量是不一样的。
uni.scss定义的变量是全局可以直接使用，App.vue定义的变量只能在当前组件中使用。
1.5 全局数据（页面调用接口）
- getApp() 函数( 兼容h5、weapp、app )：
用于获取当前应用实例，可用于获取globalData 。 - getCurrentPages() 函数( 兼容h5、weapp、app )
用于获取当前页面栈的实例，以数组形式按栈的顺序给出。
✓ 数组：第一个元素为首页，最后一个元素为当前页面。
仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
常用方法如下图所示：
1.6 page.json
◼ page.json全局页面配置（兼容h5、weapp、app ）
pages.json 文件用来对 uni-app 进行全局配置，类似微信小程序中app.json。
决定页面的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
1.7 manifest.json
◼ manifest.json应用配置
Android平台相关配置
iOS平台相关配置
Web端相关的配置
微信小程序相关配置
✓ wxbc30134b589795b0
....
1.8 内置组件
以前是html标签，比如<div>，现在是小程序组件，比如<view>。 那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？ 其实标签是老的概念，标签属于浏览器内置的东西。但组件，是可以自由扩展的。 类似你可以把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。
uni-app参考小程序规范，提供了一批内置组件。
下为html标签和uni-app内置组件的映射表：
- div 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
默认宽度 320px、高度 240px
仅支持相对路径、绝对路径，支持导入，支持 base64 码； - input 仅仅是输入框。 原html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
- form、button、label、textarea、canvas、video 这些还在。
- select 改成 picker
- iframe 改成 web-view
- ul、li没有了，都用view替代。做列表一般使用uList组件
- audio 不再推荐使用，改成api方式，背景音频api文档 其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。
常用内置组件
◼ view：视图容器。类似于传统html中的div，用于包裹各种元素内容。（视图容器可以使用div吗？可以，但div不跨平台）
◼ text：文本组件。用于包裹文本内容。
◼ button：在小程序端的主题 和 在其它端的主题色不一样（可通过条件编译来统一风格）。
◼ image：图片。默认宽度 320px、高度 240px
仅支持相对路径、绝对路径，支持导入，支持 base64 码；
◼ scrollview：可滚动视图区域，用于区域滚动。
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height
使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式，子元素设置为行内块级元素。
APP和小程序中，请勿在 scroll-view 中使用 map、video 等原生组件。
小程序的 scroll-view 中也不要使用 canvas、textarea 原生组件。
若要使用下拉刷新，建议使用页面的滚动，而不是 scroll-view 。
◼ swiper：滑块视图容器，一般用于左右滑动或上下滑动比如banner轮播图。
默认宽100%，高为150px，可设置swiper组件高度来修改默认高度，图片宽高可用100%。
1.9尺寸单位（rpx）
◼ uni-app 支持的通用 css 单位包括 px、rpx（推荐单位）、vh、vw
px 即屏幕像素，rpx 是响应式像素（ responsive pixel ），可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素。
则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建议： 开发微信小程序时设计师可以用 iPhone6 作为设计稿的标准（即：设计稿宽度为750px）。
1.10背景图片
◼ uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：
支持 base64 格式图片，支持网络路径图片。
小程序不支持在 css 中使用本地文件，包括背景图和字体文件，需转成 base64 后使用。
使用本地背景图片或字体图标需注意：
✓ 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
✓ 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
✓ 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
✓ 相对路径：../../common/base.css
✓ 绝对路径：@/static/common/base.css
2.运行uni-app
- 在浏览器运行
选中uniapp 项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。 - 在微信开发者工具运行
选中uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验 uni-app。
其它注意事项：
✓ 1.微信开发者工具需要开启服务端口：小程序开发工具设置 -> 安全（目的是让HBuilder可以启动微信开发者工具）
✓ 2.如第一次使用，需配置微信开发者工具的安装路径（会提示下图）。
➢ 点击工具栏运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的安装路径
✓ 3.自动启动失败，可用微信开发者工具手动打开项目（项目在unpackage/dist/dev/mp-weixin路径下）。 - 在运行App到手机或模拟器（需要先安装模拟器）
先连接真机 或者 模拟器（Android的还需要配置adb调试桥命令行工具）
选中uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，
✓ 即可在该设备里面体验uni-app（支持中文路径）
3.安装mumu模拟器
- 第一步：下载mumu模拟器：https://mumu.163.com/mac/index.html
- 第二步：安装mumu模拟器
- 第三步：配置adb调试桥命令行工具（用于 HBuilder X 和Android模拟器建立连接，来实时调试和热重载。HBuilder X 是有内置adb的 )
HBuilderX正式版的adb目录位置：安装路径下的 tools/adbs 目录
✓ 而MAC下为HBuilderX.app/Contents/tools/adbs目录；
HBuilderX Alpha版的adb目录位置：安装路径下的 plugins/launcher/tools/adbs 目录( 需先运行后安装了插槽才会有该目录 )
✓ 而MAC下为/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs目录
在adbs目录下运行./adb ，即可使用adb命令（Win和Mac一样）。
如想要全局使用 adb 命令，window电脑可在：设置 -> 高级设计 -> 环境变量中设置 - 第四步：HBuilder X 开发工具连接mumu模拟器，使用adb调试桥来连接
adb connect 127.0.0.1:7555 （ 端口是固定的，启动mumu模拟器默认是运行在7555端口） - 第五步：选中项目 -> 运行 ->运行App到手机或模拟器-> 选中Android基座（基座其实是一个app壳）
4.安装其它模拟器
- Mac 电脑：
可以安装 Xcode 或者 Android Studio 软件。推荐 XCode。 - Window电脑：
安装mumu、夜神、雷电模拟器等（推荐）
可以安装 Android Studio 软件（模拟器大、速度慢、卡）。
