[チュートリアル]簡易計算機を分析し、微信ウィジェットの開発に導入します.
3476 ワード
前に書いてありますが、重点は後ろにあります.
これはチュートリアルで、チュートリアルではありません.
まずDemoの操作図を見て、何なのか見てみましょう.GitHubアドレス(https://github.com/dunizb/wxapp-sCalc)画像の説明
微信小プログラムの内測以来、私のネット情報はほとんど画面に表示され、一瞬、何が起こったのか分からなかった.特にその晩、夜更かしして血を吐いて教程を出た人がいて、私は絞めて、このように努力して、すぐに勉強しないで後で他の人にこの業界で踏み殺されるような気がします.恐ろしくて数日来て、国慶節を待ってやっと風と徹夜して研究することができます.
よし、さあ、だから菜鳥は計算機しか書けない...はい、そうです.いいアイデアは思いつきません.この簡易計算機と、開発中に踏んだ穴を紹介しましょう.
まず、どんなWeb開発者のツールなど、ドキュメントなど、ネット上には多くのものがあります.私は繰り返しません.もう解読する必要はありません.微信の公式は検証メカニズムを修正しました.APPIDがなくても遊ぶことができます.一部の機能は制限されています.
次に、微信の小さなプログラムの開発は実は難しくなくて、掌握する前に私も鋭くなくて、大きく見えます.実は彼は私たちの伝統的な書き方よりも簡単で、高度にパッケージされていて、彼らの規則と規範に従って、書く体験はとてもいいです.
しかし、権限がないため、現在の微信ウィジェットは開発者ツールのシミュレータで実行されており、微信上の真実はどうか分からない.xxx.wxmlファイルとxxx.wxssファイル
wxmlは微信が自分で開発したマークアップ言語で、HTMLファイルと直接見ても大丈夫です.私たちのインタフェースの構築はすべてこのファイルで作成されているので、HTMLラベルがないだけで、wxmlラベルしかありませんが、wxmlラベルの数も少ないからです.画像の説明wxssは微信が自分で開発したスタイルのファイルフォーマットで、私たちのCSSファイルと同じで、書き方も同じで、ただファイルの接尾辞を変えただけで、以前私たちはどのようにCSSを書いたのか、微信のウィジェットの中で私たちは依然としてどのように書いていますか.画像の説明
wxmlにwxssを加えると、私たちが望むインタフェースUIを構築することができます.xxx.jsとxxx.jsonファイル
xxx.jsファイルはJSを書く場所で、xxxごとに.jsは同名のxxxに対応する.wxmlファイル、xxx.jsファイルには、ページにビジネスロジックがなくてもPageオブジェクトが必要です.Page微信Web開発者ツールを入力すると、自動的にいくつかの列空の方法が生成されます.もちろん、実現しなくてもいいですが、骨格を組み立てるだけです.画像の説明
xxx.josnファイルはプロファイルであり、一般的にはルートディレクトリのappなどのグローバル構成で使用される.josnは、ウィジェットがどのページから構成されているか、ウィジェットナビゲーションBarスタイルなどを定義し、属性は名前を見て意味がわかります.画像の説明
pages属性の配置はページで、1つ目はページを起動して、すべてのページはすべてここで配置しなければならなくて、もしあなたが1つのページを建ててここで追加することを忘れたら、あなたはとても憂鬱で、その時にページがジャンプする時onLoad方法が実行できないべきで、私はこの浪費されて多くの時間に耳をつかんで頬をすくめて好奇心が絶えません.いったいこうぞう
次のプロジェクト構造図を見てください.1つのページはフォルダで、1つの面には通常js、wxml、wxssがあります.wxmlとjsファイルは必要です.スタイルはありますか.画像の説明
calc(計算機ページ)、history(履歴)、index(ウィジェットトップページ、起動ページ)、logs(ログ情報)、utils(jsツールクラス)、logsとutilsは持参したもので、あってもなくてもよい.ソース分析
この簡易計算機のインタフェースレイアウトは依然としてオリジナルで、CSS Flexboxレイアウトを採用しており、微信公式も推奨しているようです(公式ドキュメントではFlexboxを使用しています).
計算機のボタンは、すべてラベルで作られています.wxssスタイルを加えればいいです.もちろんbuttonコンポーネントを直接使うこともできます.
wxml:
9 8 7 －
ここでbindtapは、名前を見るとイベントをバインドするために使われていることがわかり、HTMLでonclickを使うのと同じ理屈です.id={{id 9}}二重括弧の値はjsファイルの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は何も言うことはありません.唯一注意しなければならないのは、微信がサイズ単位rpx、responsive pixelを提供していることです.画面幅に応じて適応することができます.公式サイトのドキュメントには詳細な解析があります.コンピュータのhistoryページでも使用しています.画像の説明は主にコンポーネントに関連しています.
主にAPI
注意事項
微信ウィジェットは全体的に難しくなく、公式のドキュメントも非常によく書かれており、公式のドキュメントを真剣に読むといいです.
Helloウィジェットはあなたと一緒に成長します.マイクロ信号:130870319 QQ群:40726600
これはチュートリアルで、チュートリアルではありません.
まずDemoの操作図を見て、何なのか見てみましょう.GitHubアドレス(https://github.com/dunizb/wxapp-sCalc)画像の説明
微信小プログラムの内測以来、私のネット情報はほとんど画面に表示され、一瞬、何が起こったのか分からなかった.特にその晩、夜更かしして血を吐いて教程を出た人がいて、私は絞めて、このように努力して、すぐに勉強しないで後で他の人にこの業界で踏み殺されるような気がします.恐ろしくて数日来て、国慶節を待ってやっと風と徹夜して研究することができます.
よし、さあ、だから菜鳥は計算機しか書けない...はい、そうです.いいアイデアは思いつきません.この簡易計算機と、開発中に踏んだ穴を紹介しましょう.
まず、どんなWeb開発者のツールなど、ドキュメントなど、ネット上には多くのものがあります.私は繰り返しません.もう解読する必要はありません.微信の公式は検証メカニズムを修正しました.APPIDがなくても遊ぶことができます.一部の機能は制限されています.
次に、微信の小さなプログラムの開発は実は難しくなくて、掌握する前に私も鋭くなくて、大きく見えます.実は彼は私たちの伝統的な書き方よりも簡単で、高度にパッケージされていて、彼らの規則と規範に従って、書く体験はとてもいいです.
しかし、権限がないため、現在の微信ウィジェットは開発者ツールのシミュレータで実行されており、微信上の真実はどうか分からない.xxx.wxmlファイルとxxx.wxssファイル
wxmlは微信が自分で開発したマークアップ言語で、HTMLファイルと直接見ても大丈夫です.私たちのインタフェースの構築はすべてこのファイルで作成されているので、HTMLラベルがないだけで、wxmlラベルしかありませんが、wxmlラベルの数も少ないからです.画像の説明wxssは微信が自分で開発したスタイルのファイルフォーマットで、私たちのCSSファイルと同じで、書き方も同じで、ただファイルの接尾辞を変えただけで、以前私たちはどのようにCSSを書いたのか、微信のウィジェットの中で私たちは依然としてどのように書いていますか.画像の説明
wxmlにwxssを加えると、私たちが望むインタフェースUIを構築することができます.xxx.jsとxxx.jsonファイル
xxx.jsファイルはJSを書く場所で、xxxごとに.jsは同名のxxxに対応する.wxmlファイル、xxx.jsファイルには、ページにビジネスロジックがなくてもPageオブジェクトが必要です.Page微信Web開発者ツールを入力すると、自動的にいくつかの列空の方法が生成されます.もちろん、実現しなくてもいいですが、骨格を組み立てるだけです.画像の説明
xxx.josnファイルはプロファイルであり、一般的にはルートディレクトリのappなどのグローバル構成で使用される.josnは、ウィジェットがどのページから構成されているか、ウィジェットナビゲーションBarスタイルなどを定義し、属性は名前を見て意味がわかります.画像の説明
pages属性の配置はページで、1つ目はページを起動して、すべてのページはすべてここで配置しなければならなくて、もしあなたが1つのページを建ててここで追加することを忘れたら、あなたはとても憂鬱で、その時にページがジャンプする時onLoad方法が実行できないべきで、私はこの浪費されて多くの時間に耳をつかんで頬をすくめて好奇心が絶えません.いったいこうぞう
次のプロジェクト構造図を見てください.1つのページはフォルダで、1つの面には通常js、wxml、wxssがあります.wxmlとjsファイルは必要です.スタイルはありますか.画像の説明
calc(計算機ページ)、history(履歴)、index(ウィジェットトップページ、起動ページ)、logs(ログ情報)、utils(jsツールクラス)、logsとutilsは持参したもので、あってもなくてもよい.ソース分析
この簡易計算機のインタフェースレイアウトは依然としてオリジナルで、CSS Flexboxレイアウトを採用しており、微信公式も推奨しているようです(公式ドキュメントではFlexboxを使用しています).
計算機のボタンは、すべてラベルで作られています.wxssスタイルを加えればいいです.もちろんbuttonコンポーネントを直接使うこともできます.
wxml:
9 8 7 －
ここでbindtapは、名前を見るとイベントをバインドするために使われていることがわかり、HTMLでonclickを使うのと同じ理屈です.id={{id 9}}二重括弧の値はjsファイルの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は何も言うことはありません.唯一注意しなければならないのは、微信がサイズ単位rpx、responsive pixelを提供していることです.画面幅に応じて適応することができます.公式サイトのドキュメントには詳細な解析があります.コンピュータのhistoryページでも使用しています.画像の説明は主にコンポーネントに関連しています.
view、text， 。
（button），index “ ”
（icon）, icon 。
（navigator）
（Image），
for ， ， Storage ， Storage
{{log}}
主にAPI
wx.navigateTo， ， ，
Storage， ，
setStorage、getStorage， Sync
注意事項
app.josn pages ， navigateTo onLoad 。
window JavaScript ， JS ， ， eval ， ， 。
JS JS，wxss CSS， 。
bug， ， ， 。
微信ウィジェットは全体的に難しくなく、公式のドキュメントも非常によく書かれており、公式のドキュメントを真剣に読むといいです.
Helloウィジェットはあなたと一緒に成長します.マイクロ信号:130870319 QQ群:40726600