Andamio de proyecto de miniprograma WeChat/Alipay desarrollado utilizando webpack
, babel
, scss
node_modules
alias
para evitar referencias a módulos como ../../../
ES6
a través de babel
, incluido async/await
promise
y lodash
integrados ( lodash
introduce los módulos correspondientes a pedido, no todos)scss
para escribir archivos .wxss
, con algunos mixins
y extends
útiles integrados__DEV__
y process.env.NODE_ENV
para ayudar al desarrollo.__WECHAT__
y __ALIPAY__
para determinar si es un subprograma WeChat o un subprograma Alipayproduction
. Asegúrese de tener Node.js (>= v4.2
) y Yarn o npm instalados
git clone
este proyectocd
a este directorio y ejecutar yarn
para instalar los módulos dependientes.yarn start
para iniciar el desarrollo.dist/wechat
al proyecto yarn start
inicia webpack
para desarrollar proyectos de subprogramas WeChat, que pueden monitorear los cambios de archivos y recompilarlos automáticamente.yarn start:alipay
inicia webpack
para desarrollar el proyecto del subprograma Alipay, que puede monitorear los cambios de archivos y recompilarlos automáticamenteyarn build
compila y genera el código para production
para dist/wechat
y dist/alipay
yarn lint:build
ejecuta el comando yarn build
y usa eslint y stylelint para verificar las especificaciones del código.yarn prettier
ejecuta prettier
para formatear el código en el directorio srcyarn create-page
crea rápidamente una página de subprograma WeChat (para obtener más uso de create-page
, consulte create-wxapp-page) Los desarrolladores pueden elegir un conjunto de códigos fuente para desarrollar subprogramas WeChat y Alipay. Este andamio admite la compilación automática wxml
a axml
, la conversión de wx:attr
a a:attr
, la conversión de API wx
a my
y viceversa. Sin embargo, las interfaces individuales son ligeramente diferentes en la plataforma y los desarrolladores pueden manejarlas dinámicamente a través de __WECHAT__
o __ALIPAY__
.
Si wxml
o axml
han importado archivos dinámicamente (como src="{{'images/' + type + '.png'}}"
), webpack no podrá importarlos dinámicamente, por lo que es posible que falten archivos después del empaquetado. .
Si se encuentra con esta situación, puede resolverla mediante copy-webpack-plugin y copiar todo el directorio images
a dist
.
Este complemento ya tiene este complemento integrado en este andamio. Para facilitar su uso, también puede agregar una matriz de cadenas copyWebpack
a package.json
para copiar directorios o archivos automáticamente. Por ejemplo:
paquete.json
{
// ...
"copyWebpack" : [ "images" , "icons" ]
}
Al ejecutar yarn start
o yarn build
, los directorios src/images
y src/icons
se copiarán automáticamente a dist/wechat/images
y dist/wechat/icons
(lo mismo se aplica al subprograma Alipay).
Registro de cambios
MIT