uni-app は、HBuilder X ツールと WeChat ミニプログラムツールを使用して WeChat ミニプログラムを開発します

HBuilder X ツールと WeChat アプレットツールをダウンロードする方法

ユニアプリとは何ですか

uni-app は、vue.js を使用してすべてのフロントエンドアプリケーションを開発するフレームワークです。開発者は、iOS、Android、H5、およびさまざまな小さなプログラム (WeChat/Alipay/Baidu/Toutiao/QQ/) に公開できるコードのセットを作成します。 DingTalk/淘宝網など）、Kuai App、その他のプラットフォーム。

ユニアプリを選んだ理由は何ですか？

1. 開発者/ケースの追加

2. より強力なクロスプラットフォーム機能と拡張の柔軟性

3. 優れたパフォーマンス経験

4. 豊かな周辺環境

5. 学習コストが低い

6. 開発コストが低い

必要なツール

ユニアプリテクノロジーを使用して WeChat を開発するために必要なツールは、HBuilder X ツールとWeChat アプレットツールです。

HBuilder X ツールと WeChat アプレットツールの概要

HBuilder X ツール:HBuilderX、H は HTML の最初の文字、Builder はコンストラクター、X は HBuilder の次世代バージョンです。ショートとも言いますHX。 これは、エディターと同じくらい軽く、IDE と同じくらい強力な統合バージョンHXです。HBuilder X ツールは拡張性が高く、Java プラグイン、nodejs プラグインをサポートし、多くの vscode プラグインおよびコードブロックと互換性があります。外部コマンドからさまざまなコマンドライン機能を簡単に呼び出したり、ショートカットキーを設定したりすることもできます。他のツール (vscode や sublime など) のショートカットキーに慣れている場合は、メニューの [ツール]-[ショートカットキースキーム] でショートカットキーを切り替えることができます。また、HBuilder Xのプラグインマーケットには豊富なプラグインがあり、作業効率の向上に大きく役立ちます。プラグインをダウンロードしたい場合は、プラグインマーケットからダウンロードできます。プラグインマーケットアドレス:HX

WeChat ミニプログラムツール: WeChat ミニプログラム開発ツールは、WeChat によって公式に開発された開発ツールで、開発者が WeChat ミニプログラムを迅速に開発できるように設計されています。WeChat ミニプログラム開発ツールを通じて、開発者はフロントエンドコードの作成、コードのデバッグ、実機のプレビュー、ミニプログラムのアップロードとリリースなどの一連の機能を完了できます。

WeChat ミニプログラム開発ツールには次の主な機能があります。

コード編集:ミニプログラム開発ツールは、コードエディター、コンソール、デバッグツール、コード管理などを含む完全な開発環境を提供し、コードの編集と管理を容易にします。
実機デバッグ:ミニプログラム開発ツールは、実機でのシミュレートされたデバッグをサポートしており、開発者はコードを WeChat クライアントに直接ロードして、リアルタイムプレビューを行うことができます。
ページプレビュー:ミニプログラム開発ツールには便利なページプレビュー機能があり、QR コードをスキャンして WeChat クライアントで直接ミニプログラムをプレビューできます。
自動保存:ミニプログラム開発ツールはコードを自動的に保存し、保存し忘れによってコードが失われることを防ぎます。
コード圧縮:ミニプログラム開発ツールは、コードを最小サイズに圧縮してミニプログラムの読み込み速度を向上させる自動コード圧縮機能を提供します。

HBuilder X ツールと WeChat アプレットツールをダウンロードする方法

HBuilder X ツールをダウンロードする手順:

1. 公式 Web サイトを開きます: HBuilderX-Efficient Geek Skills

2. 以下の手順に従ってダウンロードします。

公式サイトを開いたら、以下の場所にマウスを置きます。

Windows システムの場合は、次のイメージの場所をクリックしてダウンロードします。

Apple (MacOS) システムの場合は、次の画像の場所をクリックしてダウンロードします。

WeChatミニプログラムツールをダウンロードする手順:

1. 公式ウェブサイトを開きます: WeChat Open Document

2. 「ツール」をクリックします。Windows 7 以降のシステムの場合は、バージョン 1 または 2 をダウンロードできます。Windows 7 システムの場合は、バージョン 2 をダウンロードします。

HBuilderX ツールの使用方法

ステップ 1: HBuilderX を開き、ツールバーの「ファイル」->「新規」->「プロジェクト」をクリックします。操作は以下のようになります。

ステップ 2: [uni-app]を選択し、プロジェクト名を入力し、ストレージパスを選択し、デフォルトのテンプレートを選択し、[作成]をクリックします。具体的な操作は次のとおりです。

最後に: プロジェクトを作成したら、App.vue などのプロジェクトの任意のファイルを開き、[実行] --> [組み込みブラウザーで実行]コマンドを選択します。

WeChatミニプログラムツールの使い方

ステップ 1: ミニプログラム IDE を正常に実行するには、その前にミニプログラム IDE の関連パスを設定する必要があります。次の図に示すように、入力ボックスに WeChat 開発者ツールのインストールパスを入力する必要があります。[実行] --> [ミニプログラムシミュレーターで実行] --> [設定の実行]コマンドを選択し、表示された場所に WeChat ミニプログラム開発者ツールのインストールパスを入力します。

ステップ 2: 実機上の WeChat ミニプログラムでミニプログラムを実行するには、WeChat パブリックプラットフォームでミニプログラムアカウントを申請する必要があります。プロセスは次のとおりです。

1. WeChat パブリックプラットフォームの公式 Web サイトにアクセスし、右上隅にある[今すぐ登録]リンクをクリックします (すでに登録済みの場合は、直接ログインできます。ログイン方法は、自分のアカウントでログインすることもできます)とパスワードを入力するか、WeChat QR コードをスキャンしてログインします)。

2. 「今すぐ登録」リンクをクリックして登録ページに入ります。このページでは、サブスクリプションアカウント、サービスアカウント、ミニプログラム、企業 WeChat の 4 種類のアカウント登録が提供されます。登録するミニプログラムを選択します。ミニプログラム登録ページに入り、関連情報を入力します。アカウント情報を入力した後、下の「登録」ボタンをクリックして、メールアクティベーションページに入ります。このとき、以前のメールアドレスでログインする必要があります手順を実行して、Tencent から送信された公式ミニプログラムアカウントのアクティベーションメールを確認し、アクティベーションリンクをクリックします。アクティベーションリンクをクリックした後、登録プロセスの次のステップに進み、登録対象のタイプを選択し、対象情報と管理者情報を入力します。(件名タイプとして個人を選択するだけです)

3. ミニプログラムアカウントの申請に成功したら、 WeChat パブリックプラットフォームの公式Web サイトにアクセスし、 「開発」-->「開発管理」-->「開発設定」と入力して再度ログインできます。ミニプログラム管理インターフェイス。このページには AppID (ミニプログラム ID) があることがわかります。この ID の取得方法を覚えておいてください。後で必要になります。