Download wxapp boilerplate - download do código-fonte wxapp boilerplate

wxapp boilerplate

Código-Fonte de IA

1.0.0

Baixar

padrão wxapp

Andaime de projeto de miniprograma WeChat/Alipay desenvolvido usando webpack , babel , scss

Função

Suporta referência a módulos node_modules
Suporte à configuração de alias para evitar referências de módulo como ../../../
Suporta compatibilidade ES6 mais rica por meio de babel , incluindo async/await
promise e lodash integrados ( lodash apresenta módulos correspondentes sob demanda, não todos)
Use scss para escrever arquivos .wxss , com alguns mixins úteis e extends integradas
Fornece constantes globais __DEV__ e process.env.NODE_ENV para auxiliar no desenvolvimento
Suporta compilação automática em miniaplicativos WeChat e Alipay
Forneça constantes globais __WECHAT__ e __ALIPAY__ para determinar se é um miniaplicativo WeChat ou Alipay
Crie rapidamente páginas de miniaplicativos WeChat por meio da linha de comando
Suporte à compactação de código em ambiente production

Comece

Certifique-se de ter o Node.js (>= v4.2 ) e o yarn ou npm instalados

git clone este projeto
Use a ferramenta de linha de comando cd neste diretório e execute yarn para instalar os módulos dependentes.
Execute yarn start para iniciar o desenvolvimento
Por meio das ferramentas de desenvolvedor do WeChat, adicione dist/wechat ao projeto

Comandos integrados

yarn start inicia webpack para desenvolver projetos de miniaplicativos WeChat, que podem monitorar alterações de arquivos e recompilar automaticamente
yarn start:alipay inicia webpack para desenvolver o projeto do miniaplicativo Alipay, que pode monitorar alterações de arquivo e recompilar automaticamente
yarn build compila e gera o código para production para dist/wechat e dist/alipay
yarn lint:build executa o comando yarn build e usa eslint e stylelint para verificar as especificações do código
yarn prettier executa prettier para formatar o código no diretório src
yarn create-page cria rapidamente uma página de miniaplicativo WeChat (para mais uso de create-page , consulte create-wxapp-page)

Compatível com miniprogramas WeChat e Alipay

Os desenvolvedores podem escolher um conjunto de códigos-fonte para desenvolver miniaplicativos WeChat e Alipay. Este andaime suporta compilação automática wxml para axml , conversão de wx:attr para a:attr , conversão de API wx para my e vice-versa. No entanto, as interfaces individuais são ligeiramente diferentes na plataforma e os desenvolvedores podem lidar com elas dinamicamente por meio de __WECHAT__ ou __ALIPAY__ .

Cópia de arquivo

Se wxml ou axml tiver arquivos importados dinamicamente (como src="{{'images/' + type + '.png'}}" ), o webpack não será capaz de importá-los dinamicamente, portanto, pode haver arquivos ausentes após o empacotamento .

Se você encontrar essa situação, poderá resolvê-la por meio de copy-webpack-plugin e copiar todo o diretório images para dist .

Este plugin já possui este plug-in integrado neste andaime. Para facilitar o uso, você também pode adicionar uma matriz de string copyWebpack ao package.json para copiar diretórios ou arquivos automaticamente. Por exemplo:

pacote.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

Ao executar yarn start ou yarn build , os diretórios src/images e src/icons serão automaticamente copiados para dist/wechat/images e dist/wechat/icons (o mesmo se aplica ao miniaplicativo Alipay).