wxapp boilerplateのダウンロード - wxapp boilerplateソースコードのダウンロード

wxapp boilerplate

AI ソースコード

1.0.0

ダウンロード

wxapp-ボイラープレート

webpack 、 babel 、 scssを使用して開発された WeChat/Alipay ミニプログラムプロジェクトの足場

関数

node_modulesモジュールの参照をサポートします
../../../などのモジュール参照を回避するためのaliasの構成をサポート
async/awaitを含む、 babel介したより豊富なES6互換性のサポート
組み込みのpromiseとlodash ( lodashすべてではなく、オンデマンドで対応するモジュールを導入します)
scss使用して、いくつかの便利なmixinsとextendsが組み込まれた.wxssファイルを作成します
開発を支援するために__DEV__およびprocess.env.NODE_ENVグローバル定数を提供します
WeChat および Alipay アプレットへの自動コンパイルをサポート
__WECHAT__および__ALIPAY__グローバル定数を指定して、それが WeChat アプレットであるか Alipay アプレットであるかを決定します。
コマンドラインからWeChatアプレットページを素早く作成
production環境でのコードの圧縮のサポート

始めましょう

Node.js (>= v4.2 ) と、yarn または npm がインストールされていることを確認してください。

このプロジェクトをgit clone
コマンドラインツールを使用してこのディレクトリにcd 、 yarn実行して依存モジュールをインストールします。
開発を開始するにはyarn startを実行します
WeChat 開発者ツールを使用して、 dist/wechatディレクトリをプロジェクトに追加します。

組み込みコマンド

yarn start 、ファイルの変更を監視し、自動的に再コンパイルできる WeChat アプレットプロジェクトを開発するためのwebpack開始します。
yarn start:alipayファイルの変更を監視し、自動的に再コンパイルできる Alipay アプレットプロジェクトを開発するためにwebpack開始します。
yarn build 、 dist/wechatおよびdist/alipayにproduction環境用のコードをコンパイルして生成します。
yarn lint:build 、 yarn buildコマンドを実行し、eslint と stylelint を使用してコード仕様を検証します。
yarn prettier prettierを実行して src ディレクトリ内のコードをフォーマットします
yarn create-page WeChat アプレットページをすばやく作成します ( create-pageの詳細な使用法については、create-wxapp-page を参照してください)。

WeChatおよびAlipayミニプログラムと互換性があります

開発者は、ソースコードのセットを選択して WeChat および Alipay アプレットを開発できます。このスキャフォールディングは、 wxmlからaxmlへの自動コンパイル、 wx:attrからa:attrへの変換、API wxからmyへの変換、およびその逆の変換をサポートします。ただし、個々のインターフェイスはプラットフォーム上で若干異なり、開発者は__WECHAT__または__ALIPAY__を通じてそれらを動的に処理できます。

ファイルコピー

wxmlまたはaxmlに動的にインポートされたファイル ( src="{{'images/' + type + '.png'}}"など) がある場合、webpack はそれらを動的にインポートできないため、パッケージ化後にファイルが欠落する可能性があります。。

この状況が発生した場合は、 copy-webpack-plugin を使用して問題を解決し、 imagesディレクトリ全体をdistにコピーします。

このプラグインには、このスキャフォールディングにすでにこのプラグインが組み込まれています。使いやすくするために、 copyWebpack文字列配列をpackage.jsonに追加して、ディレクトリまたはファイルを自動的にコピーすることもできます。例えば：

パッケージ.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

yarn startまたはyarn build実行すると、 src/imagesおよびsrc/iconsディレクトリがdist/wechat/imagesおよびdist/wechat/iconsディレクトリに自動的にコピーされます (Alipay アプレットにも同じことが当てはまります)。