この記事は、WeChat ミニ プログラム開発に関する関連知識(shí)を提供します. 主に、準(zhǔn)備作業(yè)、フレームワークの導(dǎo)入、プログラム開発、設(shè)計(jì)仕様など、WeChat ミニ プログラム開発の手順を紹介します。それは誰(shuí)にとっても役立つでしょう。

【関連する學(xué)習(xí)の推奨事項(xiàng): 小さなプログラム開発チュートリアル】

この記事では、WeChat アプレットを開発する手順について簡(jiǎn)単に説明します。參照してください。詳細(xì)については、WeChat 開発ドキュメントを參照してください

1. 準(zhǔn)備

1: 登録 https://mp.weixin.qq.com/wxopen/waregister?action=step1
WeChat パブリックに登録していますか? プラットフォームの電子メール アドレスを使用して WeChat パブリック アカウントを登録し、アカウントを申請(qǐng)し、ガイドラインに従って情報(bào)を入力し、対応する資料を提出すると、獨(dú)自のミニ プログラム アカウントを持つことができます。登録が完了したらログインします。

2: https://mp.weixin.qq.com

メニューの「設(shè)定」-「開発設(shè)定」でミニ プログラムの AppID を確認(rèn)できます。ミニ プログラムの AppID は、ミニ プログラム プラットフォームの ID カードに相當(dāng)します。この AppID は、後ほどさまざまな場(chǎng)所で使用します (サービス アカウントやサブスクリプション アカウントの AppID とは異なる必要があることに注意してください)。ミニ プログラム アカウントを取得したら、ミニ プログラムを開発するためのツールが必要になります。
公式チュートリアルに従って開発します https://developers.weixin.qq.com/miniprogram/dev/framework/

3: 開発ツールをインストールします

開発者ツールのダウンロードに移動(dòng)します開発者ツールの詳細(xì)については、「開発者ツールの概要」を參照してください。ミニ プログラム開発者ツールを開き、WeChat を使用して QR コードをスキャンして開発者ツールにログインし、最初のミニ プログラムを開発する準(zhǔn)備を整えましょう。
開発ツールに関する関連情報(bào)については、[WeChat 開発者ツール] を通じて詳細(xì)をご覧ください。

4: 最初のミニ プログラムを開きます

新しいプロジェクトを作成し、ミニ プログラム プロジェクトを選択します。コード ストレージのハード ドライブ パスを選択し、申請(qǐng)したばかりのアプレットの AppID を入力し、プロジェクトに適切な名前を付けて、最後に「クイックスタート プロジェクトの作成」にチェックを入れます (注: このオプションを使用するには、空のディレクトリを選択する必要があります) ) をクリックして、「OK」をクリックすると、最初のアプレットが表示されます。上部メニューの「コンパイル」をクリックして、IDE で最初のアプレットをプレビューします。

5: コンパイル プレビュー

ツールの [コンパイル] ボタンをクリックします。ツールの左側(cè)にあるシミュレーター インターフェイスで、この小さなプログラムのパフォーマンスを確認(rèn)できます。プレビュー ボタンを使用して WeChat をスキャンします。スキャンして攜帯電話で最初のミニ プログラムを體験してください。

上記のセクションの內(nèi)容は、WeChat オープン ドキュメントの [スタート]-[スタート] で確認(rèn)できます。

2. フレームワークの紹介

ミニ プログラム開発フレームワークの目標(biāo)は、開発者が可能な限り最もシンプルかつ効率的な方法で、WeChat でネイティブ APP エクスペリエンスを備えたサービスを開発できるようにすることです。

ミニ プログラム フレームワーク システム全體は、ロジック レイヤー (App Service) と ビュー レイヤー (ビュー) の 2 つの部分に分かれています。このアプレットは、獨(dú)自のビュー レイヤー記述言語(yǔ) WXML および WXSS と JavaScript ベースのロジック レイヤー フレームワークを提供し、ビュー レイヤーとロジック レイヤー間のデータ送信およびイベント システムを提供するため、開発者はデータとロジックに集中できます。

レスポンシブ データ バインディング
フレームワークの中核は、データとビューを非常に簡(jiǎn)単に同期できるレスポンシブ データ バインディング システムです。データを変更する場(chǎng)合、論理レイヤー內(nèi)のデータを変更するだけで済み、それに応じてビュー レイヤーも更新されます。

ページ管理
フレームワークはミニ プログラム全體のページ ルーティングを管理し、ページ間のシームレスな切り替えを可能にし、ページに完全なライフ サイクルを與えます。開発者が行う必要があるのは、ページのデータ、メソッド、ライフサイクル関數(shù)をフレームワークに登録することだけであり、その他の複雑な操作はすべてフレームワークによって処理されます。

基本コンポーネント
フレームワークは、基本コンポーネントのセットを提供します。これらのコンポーネントには、WeChat スタイルのスタイルと特別なロジックが付屬しています。開発者は、基本コンポーネントを組み合わせて強(qiáng)力なコンポーネントを作成できます。WeChat アプレット。

リッチ API
フレームワークは、WeChat ネイティブ API の豊富なセットを提供し、ユーザー情報(bào)の取得、ローカル ストレージ、支払い機(jī)能など、WeChat が提供する機(jī)能を簡(jiǎn)単にアクティブ化できます。 。

3. プログラム開発

HTML CSS js を?qū)Wび、WeChat 開発ドキュメントを読めば、WeChat ミニ プログラムの開発を簡(jiǎn)単に始めることができます~~

• Entry
  各アプレットは、app.js の App メソッドを呼び出して、アプレット インスタンスの登録、ライフ サイクル コールバック関數(shù)のバインド、エラー監(jiān)視およびページの存在監(jiān)視関數(shù)などをバインドする必要があります。

//?app.jsApp({
??onLaunch?(options)?{
????//?Do?something?initial?when?launch.
??},
??onShow?(options)?{
????//?Do?something?when?show.
??},
??onHide?()?{
????//?Do?something?when?hide.
??},
??onError?(msg)?{
????console.log(msg)
??},
??globalData:?'I?am?global?data'})

ミニ プログラム全體には、すべてのページで共有される App インスタンスが 1 つだけあります。開発者は、getApp メソッドを通じてグローバルに一意な App インスタンスを取得したり、App 上のデータを取得したり、開発者が App 上に登録した関數(shù)を呼び出したりすることができます。

//?xxx.jsconst?appInstance?=?getApp()console.log(appInstance.globalData)?//?I?am?global?data

• 全局配置
  小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
  詳見【全局配置】

• 頁(yè)面配置
  每一個(gè)小程序頁(yè)面也可以使用同名 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。
  詳見【頁(yè)面配置】

• 小程序生命周期
  注冊(cè)小程序。接受一個(gè) Object 參數(shù)，其指定小程序的生命周期回調(diào)等。
  詳細(xì)api詳見https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

• 頁(yè)面生命周期
  注冊(cè)小程序中的一個(gè)頁(yè)面。接受一個(gè) Object 類型參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
  生命周期對(duì)象詳見https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 組件
  自帶組件庫(kù)weUI

• API
  豐富的api
  https://developers.weixin.qq.com/miniprogram/dev/api/

詳細(xì)信息可具體參考《小程序開發(fā)指南》

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

以上がWeChat ミニプログラムの開発手順を要約して共有するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。