WeChatアプレットのエントリから土壌へのチュートリアル(01)

1.ミニプログラムの概要

WeChatミニプログラム:これは、ユーザーとサービスを接続する新しい方法であり、WeChatで簡単に取得および配布でき、WeChatプラットフォームで開発されたアプリとして理解できます。

  • ミニプログラムは、ハイブリッド開発モデルの具体的な実現です。
  • wxml(H5に類似)およびwxss(cssに類似)を使用してページレンダリングを構築します。
  • ロジック制御層を介してデータロジックを制御します(vueのビューモデルと同様)。
  • 最下層は、カプセル化によってハードウェアデバイスコール(wifi、Bluetoothなど)を実装します。
  • WeChatログインやオフラインキャッシュなどの一般的なインターフェイスを提供します。

WeChat Miniプログラムの機能:

  1. より強力な機能
  2. ネイティブ体験
  3. 使いやすく安全なWeChatデータを開く
  4. 効率的でシンプルな開発

アプレットおよびウェブページ開発の主な開発言語はJavaScriptです。ウェブページ開発からアプレット開発に移行するための開発コストは高くありませんが、両者にはいくつかの違いがあります。

  1. Web開発者はDOMを使用できますが、小規模なプログラム開発は主にロジックレイヤーによって制御され、domおよびbomインターフェイスがありません
  2. Webページ開発の互換性は主にブラウザー向けですが、アプレットの互換性は主にIOSおよびAndroidのWeChatクライアントを考慮しています。
  3. Web開発にはブラウザと関連する開発ツールの使用のみが必要ですが、WeChatアプレットの開発には、アカウントの申請や特別な開発ツールのダウンロードなどの手順が必要です。

他のアプレットの紹介:
ここに画像の説明を挿入
WeChatアプレットとBaiduアプレットの比較

異なる入り口:WeChatは断片化されており、Baiduは一元化されています。
さまざまな能力:WeChatは強力なソーシャルであり、BaiduはAIを強調しています。
異なるオープン性:WeChatはクローズされ、Baiduはすべてオープンです。


2. WeChat Miniプログラムのリリースプロセス

  1. WeChatパブリックプラットフォームにミニプログラムを登録します。登録が完了したら、情報の改善と開発を同期できます。
  2. 名前、プロフィール写真、紹介、サービス範囲など、ミニプログラムの基本情報を入力します。
  3. 小さなプログラムの開発者のバインドと開発情報の構成が完了したら、開発者は開発者ツールをダウンロードし、開発ドキュメントを参照して小さなプログラムを開発およびデバッグできます。
  4. ミニプログラムの開発が完了したら、レビューのためにWeChatチームにコードを送信します。レビューに合格すると、コードをリリースできます(パブリックベータ中にはリリースできません)。

アカウント申請

登録URL:https : //mp.weixin.qq.com/wxopen/waregister?action=
ここに画像の説明を挿入
step1手順に従って、手順に従って登録します。

開発ツールのダウンロードとインストール

WeChat Developer Tools:2つの開発モードを統合します。公式アカウントのWebページのデバッグと小さなプログラムのデバッグです。

  • 公式アカウントのWebページのデバッグを使用して、開発者はWeChat Webページの承認とWeChat JS-SDKの詳細をデバッグできます
  • アプレットのデバッグを使用すると、開発者はアプレットのAPIとページの開発とデバッグ、コードの表示と編集、アプレットのプレビューとリリース、およびその他の機能を実行できます。

ダウンロードリンク
https :
//developers.weixin.qq.com/miniprogram/dev/devtools/download.html Stable Build(1.03.2006090):ベータ版の不具合が収束した後、安定した
プレリリースRCビルド(1.03)に変換されます.2007151):プレリリースバージョン、大きな機能が含まれています。内部テストにより、安定性は許容されます。
開発バージョンNightly Build:できるだけ早く欠陥を修正して小さな機能をすばやく起動するために使用されます。開発セルフテスト検証、安定性が低いため、
ここに画像の説明を挿入
ここで選択Windows64の安定版ですので、ダウンロード後、段階的にインストールしてください

ここに画像の説明を挿入
ログインページでは、WeChatスキャンコードを使用して開発者ツールにログインできます。開発者ツールは、このWeChatアカウントの情報を使用してアプレットを開発およびデバッグします。この時点で取得されるアカウント情報は、スキャンされたWeChatアカウントです。

ここに画像の説明を挿入
新しいプロジェクトを作成する
ここに画像の説明を挿入
メインフィールドの説明

  • AppID:適用する必要があるアプレットの一意の識別子テスト番号は開発段階で使用できます。
  • バックエンドサービス:サーバー側開発用のデータベースやストレージなどの完全なクラウドサポートを提供します。
  • 言語:ES6またはTypeScriptをサポートします。

プロジェクトのデフォルト構造の紹介
ここに画像の説明を挿入

  • pages:ページのルートディレクトリファイルディレクトリをページの独立したストレージユニットにすることをお勧めします。

  • utils:システムが推奨するツールディレクトリ

  • app.js:グローバルロジックコントロールレイヤー。グローバルデータ属性の宣言、システムログインまたはアップグレード処理、その他のビジネスロジックに使用されます。

  • app.json:ミニプログラムのグローバル構成ファイル。グローバルウィンドウ構成、ルーティング構成などの入力に使用されます。

  • app.wxss:アプレットのグローバルスタイルファイル。

  • project.config.json:プロジェクト構成ファイル。プロジェクト開発のパーソナライズされた構成を保存します

  • sitemap.json:現在のアプレットを取得するときに含めるコンテンツを検索エンジンに通知します。

新しいテストフォルダーを作成し、そのフォルダーの下にテストディレクトリを作成すると、下図に示すような構造が表示されます。
ここに画像の説明を挿入
新しいテスト後のファイル構成:

  1. test.wxml:ページdom構造。
  2. test.json:ページ構成。
  3. test.wxss:ページスタイル。
  4. test.js:ページの論理制御層。

ページルーティング構成:アプレットプロジェクトの各表示ページは、app.jsonのページのアクセスパス(ルート)を構成する必要があります

  • ページ間の切り替えとジャンプには、ルートと同じパスを介したアクセスが必要です。
  • 新しいページを作成した後、IDEは現在のページのルーティング構成をapp.jsonに自動的に生成します。
  • アプレットのホームページのデフォルトは、pages配列の最初のページです。
    ここに画像の説明を挿入

続き
ます、次の記事はこちら

おすすめ

転載: blog.csdn.net/qq_44273429/article/details/108014565