1 年近く待った後、WeChat ミニ プログラムがついに正式にリリースされました。開発者の友人は、將來的に獨(dú)自のミニ プログラムの作成を申請できます。では、WeChat ミニ プログラムにはどのように申請すればよいのでしょうか?以下では、「Computer Pepsi Network」の編集者が、WeChat アプレットを最初から作成するための実踐的な開発チュートリアルを詳しく紹介します。この手順が初期の開発者にとって役立つことを願(yuàn)っています。

WeChatミニプログラムに申し込む前の準(zhǔn)備:

まず、ミニプログラムアカウントを登録する必要があります。公開アカウントに登録されていないメールアドレスで登録する必要があります。登録プロセスには多くの証明書が必要であり、非常に面倒です。當(dāng)面のテストを行っているだけで公開する予定がない場合は、基本情報(bào)を入力するだけでよく、WeChat 認(rèn)証を完了する必要はありません。

その後、登録したアカウントで公開プラットフォームにログインできるようになります。

次に、メインページの左側(cè)にあるリストで「設(shè)定」をクリックし、設(shè)定ページで「開発設(shè)定」を選択すると、AppIDが表示されます。 AppID を使用して開発ツールに登録し、開発ツールの高度な機(jī)能を使用できます。開発ツールは公式サイトからダウンロードできます。

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

開発者ツールを開き、ミニプログラムオプションを選択して、[プロジェクトを追加]ボタンを直接クリックします。このステップでは、登録時(shí)に使用した AppID を入力できます。

プロジェクト ディレクトリ內(nèi)のファイルが空のフォルダーの場合は、クイック スタート プロジェクトを作成するかどうかを?qū)い亭毳幞氓哗`ジが表示されます。

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

このデモには、完全なミニ プログラムの一般的な枠組みがあります。

1. フレームワーク

まず、公式に提供されているデモに含まれるディレクトリを見てみましょう:

app.js: アプレット ロジック、ライフ サイクル、およびグローバル変數(shù)。

app.json: ミニプログラムの公開設(shè)定、ナビゲーションバーの色などはコメントできません。

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

ミニ プログラム ページの構(gòu)成は次のようになります:

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

WeChatミニプログラムの各ページのパスとページファイル名はapp.jsonのpagesに記述する必要があり、pages配列の最初のページがミニプログラムのホームページになります。

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

構(gòu)成: json ファイル

ロジック層: js ファイル

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

iOS では、アプレットのロジック コードが実行されますin JavaScriptCore Android では、このタスクは X5 カーネルに渡されます。

開発ツールでは、ミニプログラムのJavaScriptコードはNW.js（Chromeカーネル）で実行されます。このことは、開発ツールへの影響と実際の影響との差異にもつながります。

2. コンポーネント

WeChat は主に 8 種類に分けられる多くのコンポーネントを提供します:

これには、ビュー、スクロールビュー、ボタン、フォームなどの一般的に使用されるコンポーネントが含まれ、また、mapcanvas も提供されます

メインコンポーネントこれはビュー レイヤに屬し、HTML と同様に構(gòu)造レイアウトに WXML を使用します。スタイルは WXSS を通じて定義および変更され、その構(gòu)文と使用法は 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 の使用方法を確認(rèn)できます。

コンパイルと実行

1. シミュレーターのデバッグ

シミュレーターを使用して、WeChat が提供する開発者ツールのミニ プログラムの効果を確認(rèn)できます。

ミニ プログラムの基礎(chǔ)となるオペレーティング システムが異なることは前述しましたが、その結(jié)果、シミュレーターへの影響も攜帯電話での影響とは多少異なります。

2. 実デバイスのデバッグ

左側(cè)のオプション バーで項(xiàng)目を選択し、[プレビュー] をクリックすると、管理者の WeChat ID を使用してスキャンすると、実デバイスでの実際の効果を確認(rèn)できます。デバイス。

実際の戦闘: アプレットの実行

実機(jī)実行のスクリーンショット (iPhone 7 で実行、WeChat バージョン: 6.3.30):

まずタイミング用のタイマーを?qū)g裝し、wx.getLocation を通じて座標(biāo)を取得し、取得した座標(biāo)を保存します配列では、座標(biāo)を介して一定の間隔で走行距離が取得され、合計(jì)走行距離を取得するために累積されます。また、座標(biāo)點(diǎn)を介して線も接続されます。問題點(diǎn):

現(xiàn)時(shí)點(diǎn)では地図上に接続線を引く方法がないため、地図上に小さな赤い點(diǎn)を貼り付ける方法を使用しましたが、これは比較的大まかなものです

API は使用した火星座標(biāo)は GCJ02 タイプですが、得られた座標(biāo)は國際座標(biāo)と類似しており、まだ偏差があります。

すべてのコードを GitHub に置いています。ダウンロードしてご覧いただくか、將來的に最適化の更新を行う予定です。現(xiàn)時(shí)點(diǎn)では、これは単なる學(xué)習(xí)デモであり、全員がコミュニケーションをとって學(xué)習(xí)しており、実際のアプリケーションにはさらなる最適化が必要です。

WeChat ミニ プログラムの申請方法と、WeChat ミニ プログラムを最初から作成する方法のチュートリアルの詳細(xì)については、PHP 中國語 Web サイトに注目してください。