簡単な計算機を分析すると、WeChat アプレット開発を始めるのに役立ちます

前に書いてありますが、焦点は後ろにあります

これはチュートリアルであり、チュートリアルではありません。

まず、デモ操作アニメーションを見て、GitHub アドレス (https://github.com/dunizb/wxapp-sCalc) を確認してください。

WeChat アプレットの内部テスト以来、私のネットワーク情報は、ほとんど衝撃を受けて、一瞬、何が起こっているのかさえ分かりませんでした。特に、誰かが夜遅くまで起きて血を吐きながら指導したとき、私は今すぐに学ばなければ、この業界で他の人たちに踏みつけられて死ぬだろうと感じて、一生懸命働かずにはいられませんでした。数日間パニックに陥った後、私もついにそれに倣い、国慶節には夜更かしして勉強することができました。

さて、さあ、初心者は電卓しか書けません。 。 。 。そうですね、いいアイデアが思いつきません。この簡単な計算ツールと、開発プロセス中に遭遇したいくつかの落とし穴を紹介しましょう。

まず第一に、Web 開発者ツールやドキュメントなどはインターネット上にたくさんあるので、繰り返しません。WeChat は検証メカニズムを正式に変更しました。 APPIDなしではプレイできませんが、一部の機能が制限されます。

第二に、WeChat ミニ プログラムの開発は実際には難しくありません。習得するまではそれがどれほど強力であるかわかりませんでしたが、非常に高度なものであるように思えました。実際、これは私たちの従来の記述方法よりも単純で、ルールと仕様によれば高度にカプセル化されており、記述エクスペリエンスは依然として非常に優れています。

しかし、現在のWeChatアプレットは許可がないため、開発者ツールのエミュレータ内で実行されており、WeChat上での実際の状況はわかりません。

xxx.wxml ファイルと xxx.wxss ファイル

wxml は、WeChat 自体が開発したマークアップ言語のセットであり、インターフェイスの構造はすべてこのファイルに記述されているため、HTML ファイルとして直接表示できます。 HTMLb タグはなく、wxml タグのみであり、wxml タグの数も非常に少ないです。

wxml は、WeChat 自体が開発したスタイル ファイル形式です。記述方法は同じですが、ファイルの拡張子が変更されています。 WeChat アプレット内にあります。

wxml と wxss を使用すると、必要なインターフェイス UI を構築できます。

xxx.js および xxx.json ファイル

xxx.js ファイルは、JS が記述される場所です。各 xxx.js は、同じ名前の xxx.wxml ファイルに対応します。xxx.js ファイルには、Page オブジェクトが必要です。ページにビジネス ロジックがない場合。 Enter Page WeChat Web Developer Tool は、実装するための一連の空のメソッドを自動的に生成します。もちろん、それらを実装する必要はありません。スケルトンを設定するだけです。

xxx.josn ファイルは、一般にグローバル構成に使用される構成ファイルです。たとえば、ルート ディレクトリの app.josn は、ミニ プログラムがどのページで構成されているか、ミニ プログラムのナビゲーション バーのスタイルなどを定義します。属性の名前を見ることでその意味を知ることができます。

最初のページはスタートアップページです。ページを作成してここに追加するのを忘れると、非常に落ち込むことになります。そのとき、onLoad メソッドはジャンプ中に実行されないため、頭を悩ませて興味を持ち、多くの時間を無駄にしました。

全体構造

ページはフォルダーであり、ページには通常、js、wxml、および wxss が含まれており、wxml および js ファイルは必須であり、スタイルがあってもなくてもかまいません。

calc (電卓ページ)、history (履歴レコード)、index (ミニプログラムホームページ、スタートアップページ)、logs (ログ情報)、utils (js ツールクラス)、ログとユーティリティが組み込まれており、次のことができます必要がありません。

ソースコード分析

このシンプルな電卓インターフェイスのレイアウトは、元のシステムを継承しており、WeChat 公式によって推奨されていると思われる CSS Flexbox レイアウトを使用しています (Flexbox は公式ドキュメントで使用されています)。

電卓のボタンはすべて タグで作成されています。もちろん、ボタン コンポーネントを直接使用することもできます。

wxml:

<viewclass><viewclass>9<viewclass>8<viewclass>7<viewclass>－</viewclass></viewclass></viewclass></viewclass></viewclass>

ここでのバインドタップは、名前からわかるように、HTML で onclick を使用するのと同じように、イベントをバインドするために使用されます。 id={{id9}} 二重中括弧内の値は、j​​s ファイルの data 属性で定義された同じ名前の属性から取得されます

wxss:

.btnGroup {
    display: flex;
    flex-direction: row;
    flex:1;
    width:100%;
    background-color:#fff;}.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top:1px;
    margin-right:1px;}.item:active {
    background-color:#ff0000;}

CSS については何も言うことはありません。注意すべき点は、WeChat ではサイズ単位 rpx (レスポンシブ ピクセル) が提供されており、画面の幅に応じて調整できることです。公式 Web サイトのドキュメントには詳細な分析が記載されています。電卓の履歴ページでも使用します:

主にコンポーネント

• ビューとテキストが含まれており、ほとんどのページはこれら 2 つの仲間で構成されています。

• ボタン（ボタン）、インデックスページのボタン「簡易電卓」
  

• アイコン（アイコン）、コンピュータ履歴記録静かアイコンに付属するアイコンのいずれかを使用します。
  

• マーキングモード調整ページ(ナビゲーター)
  

• ピクチャ(イメージ)、ホームページアバター
  

• forループ、履歴表示ページが使用され、データ表示はストレージから読み込む必要があり、 Storageへの保存は配列です

  <for><viewclass>{{log}}</viewclass></for>

主にAPI

• wx.navigateTo、ナビゲーション、ジャンプ、現在のページで新しいページを開く
  

• ストレージ、ローカルストレージ、計算履歴の保存です使用します
  setStorage、getStorage、および同期終了の非同期メソッドもあります
  

Notes

1. 新しいページを作成するたびに、それをapp.josnのpages属性に忘れずに追加する必要があります。 use navigateTo で新しいページにジャンプした後、新しいページの onLoad メソッドは実行されません。

2. WeChat アプレットにはウィンドウなどの JavaScript オブジェクトがないため、JS を記述する前に代替手段を考えてください。たとえば、この計算機は式を便利に計算するために eval 関数を使用していましたが、結果は大きく騙されました。かなり遠回りしてしまいました。

3. WeChat アプレットの JS は本物の JS ではなく、wxss も本物の CSS ではないため、記述する際には依然として注意が必要です。

4. この電卓には不完全さやバグがありますが、これはすべての機能を実現することに重点が置かれているのではなく、WeChat アプレットの開発方法を理解することに重点が置かれているためです。

さらに分析するには、簡単な計算ツールが WeChat アプレット開発の開始に役立ちます。関連記事については、PHP 中国語 Web サイトに注目してください。