Template rendering of WeChat applet

This time I will bring you the template rendering of the WeChat applet. What are the precautions when using the template rendering of the WeChat applet. The following is a practical case, let's take a look.

This article mainly introduces the relevant information of WeChat applet template rendering in detail, which has certain reference value. Interested friends can refer to the interface of

WeChat applet The program supports HTML syntax and adds some additional tags, such as view, block, temple, etc.

Template rendering
index.wxml

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

You can understand the content contained in {{}} as a variable. How to let the program parse out the {{helloWord}} variable

Register this variable in index.js

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

Then when we run the applet, we can find that what is displayed is hello world, that is, all variables need to be included in the data of the registration interface
Some people may ask, how to add these variables dynamically?

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

We can even

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

achieve the same effect. Each time the setData() function is called, the page will be re-rendered.

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

The function of the variable that is an extension of the scope of this.
wx:for loops a variable
wx:for-index represents the key name of the loop
wx:for-item represents the key value of the loop
users are dynamically added to the data function when the page is displayed in the domain.

Now let’s look at a new problem: how do we dynamically change the value of {{users[0].name}} in the id=”nameDemo” view?
Some may say to directly re- Isn’t it enough to generate a json and render it directly?
This solution is possible, but the rendering performance must be taken into consideration. If it is re-rendered every time it is called, you will be stuck.
The solution is a little js trick

Only change the value of {{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);
 }
}

The bindtap is added to the buttonobject A click event, the function corresponding to the click event is clickFunc. The parameter event data structure is as follows

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the PHP Chinese website article!

Recommended reading:

CSS3 to achieve tilt and rotation animation effects

Inline-block element default spacing clear

Detailed explanation of the use of CSS3 shadow box-shadow function

The above is the detailed content of Template rendering of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!