WeChat-Applet-Entwicklung: Workflow basierend auf Gulp

Derzeit stehen bei der Entwicklung von WeChat-Miniprogrammen ungefähr vier technische Lösungen zur Verfügung: native Entwicklung von WeChat-Miniprogrammen, Verwendung des Wepy-Frameworks, Verwendung des MPVUE-Frameworks und Verwendung des Taro-Frameworks

wird weiterhin aktualisiert. Vielen Dank für Ihre Unterstützung.

WeChat-Applet-Entwicklungsworkflow basierend auf Gulp

Anwendbare Szenarien

Drei Entwicklungsoptionen, jede mit ihren eigenen Vor- und Nachteilen. Wenn Sie mit einem Drittanbieter-Framework entwickeln, können Sie den Entwicklungskomfort genießen, den das Framework bietet, allerdings mit den vielen neuen Features und Funktionen des Miniprogramms, wie z. B. WXS-Modul, benutzerdefinierte Komponenten und Plug-ins usw. sind durch Drittanbieter-Frameworks eingeschränkt und können nicht verwendet werden.

Das Entwicklungsmodell nativer kleiner Programme ist zu einfach. Studenten, die es gewohnt sind, weniger zu schreiben, werden die Schreibmethode von wxss nicht tolerieren Ich habe mich für die Verwendung von gulp entschieden, einem automatisierten Tool zum Erstellen einer Reihe grundlegender Vorlagen für die Entwicklung von WeChat-Miniprogrammen. Auf der Grundlage der vollständigen Beibehaltung der Funktionen und Features von WeChat-Miniprogrammen können Sie auch less verwenden Schreiben Sie Stile und fügen Sie gleichzeitig Bildkomprimierung hinzu. Die Befehlszeile ist schnell. Erstellen Sie Vorlagen und andere Funktionen. So entwickelt, glücklich, glücklich!

Github gestartet

Funktionen

• WeChat-Applet-Engineering-Projekt basierend auf gulp+less

• Automatisch Komprimierung von Projektbildern

• ESLint-Code-Inspektion

• Verwenden Sie die Befehlszeile, um schnell page, template und component

Erste Schritte

0 Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie node und npm installiert und gulp-cli global installiert haben

$ npm install --global gulp-cli

1 Code

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

2. Geben Sie das Verzeichnis ein und installieren Sie Abhängigkeiten

$ cd wx-miniprogram-boilerplate && npm install

3. Kompilieren Sie den Code, generieren Sie ein dist-Verzeichnis und verwenden Sie Entwicklertools, um das dist-Verzeichnis zu öffnen

$ npm run dev

4. Erstellen Sie eine neue Seite, Vorlage oder Komponente

  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的页面

5. Kompilieren Sie vor dem Hochladen des Codes

$ npm run build

6. Laden Sie Code hoch, überprüfen Sie, veröffentlichen Sie

Projektstruktur

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

Gulp-Anweisungen

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的页面

Fragen und Antworten

F: Warum sind JS-Konvertierung, Stilvervollständigung und Codekomprimierung nicht im Workflow enthalten?
A: WeChat-Entwicklertools verfügen über Funktionen wie Babel-Konvertierung von ES6 in ES5, Stilvervollständigung und JS-Codekomprimierung. In diesem Workflow sind keine zusätzlichen Ergänzungen erforderlich.

F: Wozu dienen die Dateien im Verzeichnis ? _template
A: Verwenden Sie den Befehl , um Dateien automatisch zu generieren. Der Parameter gulp auto kann das Kopierobjekt angeben. Standardmäßig ist die Datei im Ordner im entsprechenden Verzeichnis. von. Entwickler können die Dateien unter -s entsprechend den Geschäftsanforderungen anpassen. _template_template

F: Werden Dateien im Verzeichnis

im Verzeichnis kompiliert? _templatedistA:
Nein. TODO

[x] Codekommentare
[x] Standard-Befehlszeilenverwendung
[x] eslint
[ ] Einführung häufig verwendeter CSS-Bibliotheken wie Weui und dergleichen
Verwandte Empfehlungen:

Praktisches Tutorial zur WeChat Mini-Programmentwicklung – Entwicklung des laufenden WeChat Mini-Programms

WeChat Mini-Programmentwicklung

Video: Video-Tutorial zur Entwicklung von WeChat-Miniprogrammen

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Entwicklung: Workflow basierend auf Gulp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!