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.

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

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

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.

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

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

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

 { 
  "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:

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!