Ein kleines und schönes Gerüst für Miniprogramme, mit dem Sie Miniprogramme reibungsloser und schneller entwickeln können

Heute empfehle ich Ihnen ein kleines, von mir entwickeltes Programmentwicklungsgerüst, das seit fast einem Jahr verwendet wird und relativ stabil ist. Es wird auch in Zukunft aktualisiert.

Im Vergleich zu den aktuellen verschiedenen Cross-End-Lösungen auf dem Markt ist dieser Entwicklungsprozess reiner, bringt keine neuen Entwicklungsschwierigkeiten mit sich und verbessert die Entwicklungseffizienz basierend auf nativen Miniprogrammen vollständig~

pandora-boierpalte -wechat ist ein kleines und schönes WeChat-Miniprogramm-Entwicklungsgerüst. Wir haben keine neue Komplexität eingeführt und sind zu 100 % in der Lage, Miniprogramme zu verwenden, aber wir haben die Miniprogramm-Entwicklertools im Vergleich zu normalen erweitert Die Unzulänglichkeiten der Webentwicklung erleichtern Ihnen die Entwicklung von WeChat-Applets.

Wir unterstützen die folgenden erweiterten Funktionen:

• Weniger vorkompilierter Schreibstil, automatisch in wxss konvertiert

• Automatisch einführen async/await-Abhängigkeit

• dev/test/pre/prod-Multi-Umgebungskonfiguration

• npm-Abhängigkeit, verwenden Sie das npm-Paket wie ein normales Webprojekt , der Rest Überlassen Sie es dem Gerüst

• Modul-Alias, es müssen keine relativen Pfade mehr verwendet werden, um JS-Module einzuführen

• Symbolschriftdatei, klein Das Symbol verwendet direkt die Schriftartdatei. Wir können auf die Website IconFont gehen, um die gewünschte SVG-Datei herunterzuladen.

• Wir haben die vant-weapp Mini-Programmkomponentenbibliothek integriert, die von bereitgestellt wird Youzan standardmäßig, nur pa i <component-name> Wir können die erforderlichen Komponenten und ihre Abhängigkeiten im Projekt installieren

• Vorlagendateien erstellen

• und es ist praktisch CICD-Funktionen, PA-Release wird mit einem Klick im Mini-Programmsteuerungs-Backend bereitgestellt, um eine semantischere Versionsnummernverwaltung zu ermöglichen

Wir empfehlen die Verwendung von pandora-cli , um WeChat mini zu entwickeln Programme.

Weniger Nutzen

---

Tatsächlich muss dazu nicht mehr gesagt werden. Erstellen Sie einfach eine Less-Datei, um die WXSS-Datei zu ersetzen.

Async/await-Abhängigkeiten automatisch einführen

---

Das Scaffolding-Konstruktionsskript analysiert automatisch, ob die Schlüsselwörter „async“ und „await“ im Code verwendet werden Bibliotheken von Drittanbietern, von denen es abhängt, werden automatisch in den endgültigen Build-Code eingefügt, sodass Sie die Async/Await-Syntax bedenkenlos verwenden können.

Multi-Umgebungskonfiguration

---

Nachdem das Miniprogrammprojekt initialisiert wurde, kann die Multi-Umgebungskonfiguration in config/app.yaml durchgeführt werden. Die Haltung ist wie folgt:

Der Konfigurationsinhalt von app.yaml lautet wie folgt:

    appId: 'wxxxxxxxxx'
    appName: 'test-pandora'
    version: '1.0.0'
    development:
      env: 'development'
      host: 'https://api.dev.com'
    test:
      env: 'test'
      host: 'https://api.test.com'
    preproduction:
      env: 'preproduction'
      host: 'https://api.pre.com'
    production:
      env: 'production'
      host: 'https://api.prod.com'

Nachdem das Projekt gestartet wurde, dh nach dem Start jedes Updates und jeder Änderung der App Die .yaml-Datei löst die automatische Kompilierung aus

In der zu verwendenden js-Datei verwenden Sie die folgende Methode, um einzuführen

    import config from 'config'

config-Objekt ist die Konfigurationsdatei, die wir in verschiedenen Umgebungen erstellt haben

Zum Beispiel erhalten wir nach dem Start von pa die Konfiguration. Das Objekt lautet wie folgt:

{
    appId: 'wxxxxxxxxx',
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'development',
    host: 'https://api.dev.com'
}

Verwenden Sie pa build --env test, und das erhaltene Konfigurationsobjekt lautet wie folgt:

{   
 
    appId: 'wxxxxxxxxx',
 
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'test',
    host: 'https://api.test.com'
}

NPM-Abhängigkeit

Dieses Gerüst wird nicht mit dem vom Miniprogramm Ability bereitgestellten NPM-Offiziellen erstellt. Die Gründe sind wie folgt:

• pandora-boilerpalte-wechat Wann Bei der Entwicklung von Gerüsten wird npm nicht offiziell unterstützt

• Die offizielle npm-Funktion erfordert, dass sich das Verzeichnis node_modules befindet. Das Stammverzeichnis des Miniprogramms widerspricht der aktuellen Gerüstverzeichniskonvention und unterscheidet sich auch Aus der normalen Webprojektstruktur

Aus den oben genannten Gründen haben wir uns entschieden, weiterhin unseren eigenen npm-Abhängigkeitsverarbeitungsmechanismus zu verwenden. Das Projekt des Unternehmens läuft seit fast einem Jahr und nicht mehr sind noch keine Probleme aufgetreten.

Sie können die folgende Methode verwenden, um das npm-Paket im Projektstammverzeichnis zu installieren:

pa i <pkg> --npm



或者



npm i <pkg>

Beide der beiden oben genannten Methoden können die neueste Version des entsprechenden Pakets im Projekt node_modules < installieren 🎜>

Komponentenbibliothek

---

Wir haben die Vant-Weapp-Applet-Komponentenbibliothek von Youzan Open Source integriert. Bei der Verwendung müssen Sie nur die Komponenten installieren, die Sie benötigen Über den Befehl pa werden alle erforderlichen Abhängigkeiten automatisch installiert. Anschließend können Sie sie entsprechend der Nutzungssituation der benutzerdefinierten Komponenten des Miniprogramms verwenden, wodurch die Entwicklungseffizienz des Miniprogramms maximiert wird.

Zum Beispiel möchten wir die Dialogkomponente installieren

pa i dialog

Dieser Befehl installiert automatisch nur die Dialogkomponente und ihre Abhängigkeiten aus der vant-weapp-Bibliothek im Projekt src/compnents.

Modulalias

---

wird in der Datei build.config.js im Projektaktualisierungsverzeichnis konfiguriert. Wir können Aliase für die Verzeichnisse im Projekt konfigurieren und die Alias-Referenzen im Quellcode verwenden.

Symbolschriftart unterstützt

---

Gehen Sie zur offiziellen Website von Alibaba IconFont, um die gewünschte Symbol-SVG-Datei in das Projektstammverzeichnis herunterzuladen Generieren Sie die Schriftartdatei und fügen Sie sie ein. Verbinden Sie sie mit dem Projekt und verwenden Sie sie wie folgt.

Es gibt die folgenden Dateien im Symbolverzeichnis

wechat.svg

Fügen Sie in der WXML-Datei einfach die folgende Klasse zum entsprechenden Tag hinzu

<text class="icon-font icon-font_wechat"></text>

wobei icon-font erforderlich ist. Der zweite Typ besteht aus icon-font_

Natürlich können wir diesem Element andere Stile hinzufügen

样板文件创建

创建组件

pa c component demo

或者 

pa create component demo

创建好的文件会自动位于项目 src/components 中

创建页面

pa c page demo

或者 

pa create page demo

创建好的文件为自动位于项目 src/pages 中

CICD支持

在项目根目录下执行以下命令可以自动发布项目到小程序后台

pa release <version-type> -m &#39;<comments>&#39;

其中 version-type 为 major, minor, patch 可以参考 npm version 语义化版本

comments 为此次发布的描述，必填。

这里需要注意的是，pa release 使用的是小程序开发者工具的 HTTP 接口，所以务必保证小程序开发者工具启动，并且  设置 -> 安全 -> 安全（服务端口）开启

推荐教程：《微信小程序》

Das obige ist der detaillierte Inhalt vonEin kleines und schönes Gerüst für Miniprogramme, mit dem Sie Miniprogramme reibungsloser und schneller entwickeln können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!