1 年近く待った後、WeChat ミニ プログラムがついに正式にリリースされました。開発者の友人は、将来的に独自のミニ プログラムの作成を申請できます。では、WeChat ミニ プログラムにはどのように申請すればよいのでしょうか?以下では、「Computer Pepsi Network」の編集者が、WeChat アプレットを最初から作成するための実践的な開発チュートリアルを詳しく紹介します。この手順が初期の開発者にとって役立つことを願っています。
WeChatミニプログラムに申し込む前の準備:
まず、ミニプログラムアカウントを登録する必要があります。公開アカウントに登録されていないメールアドレスで登録する必要があります。登録プロセスには多くの証明書が必要であり、非常に面倒です。当面のテストを行っているだけで公開する予定がない場合は、基本情報を入力するだけでよく、WeChat 認証を完了する必要はありません。
その後、登録したアカウントで公開プラットフォームにログインできるようになります。
次に、メインページの左側にあるリストで「設定」をクリックし、設定ページで「開発設定」を選択すると、AppIDが表示されます。 AppID を使用して開発ツールに登録し、開発ツールの高度な機能を使用できます。開発ツールは公式サイトからダウンロードできます。
プロジェクトを開始します:
開発者ツールを開き、ミニプログラムオプションを選択して、[プロジェクトを追加]ボタンを直接クリックします。このステップでは、登録時に使用した AppID を入力できます。
プロジェクト ディレクトリ内のファイルが空のフォルダーの場合は、クイック スタート プロジェクトを作成するかどうかを尋ねるメッセージが表示されます。
「はい」を選択すると、開発者ツールが開発ディレクトリに簡単なデモを生成するのに役立ちます。
このデモには、完全なミニ プログラムの一般的な枠組みがあります。
1. フレームワーク
まず、公式に提供されているデモに含まれるディレクトリを見てみましょう:
app.js: アプレット ロジック、ライフ サイクル、およびグローバル変数。
app.json: ミニプログラムの公開設定、ナビゲーションバーの色などはコメントできません。
app.wxss: CSS に似たミニ プログラムのパブリック スタイル。
ミニ プログラム ページの構成は次のようになります:
各ミニ プログラム ページは、同じパスにある同じ名前を持つ 4 つの異なるサフィックス ファイルで構成されます (index.js、index.wxml、index.wxss など)。 、index.json
WeChatミニプログラムの各ページのパスとページファイル名はapp.jsonのpagesに記述する必要があり、pages配列の最初のページがミニプログラムのホームページになります。
これら 4 つのファイルは、機能に応じて 3 つの部分に分けることができます:
構成: json ファイル
ロジック層: js ファイル
ビュー層: wxss.wxml ファイル
iOS では、アプレットのロジック コードが実行されますin JavaScriptCore Android では、このタスクは X5 カーネルに渡されます。
開発ツールでは、ミニプログラムのJavaScriptコードはNW.js（Chromeカーネル）で実行されます。このことは、開発ツールへの影響と実際の影響との差異にもつながります。
2. コンポーネント
WeChat は主に 8 種類に分けられる多くのコンポーネントを提供します:
これには、ビュー、スクロールビュー、ボタン、フォームなどの一般的に使用されるコンポーネントが含まれ、また、mapcanvas も提供されます
メインコンポーネントこれはビュー レイヤに属し、HTML と同様に構造レイアウトに WXML を使用します。スタイルは WXSS を通じて定義および変更され、その構文と使用法は CSS に似ています。文法インスタンスを使用するコンポーネント:
& lt; & gt;
3. API
データ
開発インターフェイス
を含む通常の HTTPS リクエストに加えて、アップロード、ダウンロード、およびソケットをサポートしており、基本的に開発に必要なネットワーク要件を満たしています。
これらの 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 の使用方法を確認できます。
コンパイルと実行
1. シミュレーターのデバッグ
シミュレーターを使用して、WeChat が提供する開発者ツールのミニ プログラムの効果を確認できます。
ミニ プログラムの基礎となるオペレーティング システムが異なることは前述しましたが、その結果、シミュレーターへの影響も携帯電話での影響とは多少異なります。
2. 実デバイスのデバッグ
左側のオプション バーで項目を選択し、[プレビュー] をクリックすると、管理者の WeChat ID を使用してスキャンすると、実デバイスでの実際の効果を確認できます。デバイス。
実際の戦闘: アプレットの実行
実機実行のスクリーンショット (iPhone 7 で実行、WeChat バージョン: 6.3.30):
まずタイミング用のタイマーを実装し、wx.getLocation を通じて座標を取得し、取得した座標を保存します配列では、座標を介して一定の間隔で走行距離が取得され、合計走行距離を取得するために累積されます。また、座標点を介して線も接続されます。問題点:
現時点では地図上に接続線を引く方法がないため、地図上に小さな赤い点を貼り付ける方法を使用しましたが、これは比較的大まかなものです
API は使用した火星座標は GCJ02 タイプですが、得られた座標は国際座標と類似しており、まだ偏差があります。
すべてのコードを GitHub に置いています。ダウンロードしてご覧いただくか、将来的に最適化の更新を行う予定です。現時点では、これは単なる学習デモであり、全員がコミュニケーションをとって学習しており、実際のアプリケーションにはさらなる最適化が必要です。
WeChat ミニ プログラムの申請方法と、WeChat ミニ プログラムを最初から作成する方法のチュートリアルの詳細については、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
