持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

uniapp笔记

一个uni-app工程，默认包含如下目录及文件：
┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud） │─components            符合vue组件规范的uni-app组件目录 │  └─comp-a.vue         可复用的a组件 ├─hybrid                App端存放本地html文件的目录，详见 ├─platforms             存放各平台专用页面的目录，详见 ├─pages                 业务页面文件存放的目录 │  ├─index │  │  └─index.vue       index页面 │  └─list │     └─list.vue        list页面 ├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 ├─uni_modules           存放uni_module规范的插件。 ├─wxcomponents          存放小程序组件的目录，详见 ├─main.js               Vue初始化入口文件 ├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期 ├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见 ├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见 └─uni.scss              这里是uni-app内置的常用样式变量
.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染
配置说明
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在App.vue中监听
main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

模版语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
模板语法，包含插值、指令。

Html模块
uni-app的组件，分为基础组件和扩展组件。
基础组件：跟微信小程序类似，用view替代div、text替代span、image替代img 、navigator代替a；uni-app 基础组件规范，与小程序规范相近。
扩展组件：easycom是自动开启的，不需要手动开启。components/组件名称/组件名称.vue目录结构的组件，均可直接使用。

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：
1import导入组件
2components里注册组件
3template中使用组件

CSS
uni-app 支持的通用 css 单位包括 px、rpx
●px 即屏幕像素
●rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度

1若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
2若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
3若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

●注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
●如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。
●rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向
●App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。
生命周期
onLaunch 当uniapp初始化完成时进行触发，全局只触发一次 onShow 当uniapp启动或者从后台进入前台显示 onHide 当uniapp从前台进入后台
页面生命周期
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow 监听页面显示。页面每次出现在屏幕上都触发 onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 onHide 监听页面隐藏 onUnload 监听页面卸载
页面生命周期函数与data同级。

路由
uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。 1.打开新页面，页面重定向===》 调用 API uni.navigateTo 、使用组件 2.页面返回 调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
3.Tab 切换 调用 API uni.switchTab 、使用组件 、用户切换 Tab
4.重加载 调用 API uni.reLaunch 、使用组件
Tips：
●navigateTo, redirectTo 只能打开非 tabBar 页面。
●switchTab 只能打开 tabBar 页面。
●reLaunch 可以打开任意页面。
●页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
●不能在 App.vue 里面进行页面跳转。

onTabItemTap方法
切换tabBar时会触发该方法；