miniprogram template

ミニプログラムテンプレート

Wechat ミニプログラム テンプレートは、TypeScript と VSCode を使用したベスト プラクティスをプロジェクトします。

[ミニプログラム ビルド ツールを使用してビルドされたミニ プログラム テンプレート (TypeScript+VSCode) のベスト プラクティス]

---

必須【必要な環境】

• nodejs: npm >= 6.0 (またはyarn ) Node >= 10
• エディタ: VSCode
• Wechat-Devtools: ミニ プログラム開発ツール (および服务端口を開く)

クイックスタート【使う】

1. プロジェクトの作成 [ワンクリックで新しいプロジェクトを作成]

[このテンプレートを使用する] をクリックしてこのテンプレートをワンクリックで使用するか、コマンド ラインを使用します。

 # 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]

2. start [プロジェクトファイルの下で実行]

 # cd [本地目录名]
npm start
# 或者
# yarn start

通常の起動後、デバッグ ツールは自動的にdistプレビューを開きます。

スクリプト[コマンド]

npm yarnで置き換えることができます

• npm start : プロジェクトを再コンパイルし、リアルタイムで更新します [エイリアスnpm run start ]
  • npm run start:test : 開発用のテスト環境構成ファイルを使用します
  • npm run start:prod : 開発用のビルド環境構成ファイルを使用します
• npm run upload : プロジェクトをパッケージ化してミニプログラムのバックグラウンドにアップロードします (開発環境の構成)
  • npm run upload:test : テスト環境設定を使用して、プロジェクトをパッケージ化し、ミニ プログラム バックグラウンドにアップロードします。
  • npm run upload:prod : ビルド環境構成を使用して、プロジェクトをパッケージ化し、ミニ プログラム バックグラウンドにアップロードします。
• npm run build : 再パッケージ化およびコンパイル (開発環境の構成)
  • npm run build:test : 再パッケージ化してコンパイルする
  • npm run build:prod : 再パッケージ化してコンパイルする
• npm test : テスト [エイリアスnpm run test ]
• npm run check : コードのスタイルと形式のチェック (さまざまな言語での個別のlintチェックをサポート)
• npm run fix : 修正可能な lint とコード スタイルの問題を自動的に修正します。
• npm run help : コンパイルツール mp の詳しい使用方法を表示します。

すべてのショートカット コマンド package.json

Multiple env [複数の環境設定]

各環境は別々に構成できます (必要に応じて環境構成を増減できます)

• .mpconfig.jsonc開発統合環境
• env/test.jsoncテスト環境の構成
• env/prod.jsoncオンライン実稼働環境の構成

環境が 1 つしかない場合は、 envディレクトリを削除し、 .mpconfig.jsonc

コーディング[コーディング]

言語[プログラミング言語]

js

• .ts (TypeScript) または.js (JavaScript) ( tsを推奨)
• Eslint + Prettier はコード スタイルと自動フォーマットをチェックします
• TS サポート/絶対パス形式のインポート

wxml

• .wxmlまたは.html
• Htmlhit + Prettier はコード スタイルと自動フォーマットをチェックします
• コードのチェックとフォーマットに vscode-minapp を使用する

wxss

• .scss 、 .sass 、または.css ( scssを推奨)
• Stylelint + Prettier はコード スタイルと自動フォーマットをチェックします
• CSS プロパティを指定した順序で自動的に並べ替えます
• scssアセット ディレクトリの内容を直接@importできます

json

• .jsonc 、 .json 、または.json5アノテーションがサポートされています
• よりきれいなコード検査と自動フォーマット

wxs

• .wxts (TypeScript)、. .wxs (JavaScript) ( wxtsを推奨)
• よりきれいなコード検査と自動フォーマット
• miniprogram-wxs型のチェックと修飾を実行します

編集者[編集者]

VSCode使用して推奨プラグインを自動インストールする

1. 初めて使用するときにプロンプ​​トに従って推奨プラグインを自動的にインストールします
2. すべてのプラグインが設定されており、コード チェック プロンプトが自動的に実行され、保存時に自動的に修復されます。
3. 新しいPage 、 Component 、 wxsを作成すると、テンプレート ファイルが自動的に生成されます (テンプレートは変更可能です)。

CI [継続的インテグレーション]

Auzre Pipelines、Travis CI、および Github Actions はデフォルトで構成されており、必要に応じて開いたり変更したりできます。

• Azure Pipelines 必要に応じて構成 azure-pipelines.yml を変更します。
• Travis-CI は必要に応じてconfiguration.travis.ymlを変更します
• Github アクション 必要に応じて構成を変更する.github/workflows/nodejs.yml