微信小プログラムの初めの部分

微信公式チームによると、小プログラムはユーザーとサービスを接続する新しい方法です。もちろん、微信小程序の登場は、微信ソーシャルメディアの地位を強化するためです。その後、支付宝小程序、快应用、そして最近の百度智能小程序、头条小程序などが登場しました。小プログラムの設計はそれほど難しくありませんが、大手企業はすべて小プログラムのブームを狙っており、小プログラムの爆発的な効果を利用して自社を強化しようとしています。もし時間があれば、小プログラムの開発を学んでみることをお勧めします。

準備
ディレクトリ構造
データバインディング
タグのレンダリング
テンプレートの使用
効果のテスト
結論

準備#

準備については特にありません。学ぶ意欲を持つことが重要だと思います。微信公式では、微信 Web 開発者ツールを提供しており、小プログラムの開発や微信公式アカウントのウェブページのデバッグに使用することができます。

ディレクトリ構造#

微信小程序の本体は 3 つのファイルで構成されており、プロジェクトのルートディレクトリに配置する必要があります。具体的な役割は次のとおりです。

app.js：小プログラムのロジック、小プログラムの起動、初期化、バックグラウンドとの切り替え、小プログラムの読み込みエラーイベントのリスニングなど
app.json：小プログラムの共通設定、ページのパスなどの設定
app.wxss：小プログラムの共通スタイルシート（必須ではありません）。

完全な小プログラムページは、次の 4 つのファイルで構成される必要があります。

js ファイル：ページのロジック
wxml ファイル：ページの構造
json ファイル：ページの設定（必須ではありません）
wxss ファイル：ページのスタイル（必須ではありません）

以下は、最も基本的な小プログラムのディレクトリ構造の例です。

│  app.js
│  app.json
│
└─src
    └─pages
            index.js
            index.wxml

もちろん、実際の開発ではスタイルファイルが欠かせません。

データバインディング#

コンポーネントの使用方法については省略します。公式ドキュメントを参照してください。ここでは、微信小程序でのデータバインディングの方法を見てみましょう。次のようにテキストタグを作成します。

<text>微信小程序初始篇...{{text}}</text>

二重中括弧の間の text は、対応する js ファイルで指定されたデータを表します。data 内で text を定義し、初期値を設定します。具体的な例は以下の通りです。

data: {
    text: 'これはテキストの内容です'
}

これで、小プログラムの実行時に text に対応する内容が表示されます。では、どのようにして text の値を動的に設定するのでしょうか？定義された変数に値を設定するために setData メソッドを使用します。具体的な例は以下の通りです。

/**
* ボタンのクリックイベント
*/
btnClick: function() {
    console.log("ボタンがクリックされました");
    //textの値を変更
    this.setData({
        text: "これは新しいテキストの内容です..."
    });
},

これで、定義された変数の値が動的に更新されます。非常に簡単ですね。

タグのレンダリング#

現在、小プログラムで使用できるレンダリングタグは、条件付きの if とループの for です。これらのタグを使用して、いくつかのインターフェースを構築することができます。以下にいくつかの使用方法を示します。

<!-- 条件文 -->
<!-- 条件がtrueの場合に表示され、falseの場合には表示されません。条件は引用符で囲むことに注意してください。-->
<view wx:if="{{true}}">タグのレンダリングの使用...1</view>
<view wx:else>タグのレンダリングの使用...2</view>

<!-- ループ文 -->
<!-- itemとindexはデフォルトで自分で定義できます。forの中は配列形式である必要があります。-->
<view wx:for="{{list}}" wx:for-item="it" wx:for-index="ix" wx:key="{{item.id}}">
  <!-- ループ処理、デフォルトのインデックスはindex、値はitem -->
  {{ix}}-{{it.name}}
</view>

wxタグのパラメータはブール値であり、これを使用してコンポーネントの表示と非表示を制御することができます。wxタグのパラメータは配列であり、配列の内容をループして表示することができます。

テンプレートの使用#

小プログラムでは、テンプレートを定義する方法は 2 つあります。

第 1 の方法：

次のような wxml ファイルを作成します。

<!--header.wxml-->
<text>ヘッダー...</text>

次に、対応するページで include キーワードを使用してインポートします。具体的な例は以下の通りです。

<!-- 定義されたテンプレートをインポート---include -->
<include src="../template/header"/>

第 2 の方法：

wxml ファイルを作成し、template タグを使用してテンプレートを作成し、テンプレート名を指定します。具体的な例は以下の通りです。

<!--footer.wxml-->
<template name="footer1">
フッター1...{{data}}
</template>

<template name="footer2">
フッター2...{{data}}
</template>

次に、ページの対応する wxml で import キーワードを使用してテンプレートをインポートし、is 属性で表示するテンプレートを指定します。この方法では、複数のテンプレートを作成し、使用するときに対応する名前を指定することができます。具体的な例は以下の通りです。

<!-- 定義されたテンプレートをインポート---import -->
<!-- 複数のテンプレートを定義できます。is属性で表示するテンプレートを指定し、dataで動的なデータを設定します。-->
<import src="../template/footer"/>
<template is="footer1" data="{{data:'これはフッターエリアの内容です'}}"/>

効果のテスト#

テストの効果を以下の図に示します。

結論#

この記事は、微信小程序の学習の最初の記事であり、小プログラムの開発モードや特殊な構文の学習など、小プログラムの基礎を理解するためのデモを作成しました。これで、小プログラムの入門ができました。