uni-app基础知识

已于 2022-11-19 23:48:13 修改
阅读量540 收藏 1
点赞数
分类专栏： uni-app 文章标签： uni-app css css3
于 2022-09-07 23:46:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsaicyj/article/details/126754855
版权

uni-app

一、什么时UniApp

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

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

二、为什么使用UniApp

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

三、框架基础

MVC与MVVM思想

MVC模式

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

MVC图解
在这里插入图片描述

MVVM模式

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

MVVM图解
在这里插入图片描述

项目结构与文件类型

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

全局标题与页面标题

全局样式与页面样式

App的生命周期

应用生命周期

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

页面的生命周期

在这里插入图片描述
在这里插入图片描述

数据绑定与事件

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

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

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

<navigator :url="url">
<navigator v-bind:url="url">

事件基础

常用的事件处理

<view>
		<input 
			style="background-color: gray;height: 100rpx;"
			@input="change"
			@blur="blur"
			@focus="focus"
			@confirm="confirm"
			@click="click"
			@tap="tap"
			@longpress="longpress"
			@touchstart="touchstart"
			@touchend="touchend"
			@touchmove="touchmove"
			@touchcancel="touchcancel"
			
		/>
		<!-- @longtap="longtap" -->
	</view>

条件渲染 v-if与v-show

<template>
	<view v-if="isShow">
		if:now you see me!
	</view>
	<view v-else>
		now you not see me!
	</view>
	<view v-show="isShow">
		show:now you see me
	</view>
</template>

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保证组件和数据捆绑唯一

<template>
	<view v-for="stu in Students" :key="stu.id">
		<checkbox :value="stu.name">{{stu.name}}</checkbox>
	</view>
	<button @click="addStu">新增</button>
</template>

组件中的动态与静态变量

条件判断与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%：平台名称
在这里插入图片描述
%PLATFORM% 可取值如下：
在这里插入图片描述
支持的文件

  • .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>
		<!-- #ifdef H5 -->
		<view>只在H5编译</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<view>只在ios/安卓编译</view>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
		<view>只在小程序编译(微信,支付宝,百度)进行编译</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>只在微信小程序编译</view>
		<!-- #endif -->
		
		<!-- #ifndef MP -->
		<view>不在小程序全端编译,只在ios/安卓/h5编译</view>
		<!-- #endif -->
	</view>
</template>

四、Flex布局

概念、优势、模型

概念

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

使用Flex布局的优势

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

Flex布局的常用术语

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

Flex布局的模型

在这里插入图片描述
在这里插入图片描述

容器的属性和布局

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文件

<style>
	@import url("./flexdirection.css");
</style>

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;
wsaicyj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app基础知识点
qq_56045326的博客
06-06 4019
uni-app知识点详解
uniapp初级入门-flex布局学习03-align-items属性
虾米大王的学习历程
12-15 466
【代码】uniapp初级入门-flex布局学习03-align-items属性。
uni-app之flex布局教程 uniapp在线教程 uni app视频教程
04-17
讲解uni-app中如何使用flex的布局，uni-app中原生界面开发必学技能讲解了flex的容器属性讲解了flex的项目属性
uniapp下页面布局分析三——元素垂直居中
lsjweiyi的博客
04-15 1万+
本文继续前面的内容，App.vue采用了flex布局 垂直居中还是有点难度的。 但是习惯使用flex布局后，又能简单的实现。 页面只有一个元素 <template> <view class="center"> <view style="background-color: blue">居中文字</view> </view> </template> <style> .center {
uniapp中flex设置居中
weixin_37166398的博客
04-12 1万+
.horViewStyle { display: flex; flex-direction: row; width: 100%; height: 80rpx; align-items: center;//垂直居中 background-color: #4399FC; } .textHorStyle { display: flex; height: 60%; ...
uniapp 页面元素水平垂直居中
热门推荐
mashangzhifu的博客
10-22 1万+
在uniapp中如何让一个源码在页面中水平垂直居中？在App.vue添加如下代码设置页面宽度100%显示。
uni-app基础.pptx
09-01
项目目录和文件结构是uni-app开发的基础。每个页面由`.vue`文件组成，包括`<template>`、`<script>`和`<style>`三个部分，分别用于定义视图结构、处理逻辑和样式。例如，创建新页面`message`，可以在`pages`目录下...
uni-app登录实例的实现
10-29
首先，我们需要了解uni-app的基础知识。uni-app是EcoApp体系下的一个开源项目，由DCloud(数字天堂)推出，它基于Vue.js语法，提供了丰富的组件和API，可以便捷地构建原生应用。HBuilderX作为uni-app的主要开发工具，...
uni-app项目练习2
05-16
【uni-app项目练习2】 uni-app是一个由DCloud(即HBuilderX)开发的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ小程序等多个平台运行。这...
uni-app开发商城类小程序
01-22
【uni-app开发商城类小程序】 uni-app是一款由DCloud(海豚浏览器团队)推出...通过上述知识点，我们可以了解到uni-app开发商城类小程序所涉及的技术栈和实际开发过程中可能遇到的问题，从而更好地构建和维护此类项目。
uni-app优医问诊-配套资料
最新发布
05-04
1. **uni-app基础**：首先，你需要了解uni-app的基础概念，如项目创建、环境配置、页面结构等。uni-app使用Vue.js的组件化思想，因此对Vue.js的基本语法和生命周期的理解至关重要。 2. **uni-App组件与API**：uni-...
基于Vue的uni-app个人日记App
03-04
通过研究这个基于Vue的uni-app个人日记App，开发者不仅能学习到前端开发的基础知识，还能掌握如何利用uni-app进行多平台开发，以及如何组织和管理复杂的前端项目。同时，通过源码阅读，可以提升对Vue.js和uni-app的...
uni-app-mqtt示例.zip
02-03
综上所述，【uni-app-mqtt示例.zip】项目是一个实践 MQTT 协议的 uni-app 前端示例，涵盖了 MQTT 的基础应用、uni-app 的开发技巧以及跨平台开发的考虑。通过学习和理解这个示例，开发者可以掌握如何在前端实现 MQTT...
weather-uni-app
03-10
通过深入研究 "weather-uni-app"，你可以提升 Vue.js 和 uni-app 的实战技能，为今后的跨平台移动应用开发打下坚实基础。同时，也可以学习到如何组织项目结构、优化代码和提高用户体验等方面的知识。
uni-app中自定义页面顶部标题
Tianxiaoxixi的博客
08-06 7683
uni-app中自定义页面顶部标题
uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）
weixin_53339757的博客
08-09 2167
uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）
uni-app flex布局全解
wwppp987的博客
02-16 4086
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性 设置Flex布局也很简单直接css中，设置它的 display:flex 1.flex-direction 容器内元素排列方向 row ：从左至右 row-reverse ：从右至左 column：从上到下 column-reverse：从下到上 2.flex-wrap:容器内的元素换行 nowrap　　不换行 wrap　　　换行 wrap-reverse 反向换行 3.justify-content
uniapp 变量的种类与使用
weixin_38946164的博客
01-30 5924
一、uniapp 变量的种类 变量按作用范围分为全局变量，页面级变量，函数级变量。 全局变量作用于整个程序的各个页面，页面级变量只作用于一个页面，函数级变量只能在函数内部使用。 二、uniapp 变量的使用 1. 全局变量的声明与使用 1-1、本地存储方式 1-2、globalData方式 2. 页面级变量声明与使用 2-1、先声明变量 2-2、使用变量 2-3、视图层变量，用在WXML 中的动态数据 3. 函数级变量声明与使用 部分参考这篇文章 https://blog.csdn.net
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值