Uni-app 学习笔记

转载自 https://www.jianshu.com/p/132a3de98238

https://ke.qq.com/course/343370

一、框架简介基础知识点

uniapp生命周期

onLaunch 当uniapp初始化完成时进行触发，全局只触发一次
onShow 当uniapp启动或者从后台进入前台显示
onHide 当uniapp从前台进入后台
onUniNViewMessage 对nvue页面发送数据进行监听

uniapp页面生命周期

https://uniapp.dcloud.io/frame
参看文档

路由

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 中。
  1. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

选择器

1 .class
2 #id
3 element 选择所有 view 组件

全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。

CSS变量

CSS变量 描述 5+App 小程序 H5
--status-bar-height 系统状态栏高度 系统状态栏高度 25px 0
--window-top 内容区域距离顶部的距离 0 0 NavigationBar 的高度
--window-bottom 内容区域距离底部的距离 0 0 TabBar 的高度

固定值

uni-app 中以下组件的高度是固定的，不可修改：

组件 描述 5+App H5
NavigationBar 导航栏 44px 44px
TabBar 底部选项卡 56px 50px

Flex布局

为支持跨平台，框架建议使用Flex布局

背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目相同，需要注意以下几点：

  • 支持 base64 格式图片。
  • 支持网络路径图片。
  • 使用本地路径背景图片需注意：

    1. 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；

    2. 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。

    3. 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

       .test2 {
     background-image: url('~@/static/logo.png');
 }

字体图标

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 支持 base64 格式字体图标。
  • 支持网络路径字体图标。
  • 网络路径必须加协议头 https。
  • 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
  • uni-app 本地路径图标字体支持情况：

    1. 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；

    2. 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；

    3. 字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

       @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }