在我在用vue.js的时候 要调用手机摄像头的时候 无意间发现了uin-app这个混合型框架，但是当时没有注意这个框架，现在项目要用这个框架，所以现在开始学习。
一、框架简介基础知识点
uniapp生命周期
- onLaunch 当uniapp初始化完成时进行触发，全局只触发一次
- onShow 当uniapp启动或者从后台进入前台显示
- onHide 当uniapp从前台进入后台
- onUniNViewMessage 对nvue页面发送数据进行监听
uniapp页面生命周期
文档路径
二、路由
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 里面进行页面跳转。
三、页面样式与布局
- uni-app支持的通用css单位包括px、upx、vh。
- upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
四、upx2px
- 因为upx是编译器处理的，动态绑定upx不生效
- 可使用 uni.upx2px(Number) 转换为 px 后再赋值。
例如
return uni.upx2px(750 / 2) + 'px';
五、样式导入
- 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
@import "../../common/uni.css";
内联样式
1.style：静态的样式统一写到 class 中。
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
选择器
1 .class
2 #id
3 element 选择所有 view 组件
全局样式与局部样式
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目相同，需要注意以下几点：
- 支持 base64 格式图片。
- 支持网络路径图片。
- 使用本地路径背景图片需注意：
- 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
- 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
- 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
.test2 {
background-image: url('~@/static/logo.png');
}
六、字体图标
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
- 支持 base64 格式字体图标。
- 支持网络路径字体图标。
- 网络路径必须加协议头 https。
- 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
uni-app 本地路径图标字体支持情况：
-
字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
-
字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
七、template和 block
- uni-app 支持在 template 模板中嵌套 template 和 block，用来进行 列表渲染 和 条件渲染。
- template和 block 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
uni-app 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。
NPM支持
uni-app支持使用npm安装第三方包。
TypeScript 支持
在 uni-app 中使用 ts 开发
八、平台差异说明
九、常见问题
uni-app 中使用 5+ 的原生界面控件（包括map、video、livepusher、barcode、nview）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/116000.html
