微信小程序模版渲染详解


Posted in Javascript onJanuary 26, 2018

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

模版渲染
index.wxml

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

其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{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

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

其中变量that的作用是对this的作用域的一个扩展。
wx:for 循环一个变量
wx:for-index 代表循环的键名
wx:for-item 代表循环的键值
users 在页面显示的时候动态的添加到了data作用域中。

现在我们再来看一个新的问题 如上id=”nameDemo” view中{{users[0].name}} 这个值我们怎么去动态的更改问题
有的可能说直接重新生成一个json直接渲染进去不就行了?
这种方案是可以的,但是要考虑到渲染的性能呀,如果每次调用都重新渲染一次,卡死你。
解决方案就是js的小技巧

只更改{{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);
 }
}

其中bindtap 给button对象添加了一个点击事件,点击事件对应的函数是clickFunc 参数event数据结构如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue环境搭建简单教程
Nov 07 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
微信小程序如何获取用户信息
Jan 26 #Javascript
vue实现前进刷新后退不刷新效果
Jan 26 #Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 #Javascript
微信小程序实现图片压缩功能
Jan 26 #Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 #Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 #Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python实现端口复用实例代码
2014/07/03 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python实现图片转字符画的示例
2017/08/22 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python操作json的方法实例分析
2018/12/06 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
平面设计专业大学生职业规划书
2014/03/12 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
西双版纳导游词
2015/02/03 职场文书
党支部综合考察意见
2015/06/01 职场文书
毕业实习单位意见
2015/06/04 职场文书
运动会加油稿
2015/07/22 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书