まえがき

いつもぬるぬるしていた WeChat ミニ プログラムが 2018 年を迎えます。 2 度目の春、私の記憶では 小游戲 の出現(xiàn)とともに、春の雨後のキノコのように何千萬もの WeChat ミニプログラムが誕生しました。私たちの視界。この大きな波を受けて、私の會社もニーズの一部を WeChat ミニ プログラムに移行し始めました。次に、最近の Calendar Check-in アプレットの開発プロセスと遭遇した問題について、いくつかの記事で紹介します。

関連する無料學(xué)習(xí)の推奨事項(xiàng): WeChat ミニ プログラム開発

(1) WeChat 開発者ツール

#ミニ プログラム チームは、獨(dú)自の開発ツールである WeChat 開発者ツールを立ち上げました。現(xiàn)在、WeChat 開発者ツールはまだ継続的に改善されており、ミニ プログラムを開発する際には常に更新する必要があることがよくあります。フォーラムでもこれについての不満の記事が多く、バグも多く、筆者も開発中に騙されていました。筆者は Android 開発者であり、この種のビジュアル プログラミングには慣れているため、Webstrom などの開発ツールを選択しませんでした 次に、WeChat 開発者ツール

の基本的な機(jī)能を紹介します。

#

1. モデルの選択: ミニ プログラムは iPhone6 の畫面サイズを設(shè)計(jì)標(biāo)準(zhǔn)として使用し、UI 女性に # の畫面サイズに従うように要求します。 ##iPhone6 寫真を切り取りましょう。
2. プレビュー インターフェイス: ビュー レイアウトを作成した後、[コンパイル] をクリックすると、ビュー インターフェイスが更新されて表示されます。
3. リモート デバッグ: モバイルを接続します。および PC 開発ツール 調(diào)整 (非常に実用的)
4. コードをアップロード: Tencent サーバーにアップロードし、レビューのために必要な手順を送信します。バージョン番號と注釈情報(bào)
5. 5-1: コード サイズ、WeChat 制限は 2M 以內(nèi)です。 5-2: ES 構(gòu)文変換。通常、開発中に合法的なドメイン名情報(bào)は検証されません。 5-3: ドメイン名情報(bào): ミニ プログラムのバックエンドは、リクエスト ドメイン名、ソケット ドメイン名、# を含むサーバー ドメイン名を構(gòu)成する必要があります。 ##uploadFile および downloadFile ドメイン名。 注: ドメイン名アプレットは https である必要があります
#コンソール: 出力情報(bào)の印刷、便利なデバッグ
6. ## リソース ファイル: プロジェクトに対応するファイル ディレクトリ。通常は
ブレークポイント デバッグを?qū)g行できます
7. ##ローカル データ ストレージ: ローカルに保存されたデータを表示します。対応する関連 API は
8. wx.setStorageSync(key,data) です。 デバッグの表示: デバッグを容易にするために、ターゲット コンポーネントは 子-親階層構(gòu)造で表示されます。
9. #上記は、開発プロセス中に WeChat 開発者ツールで一般的に使用される機(jī)能です。WeChat 開発者ツールも常に改善されています。今後の開発効率を向上させるためには、
開発プロセス中に発生した問題を継続的にミニプログラムチームにフィードバックして最適化する必要もあります。開発プロセス中に、自分の習(xí)慣に応じて他の開発ツールを選択することもできます。

(2) アプレット フレームワークとディレクトリ構(gòu)造の概要

• ロジック層
  
  

  小規(guī)模プログラム開発フレームワークのロジック層は JavaScript で記述されます。 ロジック層はデータを処理してビュー層に送信し、同時にビュー層からのイベント フィードバックを受け取ります。ロジック層は js ファイルに相當(dāng)し、各ページの js ファイルでは、ページ ライフ サイクル onLoad()、onShow()# などの一連のメソッドがシステムによって提供されます。 # #,onHide(), など、プルダウンして更新 onPullDownRefresh()、ページを一番下まで (プルアップしてロード) onReachBottom()メソッド、共有関數(shù)onShareAppMessage()など。

  
  
ビュー レイヤー
• 
  
  フレームのビュー レイヤーは

  wxml と wxss で構(gòu)成され、コンポーネントによって書き込まれ、表示されます。 論理層のデータをビューに反映すると同時に、ビュー層のイベントを論理層に送信します。 wxml はアプレットによって提供されるコンポーネントで構(gòu)成され、wxss は css スタイルです。
  
  

• app ファイル
  
  ##app.json <span style="color:rgb(199,37,78);font-family:Consolas, Inconsolata, Courier, monospace;letter-spacing:.2px;background-color:rgb(249,242,244);"></span> ファイルは WeChat を追加するために使用されます。プログラムはグローバル構(gòu)成を?qū)g行し、ページ ファイルのパスの決定、ウィンドウのパフォーマンス、ネットワーク タイムアウトの設(shè)定、複數(shù)のタブの設(shè)定などを行います。ページの json ファイルは通常、現(xiàn)在のページのウィンドウ パフォーマンスを構(gòu)成するために使用されます。 app.js は、baseUrl などのグローバル変數(shù)を提供するために使用されます。 app.wxss グローバル CSS スタイルを提供します
  
  

  {
  ??"pages":?[????????????????????//頁面的路徑(在此處可快捷創(chuàng)建頁面)
  ????"pages/index/index",
  ????"pages/logs/index"
  ??],
  ??"window":?{???????????????????//視圖窗口
  ????"navigationBarTitleText":?"Demo"
  ??},
  ??"tabBar":?{???????????????????//底部tab
  ????"list":?[{
  ??????"pagePath":?"pages/index/index",
  ??????"text":?"首頁"
  ????},?{
  ??????"pagePath":?"pages/logs/logs",
  ??????"text":?"日志"
  ????}]
  ??},
  ??"networkTimeout":?{???????????//設(shè)置是否超時
  ????"request":?10000,
  ????"downloadFile":?10000
  ??},
  ??"debug":?true
  }

• utils/.json
  システムによって提供されるツール クラスは、通常、他のページを呼び出す際に便利なようにエクスポートするパブリック メソッドを作成します。
  
  

(3) 結(jié)論

この記事では、WeChat 開発者ツールとミニ プログラム フレームワーク、WeChat 開発ドキュメントについて簡単に紹介します。関連機(jī)能の紹介は次のとおりです。とても詳しいです。次に、カレンダー チェックイン アプレットの開発を開始します。

関連する學(xué)習(xí)に関する推奨事項(xiàng):

小プログラム開発チュートリアル

以上がWeChat ミニ プログラム開発 (1) WeChat 開発者ツールとミニ プログラム フレームワークの概要の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。