Descarga de WeApp Workflow - Descarga del código fuente WeApp Workflow

WeApp Workflow

Código Fuente de IA

1.0.0

Descargar

WeApp-Workflow: flujo de trabajo de desarrollo front-end del subprograma WeChat basado en Gulp

introducir

WeApp-Workflow es un flujo de trabajo de desarrollo front-end especialmente creado para el desarrollo de mini programas WeChat. Está desarrollado en base a Gulp 4 y tiene como objetivo resolver los puntos débiles de escribir código front-end en el proceso de desarrollo de mini programas WeChat a través del flujo de trabajo. .

Página de inicio del proyecto: https://github.com/Jeff2Ma/WeApp-Workflow

Introducción del artículo: https://devework.com/weapp-workflow.html

Función

Compilación SCSS en tiempo real a WXSS

Utilice el preprocesador Sass para que la escritura CSS sea más fluida. El archivo .scss se compilará en tiempo real en un archivo .wxss compatible con el subprograma WeChat.

Convierta la unidad px a rpx en un mini programa en WXSS (CSS)

Usando el iPhone 6 recomendado oficialmente como formato de diseño estándar, puede convertirlo automáticamente a rpx escribiendo px directamente durante el desarrollo.

// Input: src/pages/index/index.scss
. index__header {
	font-size : 14 px ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

// Output: dist/pages/index/index.wxss
. index__header {
	font-size : 28 rpx ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

Compresión de imágenes

Comprima imágenes en tiempo real y utilice métodos incrementales para evitar la compresión repetida.

Cargue imágenes automáticamente en CDN y actualice la ruta a la ruta absoluta https

El subprograma no admite referencias de imágenes con rutas relativas, sino sólo rutas absolutas con encabezados de protocolo https . Este flujo de trabajo puede cargar las imágenes de ruta relativa a las que se hace referencia en archivos WXML y WXSS a la CDN de almacenamiento en la nube o cargarlas al espacio del servidor personal a través del protocolo FTP/SFTP. Actualmente es compatible con Tencent Cloud y Qiniu Cloud.

// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >

// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >

Archivos de fuentes convertidos a codificación base64

El subprograma no admite archivos de fuentes con rutas relativas. Este flujo de trabajo puede transcodificar los archivos de fuentes a los que se hace referencia en CSS a base64 y reemplazar las rutas originales.

 // Input: src/pages/index/index.scss
@font-face {
  font-family: 'fontello';
  src: url("assets/fonts/fontello.ttf") format('truetype');
}

// Output: dist/pages/index/index.wxss
@font-face {
  font-family: 'fontello';
  src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}

Cree imágenes de sprites de forma totalmente automática y genere el CSS correspondiente

Esta característica está impulsada por el complemento postcss-lazysprite. Después de preparar la imagen durante el desarrollo, simplemente escriba un código como @lazysprite "xxxx" para crear automáticamente la imagen del sprite y generar el CSS correspondiente.

// Input: src/app.scss
@lazysprite "filetype" ;

/ / Output : d is t / app. wxss
. icon-filetype-doc {
    background-image : url(.. / sprites/filetype.png);
    background-position : 0 0 ;
    width : 80 px ;
    height : 80 px ;
}

. icon-filetype-pdf {
    background-image : url(.. / sprites/filetype.png);
    background-position : -90 px 0 ;
    width : 80 px ;
    height : 80 px ;
}

@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
    . icon-filetype-doc {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : 0 0 ;
        background-size : 170 px 170 px ;
    }

    . icon-filetype-pdf {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : -90 px 0 ;
        background-size : 170 px 170 px ;
    }
}

Reflejos

trago4

Utilice las nuevas funciones de la última versión de Gulp 4 para acelerar su flujo de trabajo.

Conciso pero no simple

El núcleo tiene solo una tarea predeterminada. El mecanismo razonable de coincidencia de tareas reduce los procesos engorrosos y el funcionamiento de ida y vuelta del terminal, lo que hace que el desarrollo sea más conveniente.

Mecanismo de actualización incremental, se ejecuta más rápido

Presentamos la compilación incremental de Sass y el mecanismo de actualización incremental de tareas relacionadas con imágenes para que el flujo de trabajo se ejecute más rápido.

Estructura del proyecto

 .
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── assets // 开发相关的静态文件原始资源
│   │   ├── fonts //字体文件
│   │   ├── images // 图片文件，可被上传到CDN
│   │   ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│   │   └── sprites // 生成雪碧图小图的目录
│   ├── image // 小程序专用的图片资源（如tabbar icon）目录
│   ├── pages
│   └── utils
├── tmp //  通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录

empezar

Se recomienda que la versión de Node sea v4 o superior. Debido a que este flujo de trabajo implica dependencias de terceros, se recomienda operar en un entorno científico de Internet.

Instalar

0. Primero siga Gulp-cli a nivel mundial.

 npm install gulp-cli -g

1. Descargue el archivo del proyecto a través de git clone .

 git clone https://github.com/Jeff2Ma/WeApp-Workflow

2. Se recomienda eliminar el directorio .git (los usuarios de Windows deben eliminarlo manualmente)

 cd WeApp-Workflow
rm -rf .git

3. Instale los módulos necesarios

 npm i

4. Iniciar el desarrollo

Se recomienda copiar config.js y cambiarle el nombre a config.custom.js , y luego reescribir la información de configuración relevante de acuerdo con sus necesidades reales (cada elemento de configuración tiene un comentario). A continuación, ejecute el siguiente comando en la terminal para habilitarlo:

 gulp

término

Tareas restantes: gulp clean : borrar carpetas dist , tmp .

Configuración

Después de completar las operaciones anteriores, debe realizar la configuración relevante en las "Herramientas de desarrollo web de WeChat" (basadas en v1.x y ya no son compatibles con v0.x).

1. Cree un nuevo proyecto y seleccione directamente todo el directorio del proyecto, es decir, el directorio donde se encuentra project.config.json , como directorio del proyecto.

Configuración del flujo de trabajo de WeApp

desarrollar

A continuación, puede ingresar al desarrollo regular. Durante el proceso de desarrollo, utilice un editor de terceros (WebStorm, Sublime Text, etc.) para editar los archivos en el directorio src . Después de guardar las modificaciones, el proceso gulp los compilará en tiempo real en la ubicación correspondiente dist directorio. La herramienta de desarrollo web WeChat se compilará y actualizará automáticamente y en este momento solo sirve como función de vista previa .

Puntos clave del desarrollo:

Desarrollo SCSS : edite page-name.scss directamente en src/pages/page-name , se convertirá automáticamente en page-name.wxss y se colocará en la ubicación correspondiente del directorio dist . Durante el proceso de desarrollo, donde están involucrados valores numéricos, escriba directamente unidades px (de acuerdo con el iPhone6 como borrador de diseño estándar), y se calculará y convertirá automáticamente en unidades rpx . Si no desea realizar la conversión en circunstancias especiales, escriba PX en letras mayúsculas.
Desarrollo WXML : No hay requisitos especiales excepto que la función de imagen CDN requiere que se escriba una ruta de imagen especial.
WebFont : Primero cree una imagen de sprite en un sitio web como fontell.com y luego obtenga el archivo en formato ttf en src/assets/fonts . Luego se puede transcodificar automáticamente en base64 citándolo de la manera normal.
Imágenes CDN : (Esta función está desactivada de forma predeterminada y debe activarse en la configuración). wxss o wxml en el subprograma WeChat no admite imágenes con rutas relativas y requiere una ruta absoluta que comience con https. Este flujo de trabajo le permite escribir rutas relativas directamente durante el desarrollo, y el flujo de trabajo ayudará a cargar en CDN y reemplazar la ruta original. Dichas imágenes deben colocarse en src/assets/images y luego escribir la ruta en wxml o CSS usando %ASSETS_IMG%/filename.png . %ASSETS_IMG% es un directorio personalizado para el reemplazo posterior de cadenas.
Imágenes de sprites : en primer lugar, no se recomienda utilizar imágenes de sprites en programas pequeños. Es mejor utilizar imágenes individuales o WebFont directamente. Si debe usarlo, siga el ejemplo del programa pequeño en el código para colocar el directorio de imágenes pequeñas en src/assets/sprites y luego llámelo a través de @lazysprite "xxxx" en SCSS (se recomienda colocar el código de llamada en app.scss ). Para el uso avanzado de imágenes de sprites, haga clic aquí.

Preguntas y respuestas

P: ¿Por qué no hay ninguna función AutoPrefixer en el flujo de trabajo?
R: Porque la opción "Finalización de estilo" en el "Proyecto" de WeChat Developer Tools ya proporciona esta función;
P: ¿Por qué no hay una función de conversión de ES6 a ES5 de Babel configurada en el flujo de trabajo?
R: Como se indicó anteriormente, se proporcionan herramientas para desarrolladores de WeChat.
P: ¿Cuáles son las ventajas en comparación con los marcos de desarrollo de programas pequeños como WePY?
R: WePY desarrollado por el equipo de pagos de WeChat es de hecho una buena herramienta. Si se compara con WePY en el mismo nivel, WeApp-Workflow no tiene ninguna ventaja. WeApp-Workflow es una herramienta de flujo de trabajo, no un marco de desarrollo. Se centra en el desarrollo de CSS en programas pequeños. Para algunos desarrolladores, sus programas pequeños no necesitan un marco de desarrollo tan pesado como WePY.
P: ¿WeApp-Workflow no tiene tareas de compilación especiales correspondientes (similares a gulp build , npm run build )?
R: Sí, porque WeApp-Workflow es adecuado para desarrollar programas pequeños "pequeños" en lugar de programas pequeños complejos. Por lo tanto, considerando la velocidad de desarrollo, la cantidad de código, etc., no existe una etapa de desarrollo especial y una tarea (desarrollo). Se agrega una tarea de compilación adicional (buid) durante la fase de finalización. Sólo una tarea.