ミニプログラムをよりスムーズかつ迅速に開発できる、小さくて美しいミニプログラム足場

今日は、私が開発した小さなプログラム開発足場をお勧めします。1 年近く使用されており、比較的安定しています。今後も更新され続けます。スターを付けて歓迎します。

現在市場に出回っているさまざまなクロスエンド ソリューションと比較すると、この開発プロセスはより純粋で、新たな開発上の困難が生じず、ネイティブ ミニ プログラムに基づいて開発効率が完全に向上します~

pandora-boierpalte -wechat は小さくて美しい WeChat ミニ プログラム開発足場です。新たな複雑性は導入されておらず、ミニ プログラムを使用する能力は 100% ありますが、通常のものと比較してミニ プログラム開発者ツールが補足されていますWeb 開発の欠点により、WeChat アプレットの開発が容易になります。

次の拡張機能をサポートしています:

• 事前コンパイルの少ない記述スタイル、wxss への自動変換

• 自動的に導入async/ await 依存関係

• dev/test/pre/prod マルチ環境構成

• npm 依存関係、通常の Web プロジェクトと同様に npm パッケージを使用します、残りはスキャフォールディングに任せるだけです。

• モジュールエイリアス。js モジュールを導入するために相対パスを使用する必要はなくなりました。

• アイコン フォント フォントファイル、小さい アイコンはフォント ファイルを直接使用しています。IconFont サイトにアクセスして、好みの svg ファイルをダウンロードできます。

• ## を統合しました。 #vant-weapp## デフォルトで Youzan によって提供されます。 # ミニ プログラム コンポーネント ライブラリにアクセスし、pa i <component-name></component-name> を実行するだけで、必要なコンポーネントとその依存関係をプロジェクトにインストールできます

サンプル ファイルの作成
とその便利な CICD 機能、ミニ プログラム コントロール バックグラウンドへのワンクリック展開、よりセマンティックなバージョン番号管理
WeChat ミニ プログラムを開発するには、

pandora-cli

を使用することをお勧めします。

Less Use

実際、これについては特に説明する必要はなく、less ファイルを作成して wxss ファイルを置き換えるだけです。

---

async/await 依存関係を自動的に導入する

スキャフォールディング構築スクリプトは、コード内で async キーワードと await キーワードが使用されているかどうかを自動的に分析します。依存するサードパーティのライブラリは最終的なビルド コードに自動的に導入されるため、安心して async/await 構文を使用できます。

---

複数の環境構成

ミニ プログラム プロジェクトが初期化された後、config/app.yaml で複数の環境を構成できます。姿勢は次のとおりです。

---

app.yaml の設定内容は次のとおりです。

    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'

プロジェクトの開始後、つまり pa の開始後、毎回自動コンパイルがトリガーされます。 app.yaml ファイルが更新および変更されます

使用する必要がある js ファイルでは、次のメソッドを使用して導入します

    import config from 'config'

config オブジェクトは、さまざまな方法で構築した構成ファイルです環境

たとえば、pa start の開始後、構成を取得します。オブジェクトは次のとおりです:

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

pa build --env test を使用すると、取得される構成オブジェクトは次のとおりです。 ##

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

npm 依存関係

このスキャフォールディングは、ミニ プログラムの機能によって提供される npm 公式を使用して構築されていません。理由は次のとおりです。

pandora- voiderpalte-wechat スキャフォールディングを開発する場合、npm は正式にサポートされていません

• 公式の npm 機能では、node_modules ディレクトリを見つける必要があります。 ミニ プログラムのルート ディレクトリは、現在のディレクトリ規則と競合します。

• # 上記の理由から、当社のプロジェクトは、自社で提供する npm 依存関係処理機構を引き続き使用することにしました。 1年近く稼働していますが、まだ何の問題も発生していません。

次の方法を使用して、npm パッケージをプロジェクトのルート ディレクトリにインストールできます:

pa i <pkg> --npm



或者



npm i <pkg>

上記の 2 つの方法はどちらも、対応する pkg の最新バージョンをプロジェクトの node_modules にインストールできます。

コンポーネント ライブラリ

Youzan オープン ソースの vant-weapp アプレット コンポーネント ライブラリを統合しました。使用する場合は、必要なコンポーネントをインストールするだけで済みます。 paコマンドにより必要な依存関係がすべて自動的にインストールされ、ミニプログラムのカスタムコンポーネントの利用姿勢に合わせて利用することができ、ミニプログラムの開発効率を最大化します。

たとえば、ダイアログ コンポーネントをインストールしたいとします。

---

pa i dialog

このコマンドは、ダイアログ コンポーネントとその依存関係のみを vant-weapp ライブラリからプロジェクト src/compnents に自動的にインストールします。

モジュール エイリアス

は、プロジェクト更新ディレクトリの build.config.js ファイルで構成されます。プロジェクト内のディレクトリのエイリアスを構成し、ソース コードでエイリアス参照を使用できます。

---

アイコン フォントのサポート

Alibaba IconFont 公式 Web サイトにアクセスして、お気に入りのアイコン SVG ファイルをプロジェクトのルート ディレクトリのアイコンにダウンロードします。ビルドにより、フォントファイルを作成してインクルードします。 以下のようにプロジェクトに接続して使用します。

アイコン ディレクトリには次のファイルがあります。

---

wechat.svg

wxml ファイルでは、次のクラス class を対応するタグ

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

に追加できます。

ここで、icon -font は必須です。2 番目のタイプは、icon-font_

もちろん、この要素に他のスタイルを追加することもできます

样板文件创建

创建组件

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

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

以上がミニプログラムをよりスムーズかつ迅速に開発できる、小さくて美しいミニプログラム足場の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。