无标题文章

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

uni-app跨平台框架官方教程

链接：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.页面返回  调用 APIuni.navigateBack、使用组件、用户按左上角返回按钮、安卓用户点击物理back按键

3.Tab 切换    调用 APIuni.switchTab、使用组件、用户切换 Tab

4.重加载  调用 APIuni.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 后再赋值。

例如

returnuni.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 语句可以导入外联样式，一样作用于每一个页面。

CSS变量

CSS变量描述5+App小程序H5

--status-bar-height系统状态栏高度系统状态栏高度25px0

--window-top内容区域距离顶部的距离00NavigationBar 的高度

--window-bottom内容区域距离底部的距离00TabBar 的高度

固定值

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

组件描述5+AppH5

NavigationBar导航栏44px44px

TabBar底部选项卡56px50px

Flex布局

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

背景图片

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');}