小さなプログラムプロジェクトをゼロから構築する方法を教えます

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 サイトの他の関連記事を参照してください。