微信小程序模版渲染详解

微信小程序模版渲染详解

更新时间：2018年01月26日 09:34:08   作者：倾听岁月

这篇文章主要为大家详细介绍了微信小程序模版渲染的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序的界面程序支持html语法，多加了一部分标签，如view、block、templete等。

模版渲染

index.wxml

 
{{helloWord}}

其中{{}}里面包含的内容你可以理解为一个变量，怎么让程序解析出{{helloWord}}变量

在index.js 中注册这个变量

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

然后我们运行小程序，就可以发现显示的就是hello world，即所有的变量都需要包含在注册界面的data中

有的人可能会问，怎么去动态的添加这些变量呢？

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

甚至我们还可以

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

都能实现相同效果，每次调用setData()函数的是够都会重新渲染一次页面。

index1.wxml

 
  
    
{{key}}=>{{val}}
  
 
 
  
name : {{users[0].name}}
 
 
  我是测试按钮
 

index1.js

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

其中变量that的作用是对this的作用域的一个扩展。