Développement d'applets WeChat : workflow construit sur Gulp

Actuellement, lors du développement de mini-programmes WeChat, il existe environ quatre solutions techniques disponibles, qui sont : le développement natif de mini-programmes WeChat, en utilisant le framework wepy, en utilisant le framework mpvue et en utilisant le framework taro

continuera à être mis à jour. Merci pour votre soutien.

Flux de développement d'applets WeChat basé sur Gulp

Scénarios applicables

Trois options de développement, chacune avec ses propres avantages et inconvénients. Si vous développez à l'aide d'un framework tiers, vous pouvez profiter de la commodité de développement apportée par le framework, mais pour les nombreuses nouvelles fonctionnalités et fonctions du mini programme, telles que le module WXS, les composants personnalisés et Plug-ins , etc. sont limités par des frameworks tiers et ne peuvent pas être utilisés.

Le modèle de développement de petits programmes natifs est trop simple. En termes de style, les étudiants qui sont moins habitués à écrire, au stylet et au culot ne pourront pas tolérer la méthode d'écriture de wxss. a décidé d'utiliser gulp est un outil automatisé pour créer un ensemble de modèles de base pour le développement de mini-programmes WeChat. Sur la base de la conservation complète des fonctions et caractéristiques des mini-programmes WeChat, vous pouvez également utiliser less pour. écrivez des styles et ajoutez en même temps une compression d'image, et la ligne de commande est rapide Créez des modèles et d'autres fonctionnalités, ainsi développés, heureux, heureux !

github démarré

Caractéristiques

• Projet d'ingénierie d'applet WeChat construit sur la base de gulp+less

• Automatique compression des images du projet

• Inspection du code ESLint

• Utilisez la ligne de commande pour créer rapidement page, template et component

Démarrage

0. Avant de commencer, assurez-vous d'avoir installé node et npm et installé gulp-cli globalement

$ npm install --global gulp-cli

1. . Téléchargez le code

$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. Entrez dans le répertoire et installez les dépendances

$ cd wx-miniprogram-boilerplate && npm install

3. Compilez le code, générez le répertoire dist et utilisez les outils de développement pour ouvrir le répertoire dist

$ npm run dev

2. 🎜>

  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

4 . Créez une nouvelle page, un modèle ou un composant

$ npm run build

5. Compilez avant de télécharger le code

6. et la publication

wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架，公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js               // ESLint
├── package-lock.json
├── package.json
└── README.md

Structure du projet

Tasks:
  dev              开发编译，同时监听文件变化
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  
  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto 

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例：
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

Instructions Gulp

Q&A
Q :Pourquoi la conversion js, la complétion du style et la compression du code ne sont pas incluses dans le flux de travail ?
A : Les outils de développement WeChat sont livrés avec des fonctions telles que la conversion de Babel ES6 en ES5, la complétion de style et la compression du code js. Aucun ajout supplémentaire n'est requis dans ce flux de travail.

_templateQ : Quelles sont les utilisations des fichiers du répertoire
 ? gulp autoA :-s Utilisez la commande _template pour générer automatiquement des fichiers. Le paramètre _template peut spécifier l'objet de copie. Par défaut, le fichier dans le dossier du répertoire correspondant est

. de. Les développeurs peuvent personnaliser les fichiers sous

en fonction des besoins de l'entreprise. _templateQ : Les fichiers du répertoire dist
seront-ils compilés dans le répertoire  ?

R :

Non.

TODO
[x] Commentaires de code
[x] Utilisation de la ligne de commande standard
[x] eslint
[ ] Introduire les bibliothèques CSS couramment utilisées, telles que weui et autres

Recommandations associées :

Tutoriel pratique sur le développement du mini-programme WeChat - Développement du mini-programme WeChat en cours d'exécution

Développement du mini-programme WeChat

Vidéo : Tutoriel vidéo sur le développement de mini-programmes WeChat

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!