Rendu du modèle de l'applet WeChat

Cette fois, je vous apporte le rendu du modèle de l'applet WeChat. Quelles sont les précautions lors de l'utilisation du rendu du modèle de l'applet WeChat. Ce qui suit est un cas pratique, jetons un coup d'œil.

Cet article présente principalement en détail les informations pertinentes sur le rendu du modèle d'applet WeChat, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

L'interface de l'applet WeChat Le programme prend en charge la syntaxe HTML et ajoute. quelques balises supplémentaires, telles que vue, bloc, temple, etc.

Rendu du modèle
index.wxml

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

Vous pouvez comprendre le contenu contenu dans {{}} comme une variable. Comment le programme peut-il analyser le {{helloWord}}. variable ?

Enregistrez cette variable dans index.js

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

Ensuite, lorsque nous exécutons le mini programme, nous pouvons constater que ce qui est affiché est hello world, c'est-à-dire que toutes les variables doivent être inclus dans les données de l'interface d'inscription
Certaines personnes peuvent se demander, comment ajouter ces variables dynamiquement ?

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

On peut même

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

obtenir le même effet. La page sera restituée à chaque fois que la fonction setData() est appelée.

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

La fonction de la variable qui est une extension de la portée de ceci.
wx:for boucle une variable
wx:for-index représente le nom de clé de la boucle
wx:for-item représente la valeur clé de la boucle
les utilisateurs sont ajoutés dynamiquement à la fonction de données lorsque la page est affichée dans le domaine.

Regardons maintenant un nouveau problème : comment modifier dynamiquement la valeur de {{users[0].name}} dans la vue id=”nameDemo” ?
Certains diront peut-être de réexaminer directement - Ne suffit-il pas de générer un json et de le restituer directement ?
Cette solution est possible, mais les performances de rendu doivent être prises en compte. S'il est restitué à chaque appel, vous serez bloqué.
La solution est une petite astuce js

Changez uniquement la valeur de {{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);
 }
}

où bindtap donne le bouton objet Un événement click a été ajouté. La fonction correspondant à l'événement click est clickFunc La structure des données de l'événement paramètre est la suivante

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

Je pense que vous maîtrisez la méthode après. en lisant le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à php Autres articles connexes sur le site Web chinois !

Lecture recommandée :

CSS3 implémente des effets d'animation d'inclinaison et de rotation

L'espacement par défaut des éléments de bloc en ligne est effacé

Explication détaillée de l'utilisation de la fonction CSS3 shadow box-shadow

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!