Fonctionnalités
Grâce au framework Labrador, les outils de développement WeChat peuvent prendre en charge le chargement massif de packages NPM
Prend en charge le code standard ES6/7 et utilise async/await pour éviter efficacement l'enfer des rappels
Réutilisation des composants, le cadre de l'applet WeChat est réencapsulé, réalisant la réutilisation et l'imbrication des composants
Tests automatisés, il est très facile d'écrire des scripts de tests unitaires et les tests automatisés peuvent être effectués sans aucune configuration supplémentaire
Utilisez Editor Config et ESLint pour standardiser le style de code afin de faciliter la collaboration en équipe
Installation
Installez d'abord Node.js et npm v3 sur votre système, et téléchargez Node.js. puis exécutez la commande suivante. La commande installera l'outil de ligne de commande Labrador globalement.
npm install -g labrador-cli
Initialiser le projet
mkdir demo # 新建目录 cd demo # 跳转目录 npm init # 初始化npm包 labrador init # 初始化labrador项目
Structure du répertoire du projet
demo # 项目根目录├── .labrador # Labrador项目配置文件├── .babelrc # babel配置文件├── .editorconfig # Editor Config├── .eslintignore # ESLint 忽略配置├── .eslintrc # ESLint 语法检查配置├── package.json ├── dist/ # 目标目录├── node_modules/ └── src/ # 源码目录 ├── app.js ├── app.json ├── app.less ├── components/ # 通用组件目录 ├── pages/ # 页面目录 └── utils/
Remarque : tous les fichiers du répertoire dist sont compilés et générés par la commande labrador, veuillez ne pas les modifier directement
Configurer les outils de développement
Une fois le projet initialisé, utilisez votre IDE préféré tel que WebStorm ou Sublime pour ouvrir le répertoire racine du projet. Ensuite, ouvrez l'outil de développement Web WeChat pour créer un nouveau projet et sélectionnez le répertoire cible dist pour le répertoire de développement local.
Processus de développement
Modifiez le code source dans le répertoire src dans un IDE tel que WebStorm ou Sublime, puis exécutez la commande labrador build dans le répertoire racine du projet pour construire le projet, puis déboguer dans l'outil de développement Web WeChat, cliquez sur le bouton Redémarrer dans le menu de gauche de l'interface pour voir l'effet.
Au cours de notre développement, les outils de développement Web WeChat ne sont utilisés que pour le débogage et la prévisualisation. Ne modifiez pas le code dans l'interface d'édition des outils de développement Web WeChat.
Les outils de développement Web WeChat feront occasionnellement des erreurs, qui se manifesteront par une absence de réponse lorsque vous cliquerez sur le bouton Redémarrer, la console de débogage génère un grand nombre d'erreurs qui ne peuvent pas nécessiter de fichiers et les fichiers de code ne sont pas affichés dans le interface d'édition. En effet, la commande labrador build mettra à jour l'intégralité du répertoire dist et l'outil de développement Web WeChat rencontrera des exceptions lors de la surveillance des modifications de code. Dans ce cas, il vous suffit de fermer l'outil de développement Web WeChat et de le redémarrer.
Nous pouvons également utiliser la commande labrador watch pour surveiller le code dans le répertoire src et le construire automatiquement lorsque des modifications se produisent. Il n'est pas nécessaire d'exécuter manuellement labrador build à chaque fois après avoir modifié le code.
Donc, la meilleure posture est :
Exécutez labrador watch dans le projet
Codez dans WebStorm, enregistrez
Passer aux outils de développement Web WeChat Déboguer et prévisualiser dans WebStorm
puis revenez au codage dans WebStorm
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!