WeChat ミニ プログラムが正式に開始され、多くの場所で画面をスワイプしていることがわかりますが、多くのユーザーは WeChat ミニ プログラムの開発方法を知りませんか?以下は、WeChat ミニ プログラム開発に関する実践的なチュートリアルです。実行可能な WeChat ミニ プログラムを開発する方法を段階的に説明します。一緒に学びましょう。
ソフトウェア名:
WeChat ミニ プログラム開発ツール 2017.09.01 (1.01.170901) 32 ビット公式インストール パッケージ
ソフトウェア サイズ:
3 8MB
更新時間:
2017-09-01
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、インデックス.json。
WeChat アプレットの各ページの [パス + ページ名] は app.json のページに記述する必要があり、ページ内の最初のページがアプレットのホームページになります。
パス
これら 4 つのファイルは、機能に応じて 3 つの部分に分けることができます:
構成: json ファイル
論理層: js ファイル
ビュー層: wxss.wxml ファイル
iOS の場合, ミニ プログラムの JavaScript コードは JavaScriptCore で実行されます
Android では、ミニ プログラムの JavaScript コードは X5 カーネルを通じて解析されます
開発ツールでは、ミニ プログラムの JavaScript コードは nwjs (chrome カーネル) で実行されます。したがって、開発ツール上での効果は実際の効果とは異なります。
2. コンポーネント
WeChat は主に 8 種類のコンポーネントを提供します:
ビューコンテナ、
基本コンテンツ、
フォームコンポーネント、
操作フィードバック、
ナビゲーション、
メディアコンポーネント、
Map、
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 var speed = res.speed var accuracy = res.accuracy } } )
他の API の使用方法を確認するには、公式ドキュメント API にアクセスしてください。
4. コンパイルして実行します
1. シミュレータ
一番下の層は、携帯電話で実行する場合とは多少異なります。2. Really Machine
左側のオプション バーで項目を選択し、[プレビュー] をクリックすると、管理者の WeChat アカウントでスキャンして実際の効果を確認できます。マシン
練習 - 小さなプログラムを実行します。
実際のマシンのスクリーンショット (iPhone7 で実行、WeChat バージョン: 6.3.30):home.jpeg
run.jpeg
機能: できる走行距離、時間の計算、ランニングパスのリアルタイム取得(やや大雑把)
アイデア: 主にWeChatアプレットの位置API wx.getLocation() とマップコンポーネントmapを使用します。
まずタイミング用のタイマーを実装し、wx.getLocation()で座標を取得し、取得した座標を配列に格納し、定期的に座標から走行距離を取得し、それを累積して合計走行距離を取得します。 、座標点も使用します
の接続に関する問題:
1. 現在、地図上に接続線を描く方法がないため、地図上に小さな赤い点を貼り付ける方法を使用しました。おおよその走行軌跡を表示し、大まかな走行軌跡を比較します。 2. API では火星座標 gcj02 タイプが使用されていますが、取得された座標は国際座標と類似しており、依然として偏差があります。
コアコード:すべてのコードを github-weChatApp-Run に置きます。ダウンロードして確認するか、スターを付けてください。将来的にはいくつかの最適化アップデートを行います。現時点では、これは全員が通信して学習するための単なる学習デモです。実際のアプリケーションにはさらに最適化が必要です。 上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連するおすすめ:
WeChat ミニ プログラム Amap SDKの解析以上がWeChat ミニ プログラムの開発: WeChat ミニ プログラムの実行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。