uni-app基础知识

ゝ一纸荒年。 2024-04-07 14:13 7阅读 0赞

#### uni-app ####

*  一、什么时UniApp
 *  二、为什么使用UniApp
 *  三、框架基础
 *   *  MVC与MVVM思想
     *   *  MVC模式
         *  MVVM模式
     *  项目结构与文件类型
     *  全局标题与页面标题
     *  全局样式与页面样式
     *  App的生命周期
     *   *  应用生命周期
     *  页面的生命周期
     *  数据绑定与事件
     *   *  在页面使用mustache语法：\{ \{表达式\}\}
         *  v-bind指令对属性的数据绑定
         *  事件基础
         *  条件渲染 v-if与v-show
         *  条件渲染三元运算
         *  列表渲染v-for的使用
     *  组件中的动态与静态变量
     *  条件判断与for循环
     *  多端兼容条件编译
     *   *  跨端兼容
         *  条件编译
 *  四、Flex布局
 *   *  概念、优势、模型
     *   *  概念
         *  使用Flex布局的优势
         *  Flex布局的常用术语
         *  Flex布局的模型
     *  容器的属性和布局
     *   *  Flex容器的属性
         *  引入外部CSS文件
     *  Flex元素的属性
     *   *  order:控制元素顺序
         *  flex-grow:控制元素放大比例
         *  flex-shrink:控制元素缩小比例
         *  flex-basis:设置元素固定或自动空间的占比
         *  align-self：重写align-items父属性

## 一、什么时UniApp ##

*  Union Application
 *  前端框架
 *  基于Vue.js
 *  开发规范同小程序

**总结：UniApp是一套代码即可编译到ios、Android、H5、小程序等多个平台**

--------------------

## 二、为什么使用UniApp ##

*  同一套代码编译多端
 *  接近原生，效果更好
 *  开发效率高
 *  开发(人力/维护/时间)成本低
 *  学习成本低
 *  支持npm与自定义组件
 *  社区活跃，版本迭代快

--------------------

## 三、框架基础 ##

### MVC与MVVM思想 ###

#### MVC模式 ####

*  M：model - 模型层，数据的增删改查
 *  V：view - 视图层，前端页面(html/javascript/css)
 *  C：controller - 控制层，处理业务

**MVC图解**  
![在这里插入图片描述][1fdd92c038544867a9b86c52200aacf3.png]

#### MVVM模式 ####

1. <template><script><style>这三个标签在每个页面都只能存在一个
    2. template：view
    3. script:VM 协调者、调度器
    4. data: Model 所有的数据

**MVVM图解**  
![在这里插入图片描述][d086023be0ba40dcb7d3c492d86f4461.png]

### 项目结构与文件类型 ###

\**page*: 页面  
**static**: 静态文件  
**unpackage**: 打包后产生的文件  
**App.vue**: uni-app的主组件，所有页面都是在该文件下进行切换的，是页面入口文件，用来调用应用生命周期函数、配置全局样式、配置全局的存储globalData  
**main.js**: uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex  
**mainfest.json**: 应用的配置文件，用于指定应用的名称、图标、权限等  
**pages.json**: 对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等  
**uni.scss**：常用样式变量  
![在这里插入图片描述][c786ff70c6be499a8cc18bf30496623f.png]

### 全局标题与页面标题 ###

### 全局样式与页面样式 ###

### App的生命周期 ###

#### 应用生命周期 ####

**onLaunch**: 应用初始化完成时触发(全局只触发一次)  
**onShow**: 应用启动，或从后台进入前台显示  
**onHide**: 应用从前台进入后台  
**onUniNviewMessage**: 对nvue页面发送的数据进行监听  
![在这里插入图片描述][ca93eb1559c643819ca30fcdf26143e3.png]

### 页面的生命周期 ###

![在这里插入图片描述][f64512c79362429ca0b33bb608c18463.png]  
![在这里插入图片描述][8e61e227c32545bea266a014bb27b7a7.png]

### 数据绑定与事件 ###

#### 在页面使用mustache语法：\{ \{表达式\}\} ####

<text class="title">{
        {
        title}}</text>

#### v-bind指令对属性的数据绑定 ####

#### 事件基础 ####

常用的事件处理

#### 条件渲染 v-if与v-show ####

**v-if 和 v-show 区别**  
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。

**根据应用场景选择**

*  v-if 有更高的切换开销，如果在运行时条件很少改变，则使用 v-if 较好。
 *  v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好。

#### 条件渲染三元运算 ####

<view v-if="sex == 1 ? true : false">
    		男性
    	</view>
    	<view v-else>
    		女性
    	</view>

#### 列表渲染v-for的使用 ####

v-for 指令可以实现基于一个数组来渲染一个列表。  
v-for 指令需要使用stus in Students形式的特殊语法，其中 Students是源数据数组，而 stus 则是被迭代的数组元素的别名。

<template>
    	<view v-for="stus in Students">
    		<view>学生姓名：{
        {
        stus.name}},学生年龄:{
        {
        stus.age}}</view>
    		<view >
    			技能：
    			<block v-for="skill in stus.skills">{
        {
        skill}},</block>
    		</view>
    	</view>
    </template>

指令key实现for循环组件的唯一性  
:key保证组件和数据捆绑唯一

### 组件中的动态与静态变量 ###

### 条件判断与for循环 ###

### 多端兼容条件编译 ###

#### 跨端兼容 ####

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

*  大量写 if else，会造成代码执行性能低下和管理混乱。
 *  编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 \#ifdef、\#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

#### 条件编译 ####

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

\*\*写法：\*\*以 \#ifdef 或 \#ifndef 加 %PLATFORM% 开头，以 \#endif 结尾。

\#ifdef：if defined 仅在某平台存在  
\#ifndef：if not defined 除了某平台均存在  
%PLATFORM%：平台名称  
![在这里插入图片描述][0d854457403c4e27bb00050fccc89b22.png]  
%PLATFORM% 可取值如下：  
![在这里插入图片描述][52b1c71609224cfdbdd98db543d534dc.png]  
支持的文件

*  .vue
 *  .js
 *  .css
 *  pages.json  
    各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

注意：

*  条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /\* 注释 \*/、vue/nvue 模板里使用 ；
 *  条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
 *  使用条件编译请保证编译前和编译后文件的正确性，比如json文件中不能有多余的逗号；
 *  VUE3 需要在项目的 manifest.json 文件根节点配置 “vueVersion” : “3”

<template>
    	<view>
    		
    		<view>只在H5编译</view>
    		
    		
    		
    		<view>只在ios/安卓编译</view>
    		
    		
    		
    		<view>只在小程序编译(微信,支付宝,百度)进行编译</view>
    		
    		
    		
    		<view>只在微信小程序编译</view>
    		
    		
    		
    		<view>不在小程序全端编译,只在ios/安卓/h5编译</view>
    		
    	</view>
    </template>

--------------------

## 四、Flex布局 ##

--------------------

### 概念、优势、模型 ###

#### 概念 ####

*  flexible box:弹性盒状布局
 *  容器控制内部元素的布局定位
 *  CSS3引入的新布局模型
 *  伸缩元素、自由填充、自适应

#### 使用Flex布局的优势 ####

*  可在不同方向排列元素
 *  控制元素排序的方向
 *  控制元素的对齐方式
 *  控制元素之间等距
 *  控制单个元素放大与缩放比例、占比、对齐方式

#### Flex布局的常用术语 ####

1.  flex container: flex容器
2.  flex item: flex项目(元素)
3.  flex direction: 布局方向

#### Flex布局的模型 ####

![在这里插入图片描述][28a64cab93554983aaad3d45ac5c55c3.png]  
![在这里插入图片描述][9a529ba9880641a6babf05c74520b352.png]

--------------------

### 容器的属性和布局 ###

#### Flex容器的属性 ####

1.  flex-direction: 设置元素的排列方向  
    **row:排列方向从左到右**  
    **row-reverse:排列方向从右到左**  
    **column:排列方向从上到下**  
    **column:排列方向从下到上**
2.  flex-wrap:使容器内的元素换行  
    **nowrap:不换行**  
    **wrap:换行**  
    **wrap-reverse:反转换行**
3.  justify-content: 设置元素在主轴(x轴或y轴)上的对齐方式  
    **flex-start:(默认)左对齐或向上对齐**  
    **flex-end:右对齐或向下对齐**  
    **center:居中对齐**  
    **space-between:两端对齐，元素之间平均等分剩余空白间隙部分**  
    **space-around:元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2**

/**
     设置元素在主轴(x轴或y轴)上的对齐方式
     flex-start:(默认)左对齐或向上对齐
     flex-end:右对齐或向下对齐
     center:居中对齐
     space-between:两端对齐，元素之间平均等分剩余空白间隙部分
     space-around:元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2
     */
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    justify-content: space-around;

1.  align-items:设置容器中元素在交叉轴上的对齐方式  
    **stretch：(默认)当元素的高度没有设置，则元素的高度会拉伸至容器高度一致**  
    **flex-start:在交叉轴上向起点位置(向上/向左)对齐**  
    **flex-end:在交叉轴上向结束位置(向上/向左)对齐**  
    **center:居中对齐**  
    **baseline:保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)**

/* 
    设置容器中元素在交叉轴上的对齐方式
    stretch：(默认)当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
    flex-start:在交叉轴上向起点位置(向上/向左)对齐
    flex-end:在交叉轴上向结束位置(向上/向左)对齐
    center:居中对齐
    baseline:保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
     */
    /* align-items: stretch; */
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: center; */
    align-items: baseline;

1.  align-content:当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐  
    **center:居中**  
    **flex-start:向左或向上对齐**  
    \*\*flex-end:向右或向下对齐 \*\*  
    **stretch:当宽度width没有设置的时候，轴线可以被拉伸**  
    **space-between:两端对齐，元素之间的空白等比切分**  
    **space-around:轴线两边的空白等比切分**

/* 
     当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐 
     center:居中
     flex-start:向左或向上对齐
     flex-end:向右或向下对齐 
     stretch:当宽度width没有设置的时候，轴线可以被拉伸
     space-between:两端对齐，元素之间的空白等比切分
     space-around:轴线两边的空白等比切分
     */
    align-content: center;
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: space-between; */
    /* align-content: space-around; */

#### 引入外部CSS文件 ####

--------------------

### Flex元素的属性 ###

#### order:控制元素顺序 ####

*  用户设置flex容器内部的每个元素的排列顺序，默认是0
 *  排序规则，由小到大

#### flex-grow:控制元素放大比例 ####

*  用于设置元素的放大比例，默认为0
 *  如果为0，则不放大

#### flex-shrink:控制元素缩小比例 ####

*  用于设置元素的缩小比例，默认为1
 *  设置为0的时候，不进行绽放

#### flex-basis:设置元素固定或自动空间的占比 ####

#### align-self：重写align-items父属性 ####

*  重写容器中元素在交叉轴上的对齐方式

/* 
    order: 用户设置flex容器内部的每个元素的排列顺序，默认是0
    	   排序规则，由小到大
    flex-grow: 用于设置元素的放大比例，默认为0
    		   如果为0，则不放大
    flex-shrink: 用于设置元素的缩小比例，默认为1
    			设置为0的时候，不进行绽放
    align-self：重写容器中元素在交叉轴上的对齐方式
     */
    
    .red{
        
    	background-color: red;
    	/* order: 3; */
    	/* flex-grow: 1; */
    	flex-shrink: 0;
    	flex-basis: 300rpx;
    }
    
    .green{
        
    	background-color: green;
    	/* order: 2; */
    	/* flex-grow: 2; */
    	flex-shrink: 0;
    	flex-basis: 50rpx;
    }
    
    .yellow{
        
    	background-color: yellow;
    	/* order: 1; */
    	/* flex-grow: 3; */
    	flex-shrink: 0;
    }
    /*
    重写容器中元素在交叉轴上的对齐方式
    auto:(默认)表示继承父级元素的align-items属性
    stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
    flex-start:在交叉轴上向起点位置(向上/向左)对齐
    flex-end:在交叉轴上向结束位置(向上/向左)对齐
    center:居中对齐
    baseline:保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
     */
    align-self: center;

[1fdd92c038544867a9b86c52200aacf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0e53c0f1cd5c46f8ae3c2a7fcae75774.png
[d086023be0ba40dcb7d3c492d86f4461.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/50ed205080f04eb1b0ae912e4acbad73.png
[c786ff70c6be499a8cc18bf30496623f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/017a88c0d0cd4bac8ebb486b56ecf20f.png
[ca93eb1559c643819ca30fcdf26143e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ad57a9bf463f4b9192797261228175e0.png
[f64512c79362429ca0b33bb608c18463.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f8be1f20538144a78796a01b354d27da.png
[8e61e227c32545bea266a014bb27b7a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bd85640dbc544dafbdde6f3f1ed5430b.png
[0d854457403c4e27bb00050fccc89b22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/771d77f4b53a467e8ef26508a319e24d.png
[52b1c71609224cfdbdd98db543d534dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/96b4ddd5a3cd4a63990e0cddc1418460.png
[28a64cab93554983aaad3d45ac5c55c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/848f26e37f984f1c8388f847247689f9.png
[9a529ba9880641a6babf05c74520b352.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3f1afcebabe0449281703b09ce019758.png