wx miniprogram boilerplate herunterladen – wx miniprogram boilerplate Quellcode herunterladen

wx miniprogram boilerplate

AI-Quellcode

1.0.0

Herunterladen

️ veranschaulichen

️ ️ ️ Aktualisierungen wurden gestoppt. Es dient nur als Referenz. Es wird empfohlen, andere ausgereifte kleine Programmentwicklungs-Frameworks zu verwenden.

wx-miniprogram-boilerplate

WeChat-Applet-Entwicklungsworkflow basierend auf Gulp

Das Entwicklungsmodell nativer kleiner Programme ist zu einfach. Studenten, die es gewohnt sind, weniger zu schreiben, werden die Schreibmethode von wxss nicht tolerieren. Aus diesem Grund habe ich mich für die Verwendung von Gulp -Automatisierungstools entschieden Erstellen Sie eine Reihe kleiner WeChat-Programme, die auf der Basisvorlage basieren und gleichzeitig die Funktionen und Features des WeChat-Applets vollständig beibehalten. Sie können auch less Schreibstile verwenden und gleichzeitig Bildkomprimierung und Befehlszeile schnell hinzufügen Erstellung von Vorlagen und anderen Funktionen zur Verbesserung der Entwicklungseffizienz!

Merkmal

WeChat-Miniprogrammprojekt basierend auf gulp+less
Automatische Komprimierung von Projektbildern
ESLint-Code-Inspektion
Erstellen Sie schnell page , template und component über die Befehlszeile
Unterstützen Sie die Verpackung in der Produktionsumgebung

Erste Schritte

0. Stellen Sie vor dem Start sicher, dass Node und NPM installiert sind und gulp-cli global installiert ist.

 $ npm install --global gulp-cli

1. Laden Sie den Code herunter

 $ 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 das dist-Verzeichnis und öffnen Sie das dist-Verzeichnis mit Entwicklertools.

 $ npm run dev （开发环境打包）
$ npm run test (测试环境打包)

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, bevor Sie den Code hochladen

 $ npm run build （生产环境打包）

6. Code hochladen, prüfen und freigeben

Ingenieurbauwerk

 wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── env        // 请求域名配置
│    ├── 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
├── package-lock.json
├── package.json
└── README.md

Schluckbeschreibung

 Tasks:
  dev              开发编译，同时监听文件变化
  test             整体编译，请求指向测试环境
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  devEnv/testEnv/prodEnv 生成对应环境的请求域名配置

  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 die Babel-Funktionen zur Konvertierung von ES6 in ES5, zur Stilvervollständigung und zur 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 gulp auto , um Dateien automatisch zu generieren. Der Parameter -s kann das Kopierobjekt angeben. Standardmäßig sind die Dateien im Ordner im entsprechenden Verzeichnis _template . Entwickler können Dateien unter _template entsprechend den Geschäftsanforderungen anpassen.
F: Werden die Dateien im Verzeichnis _template in dist kompiliert?
A: Nein.