Un petit et magnifique échafaudage de mini-programmes qui vous permet de développer des mini-programmes de manière plus fluide et plus rapide.

Aujourd'hui, je vous recommande un petit échafaudage de développement de programme développé par moi-même. Il est utilisé depuis près d'un an et est relativement stable. Il continuera à être mis à jour à l'avenir.

Par rapport à la situation actuelle Parmi les différentes solutions cross-end du marché, ce processus de développement est plus pur, n'introduit aucune nouvelle difficulté de développement et améliore complètement l'efficacité du développement basé sur des mini-programmes natifs~

pandora-boierpalte -wechat est un petit et magnifique échafaudage de développement de mini-programmes WeChat. Nous n'avons introduit aucune nouvelle complexité et avons une capacité à 100 % d'utiliser des mini-programmes, mais nous avons complété les outils de développement de mini-programmes par rapport à. normal Les lacunes du développement Web vous permettent de développer plus facilement des applets WeChat.

Nous prenons en charge les fonctionnalités améliorées suivantes :

• Style d'écriture moins précompilé, automatiquement converti en wxss

• Introduire automatiquement async/ Dépendance en attente

• Configuration multi-environnement dev/test/pre/prod

• Dépendance npm, utilisez le package npm comme un projet Web normal, le reste Laissez-le à l'échafaudage

• Alias ​​du module, plus besoin d'utiliser des chemins relatifs pour introduire les modules js

• fichier de police d'icône, petit Le L'icône utilise directement le fichier de police. On peut aller sur le site IconFont pour télécharger le fichier svg qu'on aime

• Nous avons intégré la mini bibliothèque de composants de programme vant-weapp fournie par Youzan par par défaut, juste pa i <component-name> Nous pouvons installer les composants requis et leurs dépendances dans le projet

• créer des fichiers modèles

• et ses capacités CICD pratiques , la version pa est déployée sur le backend de contrôle du mini programme en un clic pour une gestion plus sémantique du numéro de version

Nous vous recommandons d'utiliser pandora-cli pour développer des mini programmes WeChat.

Less Use

---

En fait, il n'est pas nécessaire d'en dire plus à ce sujet, créez simplement un fichier less pour remplacer le fichier wxss.

Introduire automatiquement les dépendances async/await

---

Le script de construction d'échafaudage analysera automatiquement si les mots-clés async et wait sont utilisés dans le code. les bibliothèques tierces dont il dépend seront automatiquement introduites dans le code de construction final, vous pouvez donc utiliser la syntaxe async/wait en toute confiance.

Configuration multi-environnements

---

Une fois le projet de mini-programme initialisé, la configuration multi-environnements peut être effectuée dans config/app.yaml. La posture est la suivante :

Le contenu de configuration de app.yaml est le suivant :

    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'

Après le démarrage du projet, c'est-à-dire après le démarrage, chaque mise à jour et modification de l'application Le fichier .yaml déclenchera la compilation automatique

Dans le fichier js qui doit être utilisé, utilisez la méthode suivante pour introduire

    import config from 'config'

l'objet config est le fichier de configuration que nous avons construit à travers différents environnements

Par exemple, après le démarrage de pa start, nous obtenons la configuration L'objet est le suivant :

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

Utilisez pa build --env test, et l'objet de configuration obtenu est le suivant :

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

Dépendance npm

Cet échafaudage n'est pas construit à l'aide du npm officiel fourni par le mini programme Ability, les raisons sont les suivantes :

• pandora-boilerpalte-wechat Quand développant des échafaudages, npm n'est pas officiellement pris en charge

• La capacité officielle npm nécessite que le répertoire node_modules soit localisé. Le répertoire racine du mini-programme est en conflit avec la convention actuelle du répertoire d'échafaudage et est également différent de la structure normale du projet Web

Sur la base des raisons ci-dessus, nous avons décidé de continuer à utiliser notre propre mécanisme de traitement des dépendances npm, le projet de l'entreprise est en cours d'exécution depuis près d'un an et n'a pas J'ai encore rencontré des problèmes.

Vous pouvez utiliser la méthode suivante pour installer le package npm dans le répertoire racine du projet :

pa i <pkg> --npm



或者



npm i <pkg>

Les deux méthodes ci-dessus peuvent installer la dernière version du pkg correspondant dans le projet node_modules

Bibliothèque de composants

---

Nous avons intégré la bibliothèque de composants d'applet vant-weapp de l'open source Youzan. Lorsque vous l'utilisez, il vous suffit d'installer les composants dont vous avez besoin. via la commande pa. Toutes les dépendances requises seront automatiquement installées, et vous pourrez ensuite les utiliser en fonction de la posture d'utilisation des composants personnalisés du mini-programme, maximisant ainsi l'efficacité de développement du mini-programme.

Par exemple, nous souhaitons installer le composant de dialogue

pa i dialog

Cette commande installera automatiquement uniquement le composant de dialogue et ses dépendances de la bibliothèque vant-weapp dans le projet src/compnents.

Alias ​​du module

---

est configuré dans le fichier build.config.js dans le répertoire de mise à jour du projet. Nous pouvons configurer des alias pour les répertoires du projet et utiliser les références d'alias dans le code source.

prise en charge des polices d'icônes

---

Accédez au site officiel d'Alibaba IconFont pour télécharger le fichier SVG d'icône que vous aimez dans les icônes du répertoire racine du projet. La construction se fera automatiquement. générez le fichier de police et incluez-le. Connectez-le au projet et utilisez-le comme suit.

Il y a les fichiers suivants dans le répertoire des icônes

wechat.svg

Dans le fichier wxml, ajoutez simplement la classe suivante à la balise correspondante

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

où icon -font est requis. Le deuxième type est constitué de icon-font_

Bien sûr, nous pouvons ajouter d'autres styles à cet élément

样板文件创建

创建组件

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 接口，所以务必保证小程序开发者工具启动，并且  设置 -> 安全 -> 安全（服务端口）开启

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

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!