WeChat アプレットのテンプレート レンダリング

今回は WeChat アプレットのテンプレート レンダリングについて説明します。WeChat アプレットのテンプレート レンダリングを使用する際の 注意事項 について、実際のケースを見てみましょう。

この記事では主にWeChatアプレットテンプレートレンダリングの関連情報を詳しく紹介しますので、興味のある方は参考にしてください

WeChatアプレットのインターフェースプログラムはHTML構文をサポートし、追加のタグが追加されました。 、ビュー、ブロック、寺院など。

テンプレートレンダリング

index.wxml

<view>
 <p>{{helloWord}}</p>
</view>

{{}}に含まれる内容を変数として理解できます。プログラムに{{helloWord}}変数を解析させる方法

この変数をindex.jsに登録します

var json = {
 data:{
  "helloWord" : "hello world"
 }
};
page(json)

その後、ミニ プログラムを実行すると、表示されるのは hello world であることがわかります。つまり、すべての変数が登録インターフェイスのデータに含まれる必要があります

これらの変数を動的に追加する方法を疑問に思う人もいるかもしれません。 ?

var json = {
 data:{
  "helloWorld":""
 },
 //监听页面加载
 onLoad:function(){
  var that = this;
  that.setData({
   "helloWorld":"hello world"
  })
 }
};
page(json)

でも同じ効果を達成することができ、setData()

関数

が呼び出されるたびにページが再レンダリングされます。

index1.wxml

var json = {
 data:{},
 //监听页面加载
 onLoad:function(){
  var that = this;
  that.setData({
   "helloWorld":"hello world"
  })
 }
};
page(json)

index1.js

<view>
 <view wx:for="{{users}}" wx:for-item="{{item}}">
  <view wx:for="{{item}}" wx:for-index="{{key}}" wx:for-item="{{val}}">
    <p>{{key}}=>{{val}}</p>
  </view>
 </view>
 <view id="nameDemo">
  <p>name : {{users[0].name}}</p>
 </view>
 <view>
  <button bindtap="clickFunc">我是测试按钮</button>
 </view>
</view>

thisのスコープを拡張した変数の関数です。

wx:for ループ変数

wx:for-index はループのキー名を表します

wx:for-item はループのキー値を表します
users はページが表示されるときにデータスコープに動的に追加されます。

次に、上に示したように、ビュー内の {{users[0].name}} の値を動的に変更するにはどうすればよいかを見てみましょう。
できると言う人もいるかもしれません。 json を直接再生成して直接レンダリングするだけでは十分ではないでしょうか。

この解決策は可能ですが、呼び出されるたびに再レンダリングされると、レンダリングのパフォーマンスを考慮する必要があります。

解決策はちょっとしたJSのトリックです

{{users[0].name}}

var json={
 data:{},
 //监听页面显示
 onShow:function(){
  vat that = this;
  that.setData({
   users:[
    {
     "name":"name1",
     "age":100
    },
    {
     "name":"name2",
     "age":101
    }
   ]
  });
 }
};
page(json);

の値を変更するだけです。ここで、bindtapはクリック

イベント

をボタン

オブジェクトに追加し、そのクリックに対応する関数を追加します。イベントは clickFunc パラメータです。 イベントのデータ構造は次のとおりです

var json = {
 data:{},
 //监听页面显示
 onShow:function(){
  vat that = this;
  that.setData({
   users:[
    {
     "name":"name1",
     "age":100
    },
    {
     "name":"name2",
     "age":101
    }
   ]
  });
 },
 clickFunc:function(event){
  vat that = this;
  var dataJson = {};
  dataJson["users[0].name"] = "我是谁"; 
  that.setData(dataJson);
 }
}

この記事のケースを読んだ後は、メソッドを習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

CSS3は傾きと回転のアニメーション効果を実装します

インラインブロック要素のデフォルトの間隔をクリアする

CSS3のシャドウボックス-シャドウ関数の使用方法の詳細な説明

以上がWeChat アプレットのテンプレート レンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。