WeChatミニプログラム開発シリーズ(1) 開発準備を詳しく解説

この記事では、WeChat ミニプログラム開発シリーズ (1) 開発準備について詳しく説明します

1: 開発準備

1 WeChat 開発者アカウントを登録します

ログイン: https://mp.weixin.qq.com / 登録するには

現在、WeChat ミニ プログラム アカウントの登録は、企業や組織などの個人のみがサポートされています。登録の詳細については、次のリンクを参照してください:

http://kf.qq.com/faq/ 140806zARbmm161103r6vmiA.html

注: WeChat ミニ プログラムの開発を学ぶために、このアドレスを参照してテスト アカウントを登録することができます:

II WeChat 開発者ツールのダウンロード

改訂のためWeChat パブリック プラットフォームのオリジナルは、https://mp.weixin.qq.com/ からダウンロードできます。WeChat アプレット開発ツールを Wiki から無料でダウンロードすることはできなくなりました。

次の Web サイトで QR コードをスキャンして開発ツールをダウンロードするには、WeChat アプレット開発アカウントが必要です。

https://mp.weixin.qq.com/debug/wxadoc/introduction/#Login

さらに、開発を学習しているだけの場合は、Baidu で WeChat アプレット開発ツールを検索し、共有されているツールをダウンロードできます。ネチズンたち。

2: 開発ツールの使用の概要

1: 図 1 に示すように、PC デスクトップで WeChat アプレット開発ツール (WeChat Web 開発者ツール) を開きます。図 2 に示すように、WeChat 1 で画像をスキャンし、図 3 に示すように、最初の項目「ローカル ミニ プログラム プロジェクト」を選択します。 (開発ツールのバージョンが低すぎる場合、スキャン中にエラーが報告されます。まず開発ツールをアップグレードしてください。開発ツールは自動的にバージョンをチェックし、自動的にアップグレードします。)

図 2

図 3

3: 図 3 で、初めてプロジェクトを作成する場合は、「プロジェクトを追加」を選択してください。それ以外の場合は、既に追加されているプロジェクトを選択してください。図4に示すように、「プロジェクトの追加」を選択します。

図 4

4: 図 4 では、開発を学習するだけの場合は、[No AppID] を選択し、プロジェクト名を入力し、プロジェクト ディレクトリを選択して、[Add Project] をクリックしてください。ボタン。図 5 に示すように、WeChat アプレット開発ツールのメイン インターフェイスに入ります。

図 5

5: 図 5 のツールの左上隅にある [編集] をクリックすると、図 6 に示すように、ツールは編集モード インターフェイスに入ります

図 6

6: 図 5 の左上隅にある [デバッグ] ツールをクリックすると、図 7 に示すように、ツールはデバッグ モード インターフェイスに入ります

図 7

7: 図 7 で、[バックステージ] をクリックします。ツールの左下隅にある をクリックし、電話がかかってくるとプログラムがシミュレートすると、図 8 に示すように、WeChat アプレットはバックグラウンド状態に入ります

図 8

3: プロジェクト ディレクトリ構造

1 : 以下の図 1 に示すように、WeChat アプレット開発ツールを開き、編集モードに入ります

図 9

1: このプロジェクトは主に、pages/firstPage、pages/index、pages/logs、これらのフォルダーで構成されています。これらのフォルダには主にミニプログラム全体のインターフェース情報が記述されています。

各ファイルは基本的に、.js、.wxml、.wxss、.json およびその他のファイルに分割できます。

例:

index.js: インデックス ページの論理情報を記述します (類似: js コード)

index.wxml: インデックス ページのレイアウト情報を記述します (類似: HTML ページ レイアウト)

index .wxss: インデックスを説明します。 ページ レイアウト スタイル情報 (類似: CSS 情報)

2: 全体的なプロジェクト構成情報:

3 つのファイルで構成されます: app.js、app.json、app.wxss

app.json: 図 1 に示すように、プロジェクト全体のページ情報 (「ページ」で記述) を記述します。「ウィンドウ」は、.json の場合、主にプロジェクト全体の背景、ナビゲーション バー、その他のスタイルを記述します。フォルダ内のファイルに同じ記述がある場合、「ウィンドウ」に記述されている情報が上書きされます。

app.wxss: 図2に示すように、主にプロジェクトの全体的なスタイルを説明します

図10

app.js: 主にプロジェクトのエントリロジックを説明し、主にユーザーログイン後のいくつかの情報を説明します、図 3 に示すようなもの

図 11

以上がWeChatミニプログラム開発シリーズ(1) 開発準備を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。