introducción uniapp
preparación del entorno
1. Instale el entorno node.js
Proceso de instalación: instale node.js en una letra de unidad que no sea la unidad C
Una vez completada la instalación, compruebe si el entorno de nodejs es normal.
Ingrese en la ventana cmd:
node -v
npm -v
Configure el directorio de caché y el directorio de instalación global de nodejs
Cree un directorio llamado nodeConfig en una letra de unidad que no sea la unidad c, cree los directorios node_cache y node_global en el directorio
y luego ejecute el comando, ejecute la ventana cmd con privilegios de administrador
npm config set prefix "E:\nodeConfig\node_global"
npm config set cache "E:\nodeConfig\node_cache"
2. Instalar espejo Taobao
Entorno de Taobao: herramienta cnpm, npm descarga recursos de almacenes espejo en el extranjero, cnpm descarga recursos del sitio de recursos espejo Taobao de Ali, y la velocidad será rápida
npm install -g cnpm
// 如果速度慢 ，就切换资源站点
npm install -g cnpm --registry=https://registry.npm.taobao.org
Configure la ruta (ruta node_global) descargada por cnpm a la ruta de la variable de entorno
Use la ventana cmd para probar si la configuración de cnpm es normal
3. Descarga HX-idea
- Registrar cuenta HX
- Configure los componentes relacionados con HX (HTML, CSS, JS, Vue, Styule, less, piutter; incorporado: vue2.0, consola incorporada, simulación de máquina real) El siguiente es el contenido que se instalará para los componentes externos
:
Construir el proyecto uniapp
crear proyecto
ejecutar proyecto
1. Ejecute el proyecto usando un navegador
Abra las herramientas de desarrollo del navegador y cambie al modo de depuración
Fuera de servicio
2. Use la herramienta del subprograma WeChat para ejecutar el proyecto
1. Descargue la herramienta de desarrollo del programa WeChat Mini
Dirección de descarga:
dirección de descarga de la herramienta de desarrollo del subprograma WeChat, haga clic para ingresar
2. Atención a la instalación, instale en una letra de unidad que no sea la unidad C
3. Configurar las herramientas de desarrollo de WeChat
4. Configure la asociación entre HX y las herramientas de desarrollo de WeChat
5. Una introducción concisa a la interfaz de la herramienta para desarrolladores
6. Vinculación de cuenta y proyecto de WeChat Mini Program
Propósito: realizar la liberación rápida de código a la plataforma pública de WeChat
- Inicie sesión en la plataforma pública de WeChat, copie el ID de la aplicación (ID del applet de WeChat, único)
Después de que se complete la copia y el pegado, vuelva a ejecutar el simulador de applet
7. Sube a la plataforma pública de WeChat para lanzar la versión beta
Ingrese a la plataforma pública de WeChat para ver la versión de prueba
8. Utilice las herramientas de desarrollo de WeChat para la depuración de dispositivos reales
explicación del directorio del marco del proyecto uni-app
Incluye los siguientes directorios:
|--pages 业务页面文件存放目录（开发使用）
|--|-- index 业务包名
|--|--|-- index.vue 页面（vue文件）
|--static 静态资源目录（图片、视频、文件、安装包...）
|--unpackage 项目打包目录（编译后该目录就会生成，开发时不去修改）
|--|--dist 打包完成的文件夹（之后编译之后才会生成）
|--App.vue 实例页面，应用生命周期函数
|--main.js 入口文件，完成相关app的配置
|--manifest.json 配置应用名称、图标、小程序信息配置文件
|--pages.json 配置路由、导航条信息
|--uni.scss uni-app通用css样式配置文件
1. Composición y método de escritura del archivo del componente Uniapp-page
Ejemplo: crear una página de inicio de sesión
Composición de la página
<!-- HTML页面 - 可视化部分-->
<template>
<!-- 所有的html代码都要卸载view标签中 -->
<view>
<div>
<!-- 点击span标签弹出框体 -->
<span @click="cxk" >哎哟你干嘛！{
{ userName }}</span>
</div>
</view>
</template>
<!-- vue组件脚本部分 js vue -->
<script>
export default {
data() {
// vue数据双向绑定
return {
userName:"马保国"
}
},
methods: {
// js函数？？？？点击触发什么事情
cxk(){
alert("!!!!!!");
}
}
}
</script>
<!-- 组件样式部分 -->
<style>
span{
color:red;
}
</style>
2. Enrutamiento de configuración del archivo Pages.json
Por ejemplo: después de configurar el enrutamiento del archivo recién creado, puede acceder a la página a través de la dirección del navegador
Explicación del contenido del archivo Pages.json:
{
"pages": [ //pages数组中第一项表示应用启动页
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/common/login", // 路由访问的地址（浏览器可以通过该地址访问页面）
"style" :
{
"navigationBarTitleText": "测试页面", // 导航条显示的文字
"enablePullDownRefresh": false // 关闭下拉刷新功能
}
}
],
"globalStyle": {
// uni-app的通用样式- 设置导航条的样式
"navigationBarTextStyle": "black", // 导航条文字的颜色
"navigationBarTitleText": "体职院-21电子2班-案例", // 导航条文字
"navigationBarBackgroundColor": "#F8F8F8", // 导航条背景颜色
"backgroundColor": "#F8F8F8" // 整个app的背景颜色
},
"uniIdRouter": {
}
}
Inicio rápido basado en cero HTML, CSS, JS
1. HTML en una aplicación
El contenido HTML se divide en varios fragmentos:
- Texto (texto normal, texto de párrafo, etiquetas de encabezado, hipervínculos)
- Imagen (etiqueta de imagen)
- Vídeo (etiqueta de vídeo)
- Formularios (entrada de texto, selección desplegable, selección de radio, selección de cheques, selección de archivos)
- cuadro (ver etiqueta)
Nota : el desarrollo de HTML consiste en organizar y utilizar etiquetas y contenido para lograr el efecto del diseño básico de una página web.
Cada línea de código solo puede escribir un conjunto de etiquetas, y las etiquetas se pueden anidar, pero preste atención a las reglas de anidamiento, todo el contenido, incluido el texto, debe anidarse con etiquetas.
Las etiquetas HTML se dividen en elementos a nivel de bloque y elementos en línea
- Elemento a nivel de bloque: el contenido del elemento ocupa automáticamente una línea y no se puede mostrar en la misma línea que otras etiquetas de elementos a nivel de bloque o etiquetas de elementos en línea
- Elemento en línea: solo el ancho y el alto de su propio elemento de contenido se pueden mostrar en la misma línea que otros elementos en línea
Elementos a nivel de bloque:
<p>段落文本标签</p>
<h1>标题标签</h1>
<center>元素居中标签</center>
Elementos en línea:
<text>普通文本</text>
<a>超链接\锚点</a>
<b>文字加粗</b>
<i>文字倾斜</i>
1.1 caracteres
1.1.1 Texto normal
Escritura de la etiqueta:
<text>文字内容（内部只能写文字不能嵌套别的标签）</text>
Función: un texto simple se puede describir en una página web
caso:
<!-- 组件页面（眼睛看见的部分-HTML） -->
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<text>大家好！</text>
<text>我叫ikun！</text>
<text>今年45岁</text>
</view>
</template>
1.1.2 Texto del párrafo
Escritura de la etiqueta:
<p>一段文本（可以嵌套如text标签）</p>
Función: puede describir un párrafo de texto largo, y el párrafo y otro contenido no se pueden mostrar en la misma línea
caso:
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<p>大家好！我是练习时长两年半XXX</p>
<p>我会CTRL</p>
<!-- p标签和text标签同时出现 -->
<p>大家好！我是练习时长两年半XXX</p>
<text>jijijijiji</text>
<!-- p标签包含text标签 -->
<p>okok你可真的好厉害！
<text>hahahah</text>
</p>
</view>
</template>
1.1.3 Etiquetas de título
Escritura de la etiqueta:
<h1>文字内容（可以嵌套：text）</h1>
Función: describe un título de texto grande, el texto está en negrita y ampliado
caso:
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<!-- 标题标签只有6个从h1~h6 数字越小文字越大 -->
<h1>马保国-h1</h1>
<h2>马保国-h2</h2>
<h3>马保国-h3</h3>
<h4>马保国-h4</h4>
<h5>马保国-h5</h5>
<h6>马保国-h6</h6>
</view>
</template>
1.1.4 Hipervínculos
Escritura de la etiqueta:
<!-- 一般不要嵌套别的内容，后面可以学习嵌套图片实现图片超链接 -->
<a href="超链接的地址">超链接文字</a>
Hipervínculo: haga clic en el texto para saltar a otras páginas web
caso:
<template>
<!-- 都要卸载view标签中才能显示 -->
<!-- 大家好！我叫蔡徐坤！今年45岁 -->
<view>
<a href="https://www.baidu.com">去百度</a>
</view>
</template>
Enlace ancla
La pantalla es larga y la pantalla se desplaza, haga clic para volver a la parte superior y saltar directamente a la posición superior
<!-- 锚点 -->
<a name="topnav">顶部锚点</a>
<!-- 锚链接 : 点击锚链接可以回到锚点所在的位置 -->
<a href="#topnav">回到顶部</a>
1.1.5 Otras etiquetas complementarias
<!-- 加粗 -->
<b>文字</b>
<text>文字</text>
<!-- 快速文字内容水平居中 -->
<center>
<text>居中文字</text>
</center>
<!-- 文字倾斜标签 -->
<i>文字2</i>
1.2 Fotos
mostrar imagen
1.1.1 atributo src
Función: señalar la dirección de una imagen para cargar la imagen
1. Use la dirección en línea para cargar
<!-- 1. 使用在线图片地址加载图片 -->
<image src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TH0deMslA_zRpkYFZxJ-GgAAAA?pid=ImgDet&rs=1" />
2. Carga de dirección local - carga de ruta relativa
<!-- 3.相对路径访问地址 -->
<image src="../../static/xhz2.png" />
1.1.2 atributo de etiqueta de título
Ratón o presione prolongadamente un mensaje de texto
<img title="你干嘛!" src="../../static/xhz2.png" />
1.3 vídeo
Introducción de atributos:
src:
controles de dirección de video: barra de operación de video
reproducción automática: reproducción automática
silenciada: silenciar
bucle: reproducción en bucle
<video controls autoplay muted loop src="../../static/v1.mp4"></video>
1.4 Formularios
<!-- 单行文本输入款 -->
<input type="text" placeholder="输入提示文字..."/>
<!-- 密码框 -->
<input type="password" placeholder="请输入密码..." />
<!-- 单选框 -->
<radio-group name="sex">
<radio value="1" />男
<radio value="2" />女
</radio-group>
<!-- 复选框 -->
<checkbox-group name="likes">
<checkbox value="1" />吃鸡
<checkbox value="2" />csgo
<checkbox value="3" />lol
</checkbox-group>
<!-- 多行文本输入框 -->
<textarea placeholder="请输入自我介绍..."></textarea>
<!-- 下拉框 -->
<select>
<option value="1">昆明</option>
<option value="2">蒙自</option>
<option value="3">迪庆</option>
</select>
<!-- 按钮 -->
<button type="warn" >警告按钮</button>
<button >默认按钮</button>
<button type="primary" >重要提示按钮</button>
2. Inicio rápido de css en uniapp
Qué aprender:
- selector (clase, etiqueta, id, niño, hermano, vecino)
- hoja de estilo:
- Estilo de texto (fuente, tamaño, peso, divisor, color, sombra)
- Fondos de imagen (imagen de fondo, patrón de mosaico, repetición, relleno)
- Modelo de caja (margen, relleno, borde, alto, ancho)
- Método de diseño de página web:
- diseño flotante
- diseño flexible
- Posicionamiento de elementos (posicionamiento absoluto, relativo, fijo, pegajoso)
- Animaciones (propiedades de elementos de transición, animaciones de fotogramas clave)
2.1 Selector
Seleccione elementos o etiquetas en la página web para modificar el estilo.
2.1.1 Cómo importar estilos:
- Ejemplo de estilo en línea
:
<div>
<!-- 行内样式作用的是style属性所在的标签以及子标签 -->
<span style="color:red;">哎哟你干嘛！{
{ userName }}</span>
<span>123</span>
</div>
- Ejemplo de estilo interior
:
<!-- 内部样式写在style标签中-->
<style>
/* 使用内部样式时就要使用元素选择器选择要修改样式的标签 */
span{
color:green;
}
</style>
- Estilo externo:
escribe el código css en un archivo con el sufijo .css, e introduce el componente importando
Case:
/*mytest.css文件*/
span{
color:red;
}
Importar en componente:
<!-- 内部样式写在style标签中-->
<style>
/* 在组件页面的style标签中导入css文件 */
@import url('../../static/mytest.css');
</style>
2.1.2 Selector de etiquetas
Función: seleccione un grupo de objetos de etiqueta con el mismo nombre en la página para modificar el estilo
caso:
/* 修改页面中所有的h1标签 */
h1{
color:red;
}
/* 改变一组标签的写法 */
h2,h3,h4{
color:green;
}
2.1.3 Selector de clase (uso común)
Método de escritura: use el atributo de clase para nombrar y marcar una clase de etiquetas en la etiqueta html, y modifique el estilo css a través de la selección del nombre del atributo de clase
caso:
<span class="demo">文字1</span>
<span>文字2</span>
<span class="demo">文字3</span>
<!-- 一个标签可以拥有多种样式 -->
<span class="demo demo2">文字4</span>
.demo{
color:red;
}
.demo2{
font-size:18px;
}
2.1.4 Selector de ID
Descripción de id: asegúrese de que en la misma página, el valor del atributo id no se pueda repetir.
El método de escritura es similar al de la clase
caso:
<span id="ft1">文字1</span>
<span>文字2</span>
<span id="ft2">文字3</span>
<!-- id属性只能有一个唯一值，不能用空格分隔编写多个id -->
/* 只修改id为ft1的样式 */
#ft1{
color:red;
}
2.1.5 Selector de elementos secundarios
Al escribir html, las etiquetas se pueden anidar. En este momento, el método de configuración del estilo se puede modificar seleccionando la etiqueta secundaria a través de la etiqueta principal, pero tenga en cuenta que el selector de elementos secundarios solo puede seleccionar el elemento "hijo" y el implementación de las necesidades del "elemento nieto" Implementado usando selectores de elementos descendientes
caso:
<div class="demo">
<span>儿子</span>
<div>
<span>孙子</span>
</div>
</div>
.demo>span{
color:red;
}
2.1.6 Selectores de elementos descendientes
La llamada descendencia significa que no importa cuántos niveles haya en la jerarquía de subelementos, siempre que se modifique el subelemento
caso:
<div class="demo">
<span>儿子</span>
<div>
<span>孙子</span>
</div>
</div>
.demo span{
color:red;
}
2.1.7 Selectores de hermanos adyacentes
Seleccione el primer elemento adyacente al elemento de destino y el primer elemento adyacente al mismo nivel
<p>段落1</p>
<p id="p2">段落2</p>
<text>文本</text>
<p>段落3</p>
#p2+text{
color:red;
}
2.1.8 Selectores de hermanos genéricos
Todos los elementos seleccionados adyacentes serán modificados
<p>段落1</p>
<p id="p2">段落2</p>
<text>文本</text>
<p>段落3</p>
#p2~text{
color:red;
}
2.2 Selectores de elementos de pseudoclase
2.2.1 El mouse se mueve y cambia (desplazarse)
<text>文字1</text>
text:hover{
color:red;
font-size:80px;
}
2.2.2 una etiqueta dedicada - ha sido visitada (visitado)
Cuando se ha accedido a la etiqueta, el efecto de estilo de la etiqueta cambia
a:visited{
color:red;
}
2.3 Efectos de estilo CSS
1. Estilo de texto
Puede lograr: fuente de texto, tamaño, grosor, subrayado, inclinación, espaciado, color, sombra
1. Fuente
#t1{
font-family: '宋体';
}
2. Tamaño del texto
#ti{
font-size:18upx; #uni-app特有的像素点单位描述
}
3. Texto en negrita
#t1{
font-weight: 500;
}
4. Inclinación del texto
#t1{
font-style: italic;
}
5. Sombra de texto
#t1{
text-shadow: 1px 0px 2px red;
}
6. Espaciado de texto
#t1{
letter-spacing:10upx;
}
7. Texto subrayado
#t1{
/*text-decoration: underline;*/ /* 下划线*/
text-decoration:line-through; /* 中横线*/
color:red;
}
8. Color del texto
#t1{
color:red; /* 英文单词 */
color:rgb(255,255,0); /* rgb三原色色值 */
color:#76C379; /* 16进制色值 */
color:rgba(255,255,0,0.5)
}
2. Estilo de fondo
fondo
1. Color de fondo
h1{
background-color: aquamarine;
}
2. Color de fondo degradado
gradiente lineal
h1{
background:linear-gradient(90deg,red,blue);
}
Gradiente central
h1{
background:radial-gradient(red,blue);
}
3. Imagen de fondo
h1{
/* 背景图片 */
background-image: url('图片地址');
}
4. Relación de estiramiento de imagen
h1{
/* 背景图片 */
background-image: url('图片地址');
background-size: 100% 100%; /* 图片【宽】、【高】拉伸属性 */
}
5. Método de mosaico de la imagen de fondo
.mydiv{
width: 800upx;
height: 500upx;
background-image: url('gk');
background-repeat: repeat-y; /*默认repeat：使用平铺 no-repeat：背景图片不平铺 repeat-y：纵向平铺 repeat-x：横向平铺*/
}
6. Posicionamiento de la imagen de fondo
.mydiv{
width: 80upx;
height: 80upx;
border: 1px solid red;
background-image: url('../../static/comm-spr.png');
background-position: 150upx 50upx; /* 背景图片定位： 【X轴移动像素点】 【Y轴移动像素带你】 */
}
3. Modelo de caja
El modelo de caja consta de 4 partes:
1. margen: margen exterior
2. borde: borde
3. relleno: margen interior
4. contenido: contenido del elemento
div{
margin:10px; /* 上右下左都有10个像素点的外边距 */
border:1px solid black; /* 边框的描述 */
padding: 10px; /* 上右下左都有10个像素嗲你的内边距 */
width:100upx; /* 宽高指的内容宽高 */
hegiht:100upx;
}
Cómo establecer los valores de margen y relleno
- Método de configuración de valor único: margen: 20 px; superior, derecha, inferior e izquierda son todos márgenes de 20 px
- Método de configuración bilateral: margen: 20px 10px; arriba y abajo 20 izquierda y derecha 10
- Método de configuración de cuatro lados: margen: 10px 20px 30px 40px; descripción en el sentido de las agujas del reloj, arriba a la derecha, abajo a la izquierda
- Las palabras en inglés describen un lado:
margen superior: 10 px;
margen izquierdo: 40 px;
margen derecho: 50 px;
margen inferior: 60 px;
resumen: superior: superior, inferior: inferior, izquierda: izquierda, derecha: derecha
método de configuración de borde
-
Escritura completa de una sola línea:
borde: 1 px gris sólido,
borde: color de tipo de estilo de grosor de borde; -
Describa el estilo de borde de un lado especial:
palabra de posición de borde: color de tipo de estilo de grosor de borde,
por ejemplo: estilo de borde inferior:
borde inferior: 1 px negro sólido;
Tipo de estilo de borde:
- sólido: línea continua
- punteado: línea punteada (línea punteada de origen)
- doble: cuadro línea punteada
Reglas de cálculo del modelo de caja
Cálculo del tamaño de la caja: margen+relleno+borde+ancho\alto
Cambie las reglas de cálculo del modelo de caja:
box-sizing: border-box;
Deje que los valores de ancho y alto establecidos se calculen como el tamaño total de padding+border+content, para que el modelo de caja no se deforme
4 CSS-Posicionamiento
Propósito de posicionamiento: darse cuenta de que los elementos en la página web pueden aparecer en la posición especificada (superposición, fijo, desplazamiento relativo)
método de posicionamiento: posicionamiento fijo (fijo), posicionamiento relativo (relativo), posicionamiento absoluto (absoluto), posicionamiento fijo
La descripción de orientación tiene cuatro valores de orientación:
- izquierda: el número de píxeles desde el borde izquierdo
- derecha: el número de píxeles desde el borde derecho
- bottom: el número de píxeles desde el borde inferior
- top: el número de píxeles desde la parte superior
Nota: Por lo general, solo se describen las dos posiciones de borde más cercanas, izquierda+arriba, derecha+abajo, izquierda+abajo, derecha+arriba
1. Posicionamiento fijo
Siempre se fijará en la posición relativa de la pantalla y no cambiará.
Caja: botón pequeño fijo arriba
<view class="myDiv">
1
</view>
<text>回到顶部</text>
.myDiv{
height: 9000px;
width: 150px;
background:linear-gradient(180deg,blue,red)
}
text{
position: fixed; /* 固定定位 */
right: 10px;
top: 50px;
}
2. Posicionamiento relativo
Desplazamiento relativo a su posición original, pero la posición original no se ocupará
<view class="myDiv1">
div1
</view>
<view class="myDiv2">
div2
</view>
.myDiv1{
height: 150px;
width: 150px;
background-color: aqua;
position: relative;
top: 10px;
left: 20px;
}
.myDiv2{
height: 150px;
width: 150px;
background-color: red;
}
3. Posicionamiento absoluto
<view class="myDiv1">
<view class="myDiv2">div2</view>
</view>
.myDiv1 {
height: 150px;
width: 150px;
background-color: aqua;
position: relative;
top: 10px;
left: 20px;
}
.myDiv2 {
height: 50px;
width: 50px;
background-color: red;
position: relative;
/* 相对于父级元素偏移（要求父级元素也使用了position属性，如果没有则相对于网页进行偏移） */
top:10px;
left:10px;
}
marco vue
1. ¿Qué es Vue?
Vue.js es un marco JS de front-end, ligero y basado en datos que proporciona enlaces de datos eficientes y sistemas de componentes flexibles a través de una API concisa .
2. ¿Cuáles son las ventajas técnicas en comparación con Jquery?
Antiguo: Jquery
Manipular elementos DOM
jQuery usa un selector ($) para seleccionar objetos DOM y realiza operaciones como asignación, recuperación de valores y enlace de eventos en ellos. De hecho, la diferencia con el HTML nativo es que los objetos DOM se pueden seleccionar y manipular de manera más conveniente, mientras que los datos y las interfaces están juntas
Las páginas complejas son costosas de mantener
jquery necesita obtener el nodo del elemento dom y agregar una etiqueta al dom.Si la estructura dom es particularmente complicada, o los elementos agregados son muy complicados, el código se volverá muy complicado y la legibilidad será baja.
Difícil de lograr páginas en componentes
La mayor parte del código en la era JQuery es código fideo, y el acoplamiento es serio
pérdida de rendimiento
Consumo de recursos del navegador
Nuevo: Vue.js
Separación de datos y vistas
Vue separa completamente los datos y la vista a través de los objetos de Vue. Ya no es necesario hacer referencia al objeto DOM correspondiente para operar sobre los datos, se puede decir que los datos y la Vista están separados, y están vinculados entre sí a través de la vm del objeto Vue. Este es el legendario MVVM.
Enlace bidireccional de datos
Esta es la mayor ventaja de vue.js. El enlace bidireccional de datos se realiza a través de la idea de MVVM, de modo que los desarrolladores ya no necesitan operar objetos DOM y tienen más tiempo para pensar en la lógica comercial.
Componentización flexible
Vue.js divide varios módulos en una aplicación de una sola página en componentes individuales a través de componentes. Solo necesitamos escribir primero varias etiquetas de componentes en la aplicación principal y escribir los componentes que se pasarán en las etiquetas de componentes. Ingrese los parámetros de los componentes , y luego escriba la implementación de varios componentes por separado, y luego se completará toda la aplicación.
DOM virtual, corre más rápido
El DOM virtual es un tipo de cálculo que se puede realizar a través de JavaScript por adelantado para calcular y optimizar la operación DOM final. Dado que esta operación DOM es una operación de preprocesamiento y en realidad no opera el DOM, se denomina DOM virtual.
3. ¿Qué es el enlace bidireccional?
Un cambio en la capa de vista afectará el contenido de la capa de datos, y un cambio en el contenido de la capa de datos afectará el efecto del marco MVVM de la capa de vista
(Model-View-ViewModel)
4. Características técnicas de Vue
5. Introducir los principales archivos y usos del proyecto en uniapp
Basado en la explicación de uniapp, uniapp también se implementa en base a vue, por lo que también tiene archivos principales relevantes
1. Archivo App.vue
Archivo de función del ciclo de vida del software de la aplicación:
<script>
export default {
// 三个app加载钩子函数
// 1. 当app加载时会触发的函数
onLaunch: function() {
// 在整个app生命周期中只会被执行一次
console.log('App Launch')
},
// 2. 当app页面被展示（显示主页页面时）
onShow: function() {
// 每一次打开app（从后台切换到前台显示）
console.log('App Show')
},
// 3.当关闭app或者app进入后台时会触发的函数
onHide: function() {
// 每一次关闭或者切换到后台运行都会触发
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
2. archivo principal.js
Describe el archivo de entrada de la aplicación.
// main.js是程序的入口文件，项目只要编译运行就会先执行main.js文件
// main.js经常使用与配置和全局组件引入功能
// 导入app.vue页面
import App from './App'
// #ifndef VUE3
// 导入vue组件
import Vue from 'vue'
// 是否要关闭隐藏代码警告
Vue.config.productionTip = false
// uniapp配置- 声明app标识符
App.mpType = 'app'
try {
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (res[0]) {
reject(res[0]);
} else {
resolve(res[1]);
}
});
});
},
});
} catch (error) {
}
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp } from 'vue'
export function createApp() {
// 创建一个uniapp实例（保证整个项目只有一个实例）
const app = createSSRApp(App)
return {
app
}
}
// #endif
3. archivo manifest.json
Los applets, las aplicaciones y los archivos de configuración de aplicaciones
deben abrirse con HBuilderX
4.pages.json - archivo de configuración de la ruta del componente
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index", // 页面的地址
"style": {
// 每个页面的组件样式
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/index/test1/test1",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
// 全局组件样式配置
"navigationBarTextStyle": "black", // 组件导航栏文字颜色
"navigationBarTitleText": "uni-app", // 组件导航栏默认文字
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
"backgroundColor": "#F8F8F8" // 组件背景颜色
},
"uniIdRouter": {
}
}
6. Versión Vue2.0 - función de ciclo de vida
El ciclo de vida de cada componente de la página.
1. Fase de creación de componentes (crear) ---- también activará la devolución de llamada uniapp-onShow
2. Fase de representación de componentes (montaje)
3. Fase de ejecución de componentes: actualización de modificación de enlace bidireccional de datos (actualización)
4. Fase de destrucción de componentes (destruir ) ---- también activará la devolución de llamada uniapp-onhide
1. Fase de creación de componentes - crear
![[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-1gJR5kD5-1681301986776) (observe la imagen/imagen-20230307152128103.png)]](https://img-blog.csdnimg.cn/f879b32395b0424f821f09d707f893d2.png)
- componente instanciado
- beforeCreate antes de la creación
- Habilitar el monitoreo de datos
- Inicializar el método interno de vue
- creado creado
caso:
<template>
<view class="content">
<view class="myDiv1">
组件页面
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
// 创建阶段不会渲染html
// 创建前生命周期函数-html不会开始渲染，只是刚刚进入组件要开始加载的阶段
beforeCreate(){
console.dir("1.创建前---");
},
// 创建后生命周期函数-- 组件参数、绑定的数据初始化完成
created(){
console.dir("2.创建后---");
},
methods: {
}
};
</script>
<style>
</style>
2. Fase de representación de componentes - montaje
Vue elige renderizar la plantilla, ya sea para usar el componente vue para renderizar o simplemente para renderizar parte del html
1.beforeMount: antes de que se represente el elemento dom
comenzar a renderizar
- montado: el montaje del dom está completo (el componente está completamente cargado, una función de enlace que se usa a menudo en el desarrollo)
caso:
<template>
<view class="content">
<view class="myDiv1">
组件页面
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
// html渲染前 -- html（template标签中的内容才刚刚开始渲染）
beforeMount(){
console.dir("3.组件渲染前--");
},
// html渲染完成-- html（template标签中的内容已完全渲染完成）
mounted(){
console.dir("4.渲染完成--");
},
methods: {
}
};
</script>
<style>
</style>
3. Fase de ejecución del componente - actualización de datos - actualización
El oyente monitoreará todos los cambios de valor de datos
1.beforUpdate - antes de la actualización de datos
Use VDom para renderizar html dinámicamente
- actualizado: la representación de datos está completa
Caso: el caso de la intercepción a la transformación de datos
<template>
<view class="content">
<view class="myDiv1">
组件页面---{
{ name }}
<button @click="aa">改变name值</button>
</view>
</view>
</template>
<script>
export default {
data() {
// 需要实现双向绑定的数据要写在data (){reutrn{ 语句块中 }}
return {
name:"蔡徐坤"
};
},
// 数据更新之前
beforeUpdate() {
console.dir("数据更新之前--");
debugger
},
//数据更新之后
updated() {
console.dir("数据更新之后--");
},
methods: {
aa(){
this.name = "吴彦祖";
}
}
};
</script>
<style>
</style>
4. Fase de destrucción de componentes - destruir
Nota: De forma predeterminada, el componente no se destruirá activamente. Debe usar la instrucción v-if o Vue.$destroy() para activar el proceso de destrucción de vue.
- Si el componente entra en el proceso de destrucción (instrucción v-if o Vue.$destroy())
- beforeDestroy - antes de destruir
- Destruir: todas las cachés de valores de datos en el componente desaparecerán y la caché de vdom también se borrará
- destruido - destruido
caso:
<template>
<view class="content">
<view class="myDiv1">
组件页面---{
{ name }}
<button @click="aa">改变name值</button>
</view>
</view>
</template>
<script>
export default {
data() {
// 需要实现双向绑定的数据要写在data (){reutrn{ 语句块中 }}
return {
name:"蔡徐坤"
};
},
// 组件销毁之前
beforeDestroy() {
console.dir("3.组件销毁之前--");
},
// 组件销毁之后
destroyed() {
console.dir("4.组件销毁之后--");
},
methods: {
aa(){
this.name = "吴彦祖";
}
}
};
</script>
<style>
</style>
7. Sintaxis de Vue - expresión de interpolación
La expresión de interpolación es un par de llaves { { elementos para colocar datos de enlace bidireccional }}
caso:
<template>
<view class="content">
<view class="myDiv1">
<!-- 在此处，插值表达式就会将name对应的数据“蔡徐坤”渲染到插值表达式所在的位置 -->
组件页面---{
{ name }}
</view>
</view>
</template>
<script>
export default {
data() {
// 需要实现双向绑定的数据要写在data (){reutrn{ 语句块中 }}
return {
name:"蔡徐坤"
};
},
methods: {
}
};
</script>
directiva v-once
Rol: Describa que la expresión de interpolación solo vinculará el valor de datos original del componente y no se puede cambiar
Caso:
<template>
<view class="content">
<view class="myDiv1">
<span>{
{ name }}</span>
<hr/>
<!-- 让数据双向绑定的效果失效，只加载第一次绑定的数据进行渲染 -->
<span v-once>{
{ name }}</span>
<button @click="name='吴彦祖'">name改变为“吴彦祖”</button>
</view>
</view>
</template>
8. comando vue
1. v-si \v-si no
Características: para permitir que los componentes o las etiquetas se monten (verdadero) o se eliminen (falso)
<!-- 当v-if值为true时：标记的标签或者组件会被加载
为false是：标记的组件或标签会被移除
-->
<div v-if="布尔值数据" >XXX</div>
caso:
<template>
<view class="content">
<view class="myDiv1">
<h1 v-if="isLoading" >大家好！我是XXX</h1>
<button @click="changeSapn()">切换</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '蔡徐坤',
isLoading:false
};
},
methods: {
changeSapn() {
if(this.isLoading==false){
this.isLoading = true;
}else{
this.isLoading = false;
}
}
}
};
</script>
<style></style>
v-otro
Activa la carga de v-else cuando v-if no está satisfecho
<h1 v-if="age>11">XXX</h1>
<h1 v-else>吴彦祖</h1>
2. v-mostrar
Características: los componentes o etiquetas existen todo el tiempo, solo muestre u oculte componentes o etiquetas a través de css
<template>
<view class="content">
<view class="myDiv1">
<h1 v-show="isLoading" >大家好！我是XXX</h1>
<button @click="changeSapn()">切换</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '蔡徐坤',
isLoading:false
};
},
methods: {
changeSapn() {
if(this.isLoading==false){
this.isLoading = true;
}else{
this.isLoading = false;
}
}
}
};
</script>
<style></style>
3. v-on (vinculación de eventos)
<button v-on:dblclick="changeSapn">切换</button>
v-on está escrito en la etiqueta para activar el evento, v-on: nombre del evento = "la cantidad de líneas que se llamarán después de que se active el evento"
Tipos de disparadores de eventos:
| nombre del evento | escritura de eventos |
|---|---|
| haga doble clic | dblclick |
| hacer clic | hacer clic |
| ratón sobre | mouseove |
| ratón fuera | ratón fuera |
El método de vinculación abreviada de eventos en vue
<button @dblclick="changeSapn">切换</button>
@EventName = "Número de líneas a llamar después de que se active el evento"
4. v-para
1. Método de colección o matriz en bucle
<template>
<view class="content">
<view class="myDiv1">
<!-- 将arr的数据循环为三个h1标签 -->
<h1 v-for="(item,index) in arr">{
{ index }}{
{ item.name }} - {
{ item.age }}</h1>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:[
{
name:"张三",
age:18
},
{
name:"李四",
age:28
}
]
};
},
2. Mapa de bucles
<template>
<view class="content">
<view class="myDiv1">
<!-- 如果循环的是一个对象或map集合，item代表的是对象的属性值，index代表的是对象的属性名 -->
<h1 v-for="(item,index) in resMap">{
{ index }}{
{ item }}</h1>
</view>
</view>
</template>
<script>
export default {
data() {
return {
resMap:{
name:"蔡徐坤",
age:26,
sex:"男"
}
};
},
5. v-model (enlace de datos de formulario)
Ser capaz de vincular la entrada de datos por el componente (componente de formulario) a los datos
<template>
<view class="content">
<view class="myDiv1">
<h1>{
{ userData.name }} - {
{ userData.age }} - {
{ userData.context }}</h1>
<!-- 单行文本输入 -->
<label>单行文本</label>
<input type="text" placeholder="请输入姓名..." v-model="userData.name"/>
<hr/>
<!-- 多行文本输入 -->
<label>多行文本</label>
<textarea v-model="userData.context" />
<hr/>
<!-- 数字输入框 -->
<label>数字输入框</label>
<input type="number" placeholder="请输入年龄..." v-model="userData.age"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userData:{
name:null,
age:0,
context:null
}
};
},
8. Vue Oyente
Puede monitorear los cambios de datos en la página del componente, y cuando los datos cambien, se activará la función vinculada al oyente.
<template>
<view class="content">
<view class="myDiv1">
<h1>{
{ userData.name }}</h1>
<label>单行文本</label>
<input type="text" placeholder="请输入姓名..." v-model="userData.name"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:null,
userData:{
name:null
}
};
},
// 定义监听器组件
watch:{
// 监听普通数据
name:function(newValue,oldValue){
console.dir("新数据："+newValue);
console.dir("旧数据："+oldValue);
},
// (监听对象中的属性变化)监听userData对象中name数据的改变
"userData.name":function(newValue,oldValue){
console.dir("新数据："+newValue);
console.dir("旧数据："+oldValue);
}
},
9. Funciones
Encapsule algunos cálculos u operaciones comunes e implemente la ejecución del contenido de la función a través de eventos o llamadas activas, lo que puede reducir la escritura de código repetitivo.
<template>
<view class="content">
<view class="myDiv1">
<!-- 在插值表达式中调用函数,插值表达式如果调用方法需要定义返回值 -->
{
{ twoNumberSum(1,2) }}
<button @click="aa()" >测试</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:null,
userData:{
name:null
}
};
},
// 定义js函数的位置 - 两种触发方法：1.事件触发 @click="twoNumberMax(1,2)" 2.在vue组件中主动调用
methods: {
// 计算两个数值的最大值
twoNumberMax(number1,number2){
if(number1>number2){
console.dir(number1);
}else{
// 进入else调用aa方法
this.aa(); // 调用组件中别的方法要使用this.方法名(实参列表)
}
},
aa(){
let sumData = this.twoNumberSum(5,8);
console.dir(sumData);
},
// 计算两个数之和，计算结果返回给调用处
twoNumberSum(arg1,arg2){
var sumData = arg1+arg2;
if(sumData>100){
return "大于100";
}else{
return "小于等于100";
}
// return 语句要在执行逻辑的最后一步编写
},
//
}
};
</script>
<style></style>
marco de interfaz de usuario
Marco de interfaz de usuario del lado web relacionado con el marco Vue
(1) ElementUI
https://element.eleme.cn/#/zh-CN
es adecuado para el marco del lado web
(2) Ant Design para Vue
https://www.antdv.com/components/anchor
Marco de interfaz de usuario del lado web relacionado con el marco Html
(1)Layui
https://www.layuiweb.com/
(2)Bootstarp
https://www.bootcss.com/
Marco de interfaz de usuario móvil relacionado con el marco uni-app
(1) Marco uView
https://www.uviewui.com/
uni-app integra el marco uViewUI
1. Crea un proyecto vacío uniapp
2. Descargue la biblioteca de clases uView del mercado de componentes
hbuilderX debe asegurarse de que se haya instalado la compilación SCSS
3. Introducir el componente uView en el proyecto
Importe la biblioteca de componentes de uView en main.js
// 导入uView组件
import uView from '@/uni_modules/uview-ui';
Vue.use(uView);
importar tema.scss en uni.scss
/* 导入uView样式库-主题库 */
@import '@/uni_modules/uview-ui/theme.scss'
Introduzca el estilo en la primera línea de la etiqueta de estilo de App.vue
<style lang="scss">
/*每个页面公共css */
/* uView组件库样式 */
@import '@/uni_modules/uview-ui/index.scss'
</style>
Importación automática de componentes, page.json
Recordatorio:
para depurar el rendimiento de uni-app, la modificación de las reglas de easycom no tendrá efecto en tiempo real. Después de la configuración, debe reiniciar HX o volver a compilar el proyecto para usar la función uView normalmente.
Asegúrese de tener solo un campo de easycom en su archivo pages.json; de lo contrario, combine varias reglas de importación usted mismo.
Si importa uView a través de uni_modules, puede ignorar esta configuración
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {
}
}