wxapp boilerplate Télécharger - wxapp boilerplate Téléchargement du code source

wxapp boilerplate

Code Source AI

1.0.0

Télécharger

wxapp-passe-partout

Échafaudage de projet de mini-programme WeChat/Alipay développé à l'aide de webpack , babel , scss

Fonction

Prend en charge le référencement des modules node_modules
Prise en charge de la configuration de alias pour éviter les références de module telles que ../../../
Prise en charge d'une compatibilité ES6 plus riche via babel , y compris async/await
promise et lodash intégrés ( lodash introduit les modules correspondants à la demande, pas tous)
Utilisez scss pour écrire des fichiers .wxss , avec quelques mixins et extends utiles intégrés
Fournir les constantes globales __DEV__ et process.env.NODE_ENV pour faciliter le développement
Prend en charge la compilation automatique dans les applets WeChat et Alipay
Fournissez les constantes globales __WECHAT__ et __ALIPAY__ pour déterminer s'il s'agit d'une applet WeChat ou d'une applet Alipay
Créez rapidement des pages d'applet WeChat via la ligne de commande
Prise en charge de la compression du code dans l'environnement production

Commencer

Assurez-vous que Node.js (>= v4.2 ) et Yarn ou NPM sont installés

git clone ce projet
Utilisez l'outil de ligne de commande cd à ce répertoire et exécutez yarn pour installer les modules dépendants.
Exécuter yarn start pour commencer le développement
Grâce aux outils de développement WeChat, ajoutez dist/wechat au projet

Commandes intégrées

yarn start démarre webpack pour développer des projets d'applets WeChat, qui peuvent surveiller les modifications de fichiers et recompiler automatiquement
yarn start:alipay démarre webpack pour développer le projet d'applet Alipay, qui peut surveiller les modifications de fichiers et recompiler automatiquement
yarn build compile et génère le code pour production vers dist/wechat et dist/alipay
yarn lint:build exécute la commande yarn build et utilise eslint et stylelint pour vérifier les spécifications du code
yarn prettier exécute prettier pour formater le code dans le répertoire src
yarn create-page crée rapidement une page d'applet WeChat (pour plus d'utilisation de create-page , veuillez consulter create-wxapp-page)

Compatible avec les mini-programmes WeChat et Alipay

Les développeurs peuvent choisir un ensemble de codes sources pour développer des applets WeChat et Alipay. Cet échafaudage prend en charge la compilation automatique wxml en axml , la conversion de wx:attr en a:attr , la conversion d'API wx en my , et vice versa. Cependant, les interfaces individuelles sont légèrement différentes sur la plate-forme et les développeurs peuvent les gérer de manière dynamique via __WECHAT__ ou __ALIPAY__ .

Copie de fichier

Si wxml ou axml a des fichiers importés dynamiquement (tels que src="{{'images/' + type + '.png'}}" ), webpack ne pourra pas les importer dynamiquement, il se peut donc qu'il manque des fichiers après l'empaquetage. .

Si vous rencontrez cette situation, vous pouvez la résoudre via copy-webpack-plugin et copier l'intégralité du répertoire images dans dist .

Ce plugin a déjà ce plug-in intégré à cet échafaudage. Pour plus de facilité d'utilisation, vous pouvez également ajouter un tableau de chaînes copyWebpack à package.json pour copier automatiquement des répertoires ou des fichiers. Par exemple:

package.json

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

En exécutant yarn start ou yarn build , les répertoires src/images et src/icons seront automatiquement copiés dans dist/wechat/images et dist/wechat/icons (il en va de même pour l'applet Alipay).