微信ミニプログラムの初歩編

微信公式チームによる小プログラムの定義は、ユーザーとサービスをつなぐ全く新しい方法です。もちろん、微信小プログラムの登場は、微信がソーシャルメディアのリーダーとしての地位を強化するためのものです。微信小プログラムの後に誕生した支付宝小プログラム、快アプリ、最近登場した百度スマート小プログラム、今日頭条小プログラムなどを見ると、小プログラムの設計はそれほど難しくなく、巨頭たちは小プログラムの風口を奪い合い、自身の能力を高めるために小プログラムの裂変効果を利用しようとしています。これ以上は言わないでおきますが、時間があれば小プログラムの開発を学んでみてください。

準備作業
ディレクトリ構造
データバインディング
レンダータグ
テンプレートの使用
テスト効果
まとめ

準備作業#

準備作業については特に何もありません。学ぶ心を持っていればそれで十分だと思います。微信公式は微信 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>

その中の 2 対の波括弧の中の text は、対応する js ファイルで指定されたデータを表しています。data の下で text を定義し、初期値を設定します。具体的には以下の通りです：

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

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

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

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

レンダータグ#

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

<!-- 条件文 -->
<!-- 条件が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 つの方法があります：

第一の方法：

wxml ファイルを作成します。以下のようにします：

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

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

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

第二の方法：

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:'これはフッターエリアの内容です'}}"/>

テスト効果#

テスト効果の画像を以下に示します：

まとめ#

この記事は微信小プログラムを学ぶための第一篇であり、簡単なデモを書いて小プログラムの開発モードやいくつかの小プログラム特有の構文を学ぶことができます。これも小プログラムの入門といえるでしょう。