電卓アプレットの開発方法

この記事では、WeChat アプレットを使用して電卓アプレットを開発する方法を紹介します。一定の参考値があるので、困っている友達は参考にしてください、WeChat アプレット開発を学んでいる友達の役に立てば幸いです!

要約: WeChat アプレットの開発は実際には難しくありません。習得するまでは、それがどれほど強力であるか理解していませんでした。実際、これは私たちの従来の記述方法よりも単純で、高度にカプセル化されており、ルールと仕様によると、記述エクスペリエンスは依然として非常に優れています。

このシンプルな計算ツールと、開発プロセス中に遭遇したいくつかの落とし穴を紹介しましょう。まず、Web 開発ツールやドキュメントなどはインターネット上にたくさんありますので、繰り返しません。もうクラックする必要はありません。WeChat は認証メカニズムを正式に修正しており、認証なしでプレイできます。 APPID. ただし一部機能が制限されます。 WeChat ミニ プログラムの開発は、非常に高度なように思えますが、実際には難しくありません。実際、これは私たちの従来の記述方法よりも単純で、高度にカプセル化されており、ルールと仕様によると、記述エクスペリエンスは依然として非常に優れています。

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

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

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

wxssはWeChatが開発したスタイルファイル形式のセットで、当社のCSSファイルと同等です、記述方法は同じですが、ファイルの拡張子が変更されています以前はどうやって CSS を記述していましたか? WeChat アプレットで CSS を今でもどのように記述しているのでしょうか?

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

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

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

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

pages 属性はページを構成します。最初のページは開始ページです。すべてのページをここで構成する必要があります。ページを作成してここに追加するのを忘れた場合は、ページがジャンプしたときに onLoad メソッドが実行されないため、非常に落ち込むことになるでしょう。私はこれについて知りたくて頭を悩ませ、多くの時間を無駄にしました。

全体構造

下のプロジェクト構造図を見てください。ページはフォルダーであり、通常、ページには js、wxml、および wxss が含まれています。wxml および js ファイルは必要であり、そこに存在することができます。スタイルがありません。

calc (電卓ページ)、history (履歴レコード)、index (ミニプログラムホームページ、スタートアップページ)、logs (ログ情報)、utils (js ツールクラス) 、ログとユーティリティは組み込まれており、使用することも使用しないこともできます。

ソースコード分析

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

電卓のボタンはすべてラベルで作成されており、wxss スタイルを追加するだけです。もちろん、ボタン コンポーネントを直接使用することもできます。

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

#何もする必要はありません。 css について言えば、注意が必要な唯一のことは、WeChat では画面の幅に応じて調整できるサイズ単位 rpx (レスポンシブ ピクセル) が提供されていることです。これは電卓の履歴ページでも使用されます。

には主にコンポーネント

view と text が含まれており、ほとんどのページはこれらで構成されています。二人の仲間。

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

アイコン (アイコン)、コンピューター履歴記録は、アイコンに付属するアイコンの 1 つを静かに使用します。

#マーキング方法調整ページ (ナビゲーター)

主に API

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

ストレージ、ローカル ストレージ、計算履歴の保存は setStorage、getStorage を使用し、また Sync Asynchronous メソッドで終了します

#レンダリング:

##注意事項

すべて 新しいページを作成するときは、次のことを行う必要があります。それを app.josn のページ属性に追加することを忘れないでください。そうしないと、navigateTo を使用して新しいページにジャンプした後、新しいページの onLoad メソッドが実行されません。

WeChat アプレットには window などの JavaScript オブジェクトがないため、JS を記述する前に代替手段を考えてください。たとえば、この計算機は大いに騙されました。本来は eval 関数を使用して式を便利に計算できますが、失敗しました。大きな回り道です。

WeChat アプレットの JS は実際の JS ではなく、wxss も実際の CSS ではないため、記述する際には注意が必要です。

一般的に、WeChat ミニ プログラムは難しいものではなく、公式ドキュメントも非常によく書かれているため、公式ドキュメントをよく読んでください。

この記事は次から転載されています: http://zixun.jisuapp.cn/xcxkfjc/4488.html

推奨: 「

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

」

以上が電卓アプレットの開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。