WeChat ミニプログラム開発 (1) WeChat 開発者ツールとミニプログラムフレームワークの概要-ミニプログラム開発-php.cn

WeChat ミニプログラム開発 (1) WeChat 開発者ツールとミニプログラムフレームワークの概要

coldplay.xixi

リリース： 2021-04-07 09:45:56

転載

4612 人が閲覧しました

まえがき

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

関連する無料学習の推奨事項: WeChat ミニプログラム開発

(1) WeChat 開発者ツール

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

の基本的な機能を紹介します。

モデルの選択: ミニプログラムは iPhone6 の画面サイズを設計標準として使用し、UI 女性に # の画面サイズに従うように要求します。 ##iPhone6 写真を切り取りましょう。
プレビューインターフェイス: ビューレイアウトを作成した後、[コンパイル] をクリックすると、ビューインターフェイスが更新されて表示されます。
リモートデバッグ: モバイルを接続します。および PC 開発ツール調整 (非常に実用的)
コードをアップロード: Tencent サーバーにアップロードし、レビューのために必要な手順を送信します。バージョン番号と注釈情報
5-1: コードサイズ、WeChat 制限は 2M 以内です。 5-2: ES 構文変換。通常、開発中に合法的なドメイン名情報は検証されません。 5-3: ドメイン名情報: ミニプログラムのバックエンドは、リクエストドメイン名、ソケットドメイン名、# を含むサーバードメイン名を構成する必要があります。 ##uploadFile および downloadFile ドメイン名。注: ドメイン名アプレットは https である必要があります
## リソースファイル: プロジェクトに対応するファイルディレクトリ。通常は
##ローカルデータストレージ: ローカルに保存されたデータを表示します。対応する関連 API は
wx.setStorageSync(key,data) です。デバッグの表示: デバッグを容易にするために、ターゲットコンポーネントは子-親階層構造で表示されます。
#上記は、開発プロセス中に WeChat 開発者ツールで一般的に使用される機能です。WeChat 開発者ツールも常に改善されています。今後の開発効率を向上させるためには、

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

ロジック層

小規模プログラム開発フレームワークのロジック層は JavaScript で記述されます。ロジック層はデータを処理してビュー層に送信し、同時にビュー層からのイベントフィードバックを受け取ります。ロジック層は js ファイルに相当し、各ページの js ファイルでは、ページライフサイクル onLoad()、onShow()# などの一連のメソッドがシステムによって提供されます。 # #,onHide(), など、プルダウンして更新 onPullDownRefresh()、ページを一番下まで (プルアップしてロード) onReachBottom()メソッド、共有関数onShareAppMessage()など。
フレームのビューレイヤーは
wxml と wxss で構成され、コンポーネントによって書き込まれ、表示されます。論理層のデータをビューに反映すると同時に、ビュー層のイベントを論理層に送信します。 wxml はアプレットによって提供されるコンポーネントで構成され、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 を追加するために使用されます。プログラムはグローバル構成を実行し、ページファイルのパスの決定、ウィンドウのパフォーマンス、ネットワークタイムアウトの設定、複数のタブの設定などを行います。ページの json ファイルは通常、現在のページのウィンドウパフォーマンスを構成するために使用されます。 app.js は、baseUrl などのグローバル変数を提供するために使用されます。 app.wxss グローバル CSS スタイルを提供します
```
{
  "pages": [                    //页面的路径(在此处可快捷创建页面)
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {                   //视图窗口
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {                   //底部tab
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {           //设置是否超时
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
```
ログイン後にコピー
utils/.json
システムによって提供されるツールクラスは、通常、他のページを呼び出す際に便利なようにエクスポートするパブリックメソッドを作成します。