WeChat ミニ プログラムの開発実習 実行可能な WeChat ミニ プログラムを開発する方法を段階的に説明します。

1. 準備

1. ミニプログラムアカウントを登録するには、公開アカウントを登録していないメールアドレスを使用する必要があります。

2. 登録プロセスには多くの認証が必要ですが、審査や公開を行わずにとりあえず開発とテストを行う場合は、ビジネスライセンス番号を入力するだけで済みます。 WeChat 認証を完了する必要はありません。

3. アカウントを登録した後、ログインし、メイン ページの左側のリストで [設定] をクリックし、[設定] ページで [開発設定] を選択すると、開発ツールへのログインに使用される AppID が表示されます。

メインページ

設定ページ

2番目、開発ツール

公式Webサイトから開発ツールをダウンロードできます

開発ツール編集ページ

3 を開始します。プロジェクト

開発者ツールを開き、ミニプログラムオプションを選択し、プロジェクト追加ページに到達します

このとき、前の設定ページのAppIdが使用されます。

プロジェクト ディレクトリ内のファイルが空のフォルダーの場合は、クイック スタート プロジェクトを作成するかどうかを尋ねるメッセージが表示されます。

「はい」を選択すると、開発者ツールが開発ディレクトリに簡単なデモを生成するのに役立ちます。

このデモには、ミニ プログラムの完全な一般的なフレームワークが含まれています。

1. フレームワーク

まず次のディレクトリを見てください:

app.js: ミニプログラムのロジック、ライフサイクル、グローバル変数

app.json: ミニプログラムの公開設定、ナビゲーションバーの色など、許可されません 注

app.wxss: ミニ プログラムのパブリック スタイル、CSS に似ています。

ミニ プログラム ページの構成:

ページの構成

各ミニ プログラム ページは、同じパスにある同じ名前の 4 つの異なるサフィックス ファイルで構成されます (例:index.js、index.wxml、index.wxss)。 、index.json。

WeChat ミニ プログラムの各ページの [パス + ページ名] は app.json のページに記述する必要があり、ページ内の最初のページがミニ プログラムのホームページになります。

パス

これら 4 つのファイルは、機能に応じて 3 つの部分に分けることができます:

構成: json ファイル

論理層: js ファイル

ビュー層: wxss.wxml ファイル

iOS の場合、アプレットJavaScript コードは JavaScriptCore で実行されます

Android では、ミニ プログラムの JavaScript コードは X5 カーネルを通じて解析されます

開発ツールでは、ミニ プログラムの JavaScript コードは nwjs (chrome kernel) で実行されます。したがって、開発ツール上での効果は実際の効果とは異なります。

2。weChatは、主に8つのカテゴリに分割された多くのコンポーネントを提供します。

canvas

には、ビュー、スクロールビュー、ボタンなどの一般的に使用されるコンポーネントが含まれており、マップとフォームも提供されます。

コンポーネントは主にビュー層に属し、htmlと同様にwxmlを通じて構造的にレイアウトされます。 css と同様に、wxss を通じてスタイルを変更します。

コンポーネントの使用構文の例:

これは、通常のビュー スタイルによって変更されたビューです。その他のコンポーネントと関連する使用方法については、公式ドキュメント - 表示するコンポーネント

3、API

ネットワーク

メディアを参照してください。

データ

場所

デバイス

インターフェース

開発インターフェース

ネットワークリクエストを使用するには、まずパブリックプラットフォームにアクセスしてミニプログラムアカウントにログインする必要があり、設定ページで許可されるドメイン名を設定します。ネットワーク リクエストには通常の http リクエストが含まれ、アップロード、ダウンロード、ソケットがサポートされます。基本的に、開発に必要なネットワーク要件を満たしています。

これらの API は論理層に属し、js ファイルに記述されます。

使用例:

wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude varspeed = res.speed var precision = res.accuracy }}) 公式ドキュメント API にアクセスして、他の API の使用法を確認できます。

4. コンパイルして実行します

1. シミュレーターでの効果は実行レベルとは異なります

2。実機

は左側にあります。オプションバーでプロジェクトを選択し、管理者のWeChatアカウントでQRコードをスキャンして実機での実際の効果を確認します

。練習 - アプレットを実行します。

実際のマシンのスクリーンショット (iPhone7 で実行、WeChat バージョン: 6.3.30):

home.jpeg

run.jpeg

機能: できる走行距離、時間の計算、ランニングパスのリアルタイム取得（やや大雑把）

アイデア: 主にWeChatアプレットの位置API wx.getLocation() とマップコンポーネントmapを使用します。

まずタイミング用のタイマーを実装し、wx.getLocation()で座標を取得し、取得した座標を配列に格納し、定期的に座標から走行距離を取得し、それを累積して合計走行距離を取得します。 、座標点も使用します

の接続に関する問題:

1. 現在、地図上に接続線を描く方法がないため、おおよその走行距離を示すために地図上に小さな赤い点を貼り付ける方法を使用しました。比較的荒れた道です。

2. API では火星座標 gcj02 タイプが使用されていますが、取得された座標は国際座標と類似しており、依然として偏差があります。

コアコード:

すべてのコードを github-weChatApp-Run に置いています。ダウンロードして確認するか、スターを付けてください。将来的にはいくつかの最適化アップデートを行います。現時点では、これは単なる学習デモであり、全員がコミュニケーションをとって学習しており、実際のアプリケーションにはさらなる最適化が必要です。

wxml ファイル レイアウト コードと js ファイル ロジック コード

その他の WeChat アプレット開発実践。実行中の WeChat アプレットを開発する方法を段階的に説明します。関連記事については、PHP 中国語 Web サイトをご覧ください。