uni-app基础拓展

3.1 生命周期

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

3.1.1 应用生命周期

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

3.1.2 页面生命周期

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

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

使用uni.navigateTo来跳转页面
uni.navigateTo({
url:‘/pages/index/testload?id=1&name=uniapp’
})
然后在跳转目标页面，使用option对象获取属性，即option.id和option.name

3.1.3 组件生命周期

1. beforeCreate:在实例初始化之前被调用
2. created：在实例创建完成后被立即调用
3. beforeMount：在挂载开始之前被调用
4. mounted：在挂载到实例上之后被调用
5. beforeUpdate：在数据更新时调用，发生在虚拟DOM打补丁之前
6. updated：在由于数据更改导致虚拟DOM重新渲染和打补丁之后调用
7. beforeDestroy：在实例销毁之前调用
8. 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%：表示平台名称
  样例代码

<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辅助样式

1. 颜色类
   前景色：使用与变量同名的颜色类进行设置
   格式uni-$colorNamecolorName的值有primary主色，success成功色，warning警告色，error错误色背景色：应用元素的background-color样式，格式uni-${colorName}-bg

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

2. 边框半径类
   使用边框半径类可对元素快速应用border-radius样式，
   格式uni-radius-$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不生效）

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

3. 间距类
   使用间距类对元素应用margin或padding样式，范围是从0到16.
   格式uni-$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表示所有方向

<view class="uni-mt-2">
<view class="uni-mx-2"
<view class="uni-py-5">