WeChat ミニプログラムの開発手順を要約して共有する

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

【関連する学習の推奨事項: 小さなプログラム開発チュートリアル】

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

1. 準備

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. プログラム開発

HTML CSS js を学び、WeChat 開発ドキュメントを読めば、WeChat ミニ プログラムの開発を簡単に始めることができます~~

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

// 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 上に登録した関数を呼び出したりすることができます。

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

• 全局配置
  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  详见【全局配置】

• 页面配置
  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
  详见【页面配置】

• 小程序生命周期
  注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
  详细api详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

• 页面生命周期
  注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
  生命周期对象详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 组件
  自带组件库weUI

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

详细信息可具体参考《小程序开发指南》

【相关学习推荐：小程序开发教程】

以上がWeChat ミニプログラムの開発手順を要約して共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。