Introducción a uni-app (1) Introducción, implementación y estructura de directorios de uni-app

Prefacio

Este artículo presenta principalmente la situación básica de uni-app y guías para crear y ejecutar rápidamente el primer proyecto de uni-app. Al mismo tiempo, se explican en detalle la estructura del directorio y las especificaciones del código del proyecto, lo cual es adecuado para principiantes con uni-app de base cero.

Una introducción a la uni-aplicación

uni-app es un producto importante lanzado oficialmente por DCloud . Es un marco de interfaz para el desarrollo de aplicaciones multiplataforma usando Vue.js. El sitio web oficial es http://uniapp.dcloud.io/ .
Al escribir un conjunto de código Vue.js, los desarrolladores pueden usar uni-app para compilarlo en múltiples plataformas como iOS, Android, subprogramas WeChat, etc. , para asegurarse de que se ejecute correctamente y logre una experiencia excelente, y solo requiere JS para completar el desarrollo de la APLICACIÓN. , Para lograr el efecto de compartir múltiples terminales , reduciendo en gran medida los costos de desarrollo y aprendizaje: los
desarrolladores no necesitan aprender tantas tecnologías de desarrollo de plataformas, investiguen muchos marcos de front-end, es suficiente aprender uni-app basado en vue; las
empresas también pueden cubrir con costos más bajos Más usuarios.
uni-app hereda Vue.js y proporciona una experiencia de desarrollo completa de Vue.js. Como herramienta de desarrollo eficiente, uni-app también proporciona la forma más rápida de comenzar con el WeChat actual y otros programas pequeños. Las especificaciones de sus componentes y la API extendida y los pequeños programas de WeChat básicamente lo mismo.
Los desarrolladores con una cierta cantidad de experiencia en el desarrollo de subprogramas de Vue.js y WeChat pueden comenzar rápidamente con uni-app y desarrollar aplicaciones compatibles con varios extremos, que pueden ser compatibles con Android, iOS, subprogramas y otros desarrollos de varios extremos al mismo tiempo. Al mismo tiempo, proporciona una optimización de compilación condicional, que puede ser elegante Escriba código personalizado para una determinada plataforma y llame a capacidades propietarias sin afectar a otras plataformas.
Uni-app todavía usa el motor 5+ cuando está empaquetado en la App. Todas las capacidades de 5+ pueden usarse en la uni-app. El rendimiento de ejecución en el lado de la App es básicamente el mismo que el del subprograma WeChat.
Con el fin de facilitar a los desarrolladores la experiencia de los componentes, interfaces y plantillas de uni-app, DCloud lanzó el programa de demostración Hello uni-app, con un conjunto de códigos que se pueden publicar en applets de iOS, Android y WeChat al mismo tiempo. Puede usar su teléfono móvil para escanear la aplicación a continuación. Descargue el paquete de instalación nativo para iOS y Android usando el código. También puede usar WeChat para escanear el código del mini programa y experimentar la versión del mini programa de uni-app:

2. Inicie el primer proyecto rápidamente

1. Construye el medio ambiente

Antes de comenzar el proyecto, debe descargar e instalar las siguientes herramientas:

• HBuilderX tiene un
  compilador uni-app integrado y una plantilla de proyecto, puede hacer clic en https://www.dcloud.io/hbuilderx.html para seleccionar y descargar la última versión del sistema correspondiente, sin instalación, descomprimir directamente y colocar el directorio descomprimido en el directorio especificado. Haga clic en HBuilderX.exe debajo de la ruta a utilizar.
• Las herramientas de desarrollo de WeChat
  se utilizan para compilar y depurar pequeños programas, haga clic en https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html y seleccione la última versión para descargar e instalar.

2. Crea y ejecuta el proyecto

Puede crear un proyecto 点击工具栏里的文件- 新建->项目e 选择uni-appingresar el nombre del proyecto. Por ejemplo hello uniapp, haga clic en Crear para crear correctamente una uni-aplicación, o haga clic en Crear desde plantilla y seleccione hello-uniapp para experimentar el ejemplo oficial.
El esquema es el siguiente:

Después de la creación, puede ejecutar y depurar, puede elegir navegador, teléfono móvil o simulador y simulador de applet y otros modos de ejecución.
(1) Ejecutar
en modo de programa pequeño. Ingrese al proyecto hello uniapp, haga clic en la barra 运行->运行到小程序模拟器->微信开发者工具de herramientas para compilar el proyecto y experimente uni-app en la herramienta de desarrollo WeChat. Uni-app compila el proyecto en el directorio de desempaquetado del directorio raíz de forma predeterminada .
El esquema es el siguiente:

Se puede ver que después de seleccionar la herramienta de desarrollo de WeChat para compilar y ejecutar en HBuilderX, el simulador de la herramienta de desarrollo de WeChat se llama automáticamente para su visualización y funcionamiento.

Nota: Para
el primer uso, debe configurar la ruta de instalación de las herramientas de desarrollo de WeChat para que se ejecuten correctamente. Al mismo tiempo, debe abrir el puerto de servicio en la configuración de seguridad de la opción de configuración en las herramientas de desarrollo de WeChat, para que HBuilderX pueda llamar a las herramientas de desarrollo de WeChat. como sigue:

Si HBuilderX no puede iniciar la herramienta de desarrollo de WeChat normalmente, el desarrollador debe iniciarla manualmente y luego copiar la ruta del proyecto de uni-aplicación a la herramienta de desarrollo de WeChat, desarrollar en HBuilderX y usted puede ver el tiempo real en la herramienta de desarrollo de WeChat. Efecto de simulación.

(2) Operación de la máquina real
Conecte el teléfono móvil y abra la depuración USB, ingrese al proyecto hello uniapp, haga clic en la barra de herramientas 运行 -> 真机运行 -> 选择运行的设备, puede experimentar la uni-app en el dispositivo, como se muestra a continuación: la

interfaz del teléfono móvil es la siguiente:

Nota: Para
ejecutar en una máquina real, necesita configurar la visualización de la aplicación. Después de iniciar sesión en hbuilderX, haga clic en la nube para obtenerla.

Al depurar y ejecutar, también puede hacer clic directamente en el botón de acceso directo para seleccionar el dispositivo a ejecutar, de la siguiente manera:

Tres, estructura de directorios uni-app y especificaciones de código

1. Estructura de directorio

Como puede ver en el proyecto que acaba de crear, la estructura típica de un proyecto de uni-aplicación es aproximadamente la siguiente:

C:.
│  App.vue
│  main.js
│  manifest.json
│  pages.json
│  project.config.json
│  uni.scss
│
├─pages
│  └─index
│          index.vue
│
├─static
│      logo.png
│
└─unpackage

Entre ellos:
project.config.json es el archivo de configuración global del proyecto, que configura parámetros centrales como el ID de la APLICACIÓN
;
main.js es el archivo de entrada de inicialización de Vue; App.vue es la configuración de la aplicación, que se utiliza para configurar el estilo global de la aplicación y monitorear el ciclo de vida de la aplicación;
manifiesto .json se utiliza para configurar la información de empaquetado, como el nombre de la aplicación, appid, logotipo, versión, etc., de la siguiente manera:

pages.json se utiliza para configurar información de tipo de página, como enrutamiento de página, barras de navegación y pestañas, y se define en forma de objetos;
el directorio estático almacena archivos de recursos estáticos para cumplir con los requisitos de tamaño del proyecto, como programas pequeños y optimizar la estructura del proyecto; el
desempaquetado es un proyecto compilado El paquete generado en ese momento.

2. Especificación SFC

Las vistas de página y otros archivos que desarrollamos generalmente se encuentran en el directorio de páginas. Al mismo tiempo, para programas pequeños, una página generalmente incluye 4 archivos, a saber, page.wxss (archivo de estilo), page.js, page.json (archivo de configuración) y page.wxml (componente DOM), pero no hay tantos archivos en uni-app. Para darse cuenta de la compatibilidad entre terminales de los applets de WeChat y las aplicaciones nativas, teniendo en cuenta factores como la velocidad de compilación y el rendimiento de ejecución, uni-app desarrolla páginas. La especificación estipula que la especificación Vue Single File Component (SFC) : un
.vuearchivo es un tipo de archivo personalizado que usa una sintaxis similar a HTML para describir un componente Vue. Cada .vuearchivo contiene tres tipos de bloques de lenguaje de nivel superior <template>(que definen la capa de plantilla), <script>(Capa JS) y <style>(capa de estilo), también permiten agregar bloques personalizados opcionales, los ejemplos son los siguientes:

<template>
  <div class="example">{
   
   { msg }}</div>
</template>

<script>
export default {
     
     
  data () {
     
     
    return {
     
     
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
     
     
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

vue-loader analizará automáticamente el archivo y extraerá cada bloque de idioma, si es necesario, será procesado por otro cargador y finalmente ensamblado en un Módulo ES , su exportación predeterminada es un objeto de las opciones del componente Vue.js. vue-loader admite el uso de lenguajes no predeterminados, como el preprocesador CSS, el lenguaje de plantilla HTML precompilado y el atributo lang al establecer el bloque de idioma.
Por ejemplo, podemos escribir estilos usando la sintaxis de Sass de la siguiente manera:

<style>
  /* write Sass! */
</style>

El bloque de idioma de nivel superior del componente Vue es el siguiente:

• Plantilla
  Cada .vuearchivo contiene como máximo un <template>bloque, el contenido se extrae y se pasa a vue-template-compileruna cadena preprocesada en una función de tinte de JavaScript y finalmente se inyecta en el <script>componente exportado.
• Script
  Cada .vuearchivo contiene como máximo un <script>bloque y este script se ejecutará como un módulo ES . Su exportación predeterminada es un Vue.jsobjeto de opción de componente y también puede exportar Vue.extend()un objeto extendido creado por él, pero un objeto normal es una mejor opción.
  Cualquier .jsregla de paquete web que coincida con el archivo (o la extensión especificada por su característica de idioma) se aplicará al <script>contenido de este bloque.
• El estilo
  coincide /\.css$/de forma predeterminada y un .vuearchivo puede contener varias <style>etiquetas. <style>Las etiquetas pueden tener atributos de módulo o ámbito para encapsular mejor el estilo en el componente actual. Se <style>pueden mezclar varias etiquetas con diferentes modos de encapsulación en el mismo componente. Cualquier .cssregla de paquete web que coincida con el archivo (o la extensión especificada por su característica de idioma) se aplicará al <style>contenido de este bloque.
• Bloques personalizados
  Puede .vueagregar bloques personalizados adicionales al archivo para satisfacer las necesidades específicas del proyecto, como <docs>bloques. vue-loader usará el nombre de la etiqueta para encontrar el cargador de paquetes web correspondiente para aplicar al bloque correspondiente. El cargador de paquetes web debe especificarse en las cargas de opciones de vue-loader .

Si necesita separar el archivo .vue en varios archivos, puede importar un archivo externo a través del atributo src y usar las etiquetas correspondientes para diferentes bloques de idioma, de la siguiente manera:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Nota: La
importación src sigue las mismas reglas de resolución de ruta que la solicitud del módulo de paquete web, por lo que la ruta relativa debe ./comenzar con.
Puede importar recursos de dependencias de NPM de la siguiente manera:

<style src="todomvc-app-css/index.css">

La importación de src también se admite en bloques personalizados, de la siguiente manera:

<unit-test src="./unit-test.js">
</unit-test>

La especificación del documento está cerca de la especificación Vue Single File Component (SFC) , la misma interfaz se completa con 3 bloques de idioma; para obtener más detalles, consulte https://vue-loader.vuejs.org/zh/spec.html ; la
etiqueta del componente está cerca de la especificación del subprograma WeChat , Incluyendo formularios, vistas, botones, etc. Al mismo tiempo, no puede usar etiquetas HTML estándar, ni puede usar js para operar dom. Para obtener más información, consulte el documento http://uniapp.dcloud.io/component/README ; las
capacidades de interfaz (API JS) están cerca La especificación del subprograma WeChat , pero el prefijo wx debe reemplazarse por uni. Para obtener más información, consulte http://uniapp.dcloud.io/api/README ;
el enlace de datos y el manejo de eventos están cerca de la especificación Vue.js , y la aplicación y la página Ciclo de vida:
debido a que se recomienda el diseño flexible para programas pequeños, y flex es más flexible y controlable que el modelo de caja tradicional. Para ser compatible con la operación de múltiples terminales, se recomienda utilizar el diseño flexible para el desarrollo. Consulte https: // css-tricks. com / snippets / css / a-guide-to-flexbox / y http://www.hcoder.net/tutorials/info_183.html .

para resumir

Como marco que utiliza Vue.js para desarrollar todas las aplicaciones de front-end, uni-app proporciona a los desarrolladores una gran comodidad y reduce los costos de aprendizaje y desarrollo. La diversidad de plataformas actual es cada vez más abundante y las necesidades de desarrollo se vuelven cada vez más complejas. Dadas las circunstancias, cada vez más favorecido por los desarrolladores.