uni-app基础拓展

3.1 生命周期

uni-app生命周期分为应用生命周期、页面生命周期和组件生命周期。

3.1.1 应用生命周期

onLaunch：当uni-app初始化完成时触发（只触发一次）
onShow：当uni-app启动，或从后台进入前台显示时触发
onHide：当uni-app从前台进入到后台时触发
onError：当uni-app报错时触发
onUniNViewMessage：对nvuew页面发送的数据监听
onUnhandledRejection：对未处理的Promise拒绝事件监听函数
onPageNotFound：页面不存在监听函数
onThemeChange：监听系统主题变化
应用生命周期函数只能在App.vue中监听。
默认有onLaunch、onShow、onHide

3.1.2 页面生命周期

写在pages文件夹的页面文件中

onLoad：监听页面加载，参数是上一个页面传递的参数，参数类型是Object
onShow：监听页面显示。每次页面出现时都会触发
onReady：监听页面初次渲染完成。
onHide：监听页面隐藏
onUnload：监听页面卸载
onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新
onReachBottom：监听特面滚动到底部（不是scroll-view滚到底），一般用于下拉显示下一页数据

使用uni.navigateTo来跳转页面

uni.navigateTo({

url:'/pages/index/testload?id=1&name=uniapp'

})

然后在跳转目标页面，使用option对象获取属性，即option.id和option.name

3.1.3 组件生命周期

beforeCreate:在实例初始化之前被调用
created：在实例创建完成后被立即调用
beforeMount：在挂载开始之前被调用
mounted：在挂载到实例上之后被调用
beforeUpdate：在数据更新时调用，发生在虚拟DOM打补丁之前
updated：在由于数据更改导致虚拟DOM重新渲染和打补丁之后调用
beforeDestroy：在实例销毁之前调用
destroyed：在Vue实例销毁后调用

3.2 条件编译

uni-app实现一套代码多平台运行

关键是通过编译器和运行时来实现

编译器，将uni-app代码统一编译成每个平台支持的特有代码

运行时，用于动态处理数据绑定、事件代理、保证VUE文件和平台宿主数据的一致

uni-app已将常用的组件、JS API封装到框架中，开发者按照uni-app规范进行开发。

大部分情况保证多平台兼容性，但小部分无法跨平台。

使用条件编译，在不同平台运行不同的代码

使用特殊的注释（平台）作为标记，将注释里的代码运行到不同平台。

以#ifdef或#ifndef（两者之一）加%PLATFORM%开头，以#endif结尾

#ifdef：if defined表示仅在某平台存在
#ifndef：if not defined 表示除了某平台均存在
%PLATFORM%：表示平台名称
样例代码

html 复制代码

<template>
	<view class="content">
		<!-- #ifdef H5-->
			<image class="logo" src="/static/htmlbig.png"></image>
		<!-- #endif-->
		<!-- #ifdef MP-WEIXIN-->
			<image class="logo" src="/static/weixing.png"></image>
		<!-- #endif-->
	</view>
</template>

在css和script中类似，只是注释格式不同，注释中一样#ifdef开头，#endif结尾

3.3 uni-ui组件

3.3.2 uni-scss辅助样式

颜色类
前景色：使用与变量同名的颜色类进行设置
格式uni- c o l o r N a m e c o l o r N a m e 的值有 p r i m a r y 主色， s u c c e s s 成功色， w a r n i n g 警告色， e r r o r 错误色背景色：应用元素的 b a c k g r o u n d − c o l o r 样式，格式 u n i − {colorName} colorName的值有primary主色，success成功色，warning警告色，error错误色背景色：应用元素的background-color样式，格式uni- colorNamecolorName的值有primary主色，success成功色，warning警告色，error错误色背景色：应用元素的background−color样式，格式uni−{colorName}-bg

html 复制代码

<view class="uni-primary">主色</view>
<view class="uni-error-bg">错误色</view>

边框半径类
使用边框半径类可对元素快速应用border-radius样式，
格式uni-radius- d i r e c t i o n − {direction}- direction−{size}

direction
边框半径通过t、r、b、l、tl、tr、br、bl来设置4个角，
size：
null:默认值（可忽略）
0：清理所有圆角
sm：默认值/2（暂不支持）
lg：默认值2
xl：默认值 6
pill：9999px
circle：50%，（nvue不生效）

html 复制代码

<view class="uni-radius-circle"></view>
<view class="uni-radius-t-0"></view>

间距类
使用间距类对元素应用margin或padding样式，范围是从0到16.
格式uni- p r o p e r t y {property} property{direction}-${size}
property：表示间距类型，其中m表示margin，p表示padding
direction：指定间距类所应用的边，值有t、b、l、r、x、y、a。
tblr表示top、bottom、left、right，x对应left和right，y对应top和bottom，a表示所有方向