Vorlagendarstellung des WeChat-Applets

Dieses Mal bringe ich Ihnen das Vorlagen-Rendering des WeChat-Applets Vorsichtsmaßnahmen Das Folgende ist ein praktischer Fall, schauen wir uns das an.

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Rendern von WeChat-Applet-Vorlagen ausführlich vorgestellt, die einen gewissen Referenzwert haben.

Die Schnittstelle des WeChat-Applets Das Programm unterstützt die HTML-Syntax und fügt hinzu einige zusätzliche Tags, wie z. B. Ansicht, Block, Tempel usw.

Vorlagenrendering
index.wxml

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

Sie können den in {{}} enthaltenen Inhalt als Variable verstehen. Wie kann das Programm das {{helloWord}} analysieren? Variable?

Diese Variable in index.js registrieren

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

Wenn wir dann das Miniprogramm ausführen, können wir feststellen, dass „Hallo Welt“ angezeigt wird, das heißt, alle Variablen müssen dies tun in die Daten der Registrierungsschnittstelle aufgenommen werden
Einige Leute fragen sich vielleicht, wie man diese Variablen dynamisch hinzufügt?

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

Wir können sogar

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

den gleichen Effekt erzielen. Die Seite wird jedes Mal neu gerendert, wenn die Funktion setData() aufgerufen wird.

index1.wxml

<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>

index1.js

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

Die Funktion der Variablen, die eine Erweiterung des Umfangs davon darstellt.

wx:for-Schleifen eine Variable
wx:for-index stellt den Schlüsselnamen der Schleife dar
wx:for-item stellt den Schlüsselwert der Schleife dar
users wird dynamisch zur Datenfunktion hinzugefügt wenn die Seite in der Domain angezeigt wird.

Sehen wir uns nun ein neues Problem an: Wie ändern wir dynamisch den Wert von {{users[0].name}} in der Ansicht mit id="nameDemo" oben?

Manche sagen vielleicht „to“. direkt re- Reicht es nicht aus, einen JSON zu generieren und ihn direkt zu rendern?
Diese Lösung ist möglich, aber die Renderleistung muss berücksichtigt werden. Wenn sie bei jedem Aufruf neu gerendert wird, bleiben Sie hängen.
Die Lösung ist ein kleiner JS-Trick

Ändern Sie nur den Wert von {{users[0].name}}

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);
 }
}

wobei bindtap den Button

Objekt Ein Klick--Ereignis wurde hinzugefügt. Die dem Klick-Ereignis entsprechende Funktion lautet clickFunc. Die Parameter-Ereignisdatenstruktur lautet wie folgt:

Ich glaube, Sie beherrschen die Methode Lesen Sie den Fall in diesem Artikel. Weitere spannende Dinge finden Sie unter php Andere verwandte Artikel auf der chinesischen Website!

 { 
  "type": "tap", 
  "timeStamp": 1252, 
  "target": { 
   "id": "tapTest", 
   "offsetLeft": 0, 
   "offsetTop": 0
  }, 
  "currentTarget": { 
   "id": "tapTest", 
   "offsetLeft": 0, 
   "offsetTop": 0, 
   "dataset": { 
   "hi": "MINA" 
   } 
  }, 
  "touches": [{ 
   "pageX": 30, 
   "pageY": 12, 
   "clientX": 30, 
   "clientY": 12, 
   "screenX": 112, 
   "screenY": 151 
  }], 
  "detail": { 
   "x": 30, 
   "y": 12 
  } 
 }

Empfohlene Lektüre:

CSS3 implementiert Neigungs- und Rotationsanimationseffekte

Der Standardabstand von Inline-Blockelementen wurde gelöscht

Detaillierte Erläuterung der Verwendung der CSS3-Shadow-Box-Shadow-Funktion

Das obige ist der detaillierte Inhalt vonVorlagendarstellung des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!