1.目录结构

image.png

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 )

 用于获取当前页面栈的实例，以数组形式按栈的顺序给出。
✓ 数组：第一个元素为首页，最后一个元素为当前页面。
 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
 常用方法如下图所示：

image.png image.png

1.6 page.json

◼ page.json全局页面配置（兼容h5、weapp、app ）
 pages.json 文件用来对 uni-app 进行全局配置，类似微信小程序中app.json。
 决定页面的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

image.png

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）。

image.png

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 软件（模拟器大、速度慢、卡）。