El resumen de conocimiento más completo de uniapp

Introducción a la aplicación uni

uni-appEl marco de fusión multiterminal desarrollado por la empresa dcloud, un desarrollo y operación multiterminal es un uso.
Al usar Vue.js+ 小程序的apipara desarrollar el marco de todas las aplicaciones front-end, los desarrolladores escriben un conjunto de códigos para realizar un desarrollo híbrido de múltiples terminales: se
puede publicar en iOS, Android, Web (responsivo) y varios programas pequeños (WeChat/ Alipay/Baidu/ Toutiao/QQ/DingTalk/Taobao), aplicaciones rápidas y otras plataformas

Obtenga más información sobre el sitio web oficial de uni-app

herramienta de preparación

Antes de usar uni development, debe instalar:

• Hbuilderx (herramientas de desarrollo y compilación)
• Herramienta de desarrollo del miniprograma WeChat (prueba de vista previa del miniprograma WeChat)
• Emulador de Android/máquina real (hay muchos simuladores en el mercado)

Precauciones:

Para la primera ejecución de hbuilder, debe descargar el complemento correspondiente.
Ejecute el emulador de Android, hay una diferencia en la vista.
Puede tomar una cierta cantidad de tiempo para ejecutarse
. A veces necesita actualizar la página o volver -correr.

introducción a la interfaz uni-app

1. Crea un proyecto

2. Cómo ejecutar el proyecto en múltiples terminales

h52.1 Ejecutando en hbuilderx

Sugerencia: debe instalar el complemento
para la primera ejecución. Después de que el complemento se haya instalado correctamente, cierre la operación integrada y vuelva a abrirla.

2.2 Programa pequeño en ejecución

Sugerencia : debe configurarse para la primera ejecución y, luego, puede
ejecutarlo directamente
. 04 Ejecutar (puede ejecutar después de completar la configuración anterior)

01 Configuración en la herramienta de desarrollo WeChat - puerto del servidor

02 HBuilderx configura la dirección de las herramientas de desarrollo de WeChat

03 Ajustes de ejecución

03.1 Configurar la identificación del subprograma WeChat

04 correr

Casos de ejecución exitosa de applets

2.3 aplicación || Simulador en ejecución

Nota: Los diferentes simuladores tienen diferentes números de puerto:
Número de puerto del simulador Yeshen: 62001
Número de puerto del simulador Haima
: 26944 Número de puerto del simulador Xiaoyao: 21503
Número de puerto del simulador MuMu: 7555
Número de puerto del simulador Tiantian: 6555
Número de puerto del emulador de simulación Thunderbolt: 5554
Consejo:
La mayoría de las razones por las que la aplicación no se queda sin datos no están suficientemente escritas.La primera ejecución necesita configurar
el número de puerto del emulador.

01 Abra el emulador o teléfono móvil
02 Configure el puerto del emulador
03 Ejecute el emulador

01 Abre el emulador o teléfono móvil

02 Configurar el puerto del emulador


03 correr al emulador
03.1 El complemento debe descargarse para la primera ejecución

03.2 El complemento se instaló correctamente y comienza a ejecutarse

3. Sintaxis de Vue

3.1 Sintaxis de plantilla

3.1.1 Representación de texto

{
    
    {
    
    表达式}}
v-text=“表达式”

//简单的js运算
{
    
    {
    
    2+3}}

//js方法调用
{
    
    {
    
    title.length}}
{
    
    {
    
    title.split("").reverse().join("")}}

//3元运算符
<view>{
    
    {
    
    title.length>15?'长度很长':'字少事大'}}</view>

v-html 富文本

3.1.2 Representación condicional

v-if
v-else-if
v-else
v-show
三元运算符

3.1.3 Lista de opciones

1. Se pueden recorrer cadenas, números, listas y objetos
2. < ver v-for=“(elemento,índice) en la lista” ：key=“índice”>{ {índice+1}} { {elemento}} < /ver>
3. Asegúrese de asegurarse de que el valor clave entre elementos hermanos sea único

3.1.4 Vinculación de propiedad

<button v-bind:disabled=“true”>
<button :disabled="true"> 

3.1.5 Enlace de formulario

01 默认
:value="单向绑定"

02 input
v-model=“双向绑定”

03 
@change=“$event.detail.value”
事件，事件的值$event.detail.value

3.1.6 Eventos

01 Vinculación de eventos

<button v-on:click="响应"></button>
 简写绑定
<button @ click="响应"> </button>

02 Procesamiento en línea de eventos

<view @ click="num++">  </view>

03 Función de respuesta a eventos (función definida en métodos)

<view @ click="say">  </view>

04Paso de parámetro de evento

//$event 是一个固定写法  代表事件对象

不写参数
<view @ click="say">  </view>  
等同于 
<view @ click="say（）">  </view>  
等同于
<view @ click="say（$event)">  </view>

	say(str = "你好") {
    
    
       // 弹出提示
        uni.showModal({
    
    
         title: str
      })
                        }

3.1.7 página uni-aplicación

Configuración de la página pages.json:

• Estilo global globalStyle: el estilo de la página predeterminada aplicará el
  estilo global. Si la página tiene una configuración de estilo escrita, utilice la configuración para anular la configuración global.

• Página pages: pathruta de la página; styleestilo de la página

3.1.8 Opciones de vue

datos
métodos de datos método
computado cálculo
reloj seguimiento
directiva instrucción
filtro filtrado

3.1.9 Ciclo de vida de uni-app

subprograma de ciclo de vida vue

subprograma de ciclo de vida

método global

aplicación método global

3.1.10 Componentes

4. Enrutamiento

4.1 Componentes de enrutamiento

Documentación oficial de componentes de enrutamiento

Navegación (navegador)

<navigator url="../options/options" open-type="reLauch"></navigator>
//tip：文件名不能加后缀 .vue
//url 跳转的页面
//open-type打开类型：
//navigate跳转
//redirect重定向（当前页面不留历史纪录）；
//navigateBack  返回
//reLauch 重启
//switchTab  跳转底部栏

4.2 Parámetros de enrutamiento

gramática:

传递：
<navigator url="../options/options?count=5&title=life">选项</navigator>

接收：
onLoad(option) {
    
          
​    //option的值
    this.count = option.count
    uni.setNavigationBarTitle({
    
    
    title: option.title
                        })
                },

el caso

4.3 API de enrutamiento

4.3.1 Salto de enrutamiento

methods: {
    
    
  goOption() {
    
    
              uni.navigateTo({
    
    
               url: "../options/options"
                                })
                        },
}

4.3.2 Redirección

uni.redirect({
    
    
    url: "../options/options?count=100&title=来自js跳转"
                   })

4.3.3 Atrás

 uni.navigateBack({
    
     })

4.3.4 Cambio de barra inferior

 uni.switchTab({
    
     })

4.3.5 Reiniciar

 uni.reLunch({
    
     })

4.4 Configuración de enrutamiento

Documentación oficial de configuración de enrutamiento:

4.5 Obtener la página actual getApp

01 Definir globalData:{num:100}
la página que se utilizará en app.vue 02 Volver a la aplicación

var app=getApp（）

03 Obtener el valor de globalData

onShow(){
    
    
this.num=app.globalData.num
​}

04 Actualizar valor globalData

addNm(){
    
    
   app.globalData.num++;
​ this.num=app.globalData.num
​}

el caso

4.6 Obtener información de la pila de páginas getCurrentPages

5. Compilación condicional

Propósito de compilación condicional: diferentes plataformas muestran diferentes características y funciones

5.1 Plantilla de compilación condicional:

• APPlado de la aplicación
• H5Página web
• MPMini programa: MP-WEIXINWeChat Mini programa
  Sintaxis:

<!-- # ifdef H5 -->
H5：下载app 获取优惠卷
<!-- # endif -->

el caso

5.2 css compilación condicional

/* #ifdef APP */
     .active{
    
    color:red}
/* #endif */

compilación condicional 5.3 js

// #ifdef APP-PLUS
uni.showModal({
    
    
        title:"你好App用户"
})
// #endif

caso css+js

5.4 Página de configuración condicional pages.json

5.4.1 Configurar el estilo de la barra de navegación de la página

“style”:{
    
    
  "h5":{
    
    
      "titleNView":{
    
    
          "titleText":"我是H5"
       }
  },
  "app-plus": {
    
    
      "titleNView":false //隐藏导航栏
  }
}

el caso

5.4.2 Configurar la ruta de la página de visualización

        // #ifdef MP-WEIXIN	|| APP	
{
    
    
        "path":"pages/condition/we",
        "style":{
    
    
                "navigationBarTitleText": "小程序专有页面"
        }
},
// #endif

el caso

fin...