私は最近、uni-app の小さなプログラム プロジェクトを開発しました。vscode の使用に慣れているため、プロジェクトの実行には hbuderx を使用し、デバッグには WeChat 開発ツールを使用する必要があります。また、場合によっては iOS シミュレーターを使用する必要があります。8g メモリを搭載した Mac は、異常にスタックしたので調べてみました npmのコマンドでコンパイル、実行、その他のエンジニアリング設定を行うので、メモリ使用量を減らすためにhbuderxを実行する必要はありません ちなみに、要件から完全な機能までのプロセスも記録します遭遇した問題と解決策として。
1. Npm はユニアプリコードをコンパイルします
uni-app 公式ドキュメントを開いてエンジニアリング関連のドキュメントを見つけます
私のニーズにより近いので、公式ドキュメントに従ってデモをダウンロードして試してください
vue-cli は以前にインストールされているため、ここではスキップし、2 番目のステップで正式バージョンを選択します。
vue create -p dcloudio/uni-preset-vue my-project ネットワーク上の理由によりプロジェクトの初期化に失敗しました
このようなファイル構造のプロジェクトを取得するには、gitee でテンプレートを直接ダウンロードしてみてください
package.jsonは次のようになります
次のコマンドを実行してみてください
npm i
npm run dev:mp-weixin
コンパイルが成功すると、プロジェクトのルート ディレクトリに dist フォルダーが表示されます。明らかに、これはコンパイルされた WeChat アプレット プロジェクト コードです。
それほどナンセンスではありません。WeChat 開発ツールを使用して開くだけです
コードを修正してみる
このようなpackage.jsonを取得するために無駄なコマンドを削除します
このようにして、npm run dev:mp-weixin を介して uni-app によって開発された WeChat アプレット プロジェクトを実装し、WeChat 開発ツールの自動化 API ドキュメントを確認して、dist ディレクトリを自動的に開くプロジェクトを実現しました。
2.WeChat開発ツールを開きます
WeChat開発ツールの公式APIを開く
上記の操作に従ってください
npm i miniprogram-automator --save-devopenWeixin.js を書く
const automator = require('miniprogram-automator')
automator.launch({
cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
projectPath: 'path/to/project', // 项目文件地址
}).then(async miniProgram => {
const page = await miniProgram.reLaunch('/page/component/index')
await page.waitFor(500)
const element = await page.$('.kind-list-item-hd')
console.log(await element.attribute('class'))
await element.tap()
await miniProgram.close()
})プロジェクトのアドレスを生成された dist ディレクトリに変更します
const automator = require('miniprogram-automator')
automator.launch({
cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
projectPath: './dist/dev/mp-weixin', // 项目文件地址
}).then(async miniProgram => {
// 打开后的回掉看自己需求编写
})それを実行する
node openWeixin.js正常に実行されました
package.json スクリプト コマンドを作成する
"scripts": {
"open": "node openWeixin",
"serve": "npm-run-all --parallel dev:mp-weixin open --continue-on-error"
}npm runserveを実行します（npm-run-allは複数のコマンドを実行するパッケージです。&&を試してみるとエラーが報告されることが分かったので、それを実現するためにnpm-run-allを見つけました。 npm-run-allの使い方、学生は自分で公式ウェブサイトを確認できます文書）