IDEの準備
ダウンロードアドレス: mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
知識の準備
JavaScriptはまだ読む必要があります、推奨チュートリアル: JavaScript初心者チュートリアル
よりゼロから始める
WeChat ミニプログラムには 4 種類のファイルがあります
js ---------- JavaScript ファイル
json -------- ウィンドウの色を担当するプロジェクト設定ファイル、など
wxml ------- HTML ファイルに似ています
wxss ------- CSS ファイルに似ています
ルート ディレクトリにある app という名前のこれら 4 種類のファイルがプログラム エントリ ファイルです。
app.json
このファイルがなければ、WeChat フレームワークがこれを構成ファイルのエントリとして使用するため、IDE はエラーを報告します
このファイルを作成して中かっこを記述するだけです。その中に
後で、ここでアプレット全体のグローバル構成を構成します。ページ構成が記録され、ミニ プログラムのウィンドウの背景色が設定され、ナビゲーション バーのスタイルが設定され、デフォルトのタイトルが設定されます。
app.js
このファイルが必要です。そうでないとエラーが報告されます。ただし、このファイルを作成するだけで、今後はこのファイルでミニ プログラムのライフサイクル関数を監視および処理し、グローバル変数を宣言できます。
app.wxss
このファイルは必要ありません。これは単なるグローバル CSS スタイル ファイルであるため
app.wxml
これは必要ありません。また、これはメイン インターフェイスを参照しません~ミニ プログラムのメイン ページは JSON ファイル内の構成によって決定されるためです
はい、これら 2 つのファイルを使用してプログラムを実行すると、IDE はエラーを報告しません。これは、これが最も単純な WeChat アプレットであることも意味します
プログラム インスタンスを作成する Hello World
app.js ファイルは、プログラム全体のライフ サイクルを管理しますので、次のコード内に追加します: (App IDE に入るときにプロンプトが表示されます)
App({ onLaunch: function () { console.log('App Launch') }, onShow: function () { console. log('App Show') }, onHide: function () { console.log('App Hide') }})
特定の API については次のように説明します
Beautify ActionBar
json ファイルは、 ActionBar の色。以下に示すように、次のコードを追加するだけです。パラメータの説明があります。
Paste_Image.png
Paste_Image.png
{ "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle":"white" }}
Paste_Image.png
それでは、ActionBar がそのように見えるかどうかを見てみましょう!さて、最初のインターフェースの作成を続けましょう
ページを美しくしましょう
ページを美しくするためにwxmlファイルとwxssファイルを使用しました
プログラムコード構造をシンプルに保つために
ランダムな名前で新しいフォルダーを作成する必要がありますここでは、pages という名前です
次に、ランダムな名前で、pages フォルダー内に新しいフォルダーを作成します。ここでは、index.wxml ファイルを作成し、その中に次のコードを記述します
;
次に、index.wxss ファイルを作成し、その中に次のコードを記述します
.window{ color=#4995fa;}
次に、index.js ファイルを作成します
ファイルに次のコードを入力しますPage IDE に入るときにプロンプトが表示されます)
関数は次のように説明されています:
Paste_Image.png
ホームページの構成
Json ファイルはページパスの構成を担当します
そこで、次のコードをそれに追加します
index の意味は、実際には、index.js ファイルを指します
ここで、ページ内のパスについて少し説明する必要があります。実際、ディレクトリ内にその名前の js ファイルが存在しない場合、それは js ファイルを指します。 、エラーが報告されます。
"pages":[ "pages/index/index"],
完了!プログラムを実行してみましょう!
スーパー Hello World
イベント バインディングとページ上のデータを更新する方法を学ぶために
スーパー Hello World を作成しましょう。つまり、テキストをクリックすると色が変わります。
イベントのバインド
index.wxml を開いて、中のコードを次のように変更します
Hellotext>view>
実際には、catchtap="click" を追加することになります
これら 2 つの属性は何を意味しますか?心配しないでください、一つずつ説明します
上の図は、イベントのいくつかの属性名を示しています。ここでは、バブリング イベントと非バブリング イベントを区別するために、赤いボックスでマークされた内容に注意する必要があります。イベントはこれを上位層のイベントに渡す必要があります。
この図を見た後、catchtap="click" の意味を見てみましょう
catch は非バブル イベントを表します
tap はクリック イベントを表します
つまり、これらを合わせると非バブル クリック イベントになります
その後ろにある click は何ですか?
click は実際には単なる変数名です
この名前を使用して、index.js でイベントを受け取る関数をバインドする必要があります
index.js を開いて次の関数を追加します
click:function(){ console.log( "Clicked the text"); },
追加後のコードは次のようになります
つまり、実際には、 click イベントは catchtap="click"
の後に click: function () が続きます。
で構成されますそれでは、プログラムを実行してテキストをクリックしてみましょう
click:function 関数が呼び出され、ログが出力されるかどうかを確認してみましょう
それでは、クリック時に色を変更するロジックを書いてみましょう
それでは、テキストの作成方法を説明します。もちろん色を変更します
それでは、index.wxss
.window-red{ color:#D23933;}
次に、index.js ファイルを入力します
コード内の data:{} これはページのライフサイクル関数ではありません
実際、これで適用される変数は wxml で使用できます
ここで色を適用します
color は、index.wxss のスタイル名です
次に、index.wxml で、class の値を {{color}} に変更します
実際、ここでは、js ファイル内の変数 color の値を使用することを意味します
つまり、値は window に等しいです
次に、index.js ファイルに戻ります
クリックを制御する変数を先頭に適用します
次に、 click:function() 関数に次のコードを追加します
click:function(){ console.log("クリックされたテキスト"); if(flag){ color = "window"; flag = true; this.setData({ color color }); },
変更したコードは図の通りです
はいをクリックした後、color変数の値を変更すると、変更された値が実際にはスタイルの名前になります
インターフェースデータ
ここで問題があります。値を変更しましたが、wxml
ではすぐに有効になりません。そのため、これを呼び出す必要があります
。 .setData() メソッドは値を wxml に同期して、有効にします。すぐに
それでは、プログラムを実行して「Hello」をクリックして、ワンクリックで色が変わるかどうかを確認してみましょう。
最後に、インデックス ディレクトリでも json ファイルを設定できることを付け加えておきます
つまり、各ページは独自のアクションバーの色などを設定できます
ここでの設定はアプリの設定をオーバーライドします。 json ファイル
ソースコード github アドレス https://github.com/pwh0996/WXDemo.git
ついにミニ プログラム ソース コードの波を共有、488 ミニ プログラム デモ ソース コード ダウンロード エリア:
p/36fc7213b5d0
友達体力のある方は読むことをお勧めします。
---
4月22日(土)夜8時30分に知湖で会いましょう:【0基礎週末学習ミニプログラム開発】(https://www. zhihu.com/lives/832919740296101888)、ぜひご参加ください。
ミニプログラムコードを長押しすると「栽培コミューン」が開き、すぐに「WeChatミニプログラム」のライスサークルに参加できます
この記事は最初に私の個人的なWeChat公開アカウントPhilosophy Li Lunで公開されたもので、主に芸術/テクノロジー関連を宣伝していますコンテンツであり、友人に焦点を当てています。
以上が小さなプログラムプロジェクトをゼロから構築する方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。