WeChatアプレットをVANtフレームに導入した全プロセス記録
3169 ワード
前言
WeChatのプログラムの元に生まれたuiが少し違ったと感じることがありますが、三方枠を導入してもいいですか？本論文は、VANtを導入して例を挙げ、8つのステップを含む。雲開発プロジェクトであろうとなかろうと、同じように使います。
ステップを実行
1.WeChatアプレットの開発ツールを開いて、プロジェクトに入ります。プロジェクトのルートディレクトリファイルで右クリックします。端末で開くように選択します。（注意はルートディレクトリ）
2.コマンドウィンドウにnpm initを入力します。その後、すべての設定は標準設定で行います。リターンボタンをクリックすればいいです。
3.コマンドウィンドウにnpm installを入力して構築し、成功したらルートディレクトリの下でpackage.jsonとpackage-lock.jsonファイルを作成します。
4.続いてVANtフレームを設置し、公式サイトによる操作が可能です。
4.1 npm i@vant/weap-S--production
4.2 npm i vant-weap-S--production
4.3 app.jsonを修正する
4.4 project.co nfig.jsonを修正する。
5.WeChat開発者ツールに戻り、「ツール」の欄で「npmの構築」を見つけます。構築の成功を待っていればいいです。
6.最後にnpmモジュールを使用して、「詳細」の中で「npmモジュール」を使ってチェックすればいいです。
7.VANtコンポーネントを使って、ap.jsonまたはindex.jsonにコンポーネントを導入します。詳細はvant-contrib.gitee.io/vant-weap/を参照してください。
8.ページで使用し、直接にコンポーネントを導入すればいいです。
・・・エピソード・・・
これはテスト番号アプリのプロジェクトなので、雲を使って開発したものはありません。後の手順で操作したらエラーが発生します。エラーメッセージは下図（1）のようです。この時、このプロジェクトのカタログは他のクラウド開発のプロジェクトのファイルディレクトリと違っていて、ファイルが見つからないことになりました。具体的な原因は分かりません。しかし、雲開発プロジェクトで成功しました。手順は上記の手順と同じです。
これにより、皆さんはできるだけ正式なアプリ（つまり、ウィジェットの公共プラットフォームに登録された後のアプリ）を使うようにしてください。後ろに行くほど迷惑がかからないようにします。
雲開発プロジェクトでもう一度操作して、最後に成功した効果を上げたいです。問題があるメモを記録するのではありません。でも、これもいいと思います。今度はこのミスを犯さないように注意してください。だから最終的にはこのブログで皆さんにお見せします。皆さんに注意する役割も果たしてほしいです。細かいところに注意して、油断しないようにしてください。
・・・不思議なシーン・・・
翌日、WeChat開発者のツールを開けてみたら、テスト番号AppIdの項目はまたできます。コンソールのエラー情報もなくなりました。これは気まずいですね。よく分からないのはどういうことですか？話をする勇気がない。直接上の図を下の図（3）に示す。
図（1）：エラーメッセージ
図（2）：クラウド開発プロジェクトを含むVANtコンポーネントの成功使用
図（3）：テスト番号AppIdがVantフレームの使用に成功しました。
締め括りをつける
ここで、WeChatのプログラムについてVANtの枠組みを導入した文章を紹介します。もっと関連するWeChatのプログラムはVANtの枠組みの内容を紹介します。以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。
WeChatのプログラムの元に生まれたuiが少し違ったと感じることがありますが、三方枠を導入してもいいですか？本論文は、VANtを導入して例を挙げ、8つのステップを含む。雲開発プロジェクトであろうとなかろうと、同じように使います。
ステップを実行
1.WeChatアプレットの開発ツールを開いて、プロジェクトに入ります。プロジェクトのルートディレクトリファイルで右クリックします。端末で開くように選択します。（注意はルートディレクトリ）
2.コマンドウィンドウにnpm initを入力します。その後、すべての設定は標準設定で行います。リターンボタンをクリックすればいいです。
3.コマンドウィンドウにnpm installを入力して構築し、成功したらルートディレクトリの下でpackage.jsonとpackage-lock.jsonファイルを作成します。
4.続いてVANtフレームを設置し、公式サイトによる操作が可能です。
4.1 npm i@vant/weap-S--production
4.2 npm i vant-weap-S--production
4.3 app.jsonを修正する
4.4 project.co nfig.jsonを修正する。
5.WeChat開発者ツールに戻り、「ツール」の欄で「npmの構築」を見つけます。構築の成功を待っていればいいです。
6.最後にnpmモジュールを使用して、「詳細」の中で「npmモジュール」を使ってチェックすればいいです。
7.VANtコンポーネントを使って、ap.jsonまたはindex.jsonにコンポーネントを導入します。詳細はvant-contrib.gitee.io/vant-weap/を参照してください。
8.ページで使用し、直接にコンポーネントを導入すればいいです。
・・・エピソード・・・
これはテスト番号アプリのプロジェクトなので、雲を使って開発したものはありません。後の手順で操作したらエラーが発生します。エラーメッセージは下図（1）のようです。この時、このプロジェクトのカタログは他のクラウド開発のプロジェクトのファイルディレクトリと違っていて、ファイルが見つからないことになりました。具体的な原因は分かりません。しかし、雲開発プロジェクトで成功しました。手順は上記の手順と同じです。
これにより、皆さんはできるだけ正式なアプリ（つまり、ウィジェットの公共プラットフォームに登録された後のアプリ）を使うようにしてください。後ろに行くほど迷惑がかからないようにします。
雲開発プロジェクトでもう一度操作して、最後に成功した効果を上げたいです。問題があるメモを記録するのではありません。でも、これもいいと思います。今度はこのミスを犯さないように注意してください。だから最終的にはこのブログで皆さんにお見せします。皆さんに注意する役割も果たしてほしいです。細かいところに注意して、油断しないようにしてください。
・・・不思議なシーン・・・
翌日、WeChat開発者のツールを開けてみたら、テスト番号AppIdの項目はまたできます。コンソールのエラー情報もなくなりました。これは気まずいですね。よく分からないのはどういうことですか？話をする勇気がない。直接上の図を下の図（3）に示す。
図（1）：エラーメッセージ
図（2）：クラウド開発プロジェクトを含むVANtコンポーネントの成功使用
図（3）：テスト番号AppIdがVantフレームの使用に成功しました。
締め括りをつける
ここで、WeChatのプログラムについてVANtの枠組みを導入した文章を紹介します。もっと関連するWeChatのプログラムはVANtの枠組みの内容を紹介します。以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。