微信小程序模版渲染详解


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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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
Snoopy类使用小例子
2008/04/15 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JavaScript错误处理
2015/02/03 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
办公室主任职责范文
2013/11/08 职场文书
主题婚礼策划方案
2014/02/10 职场文书
学习十八大报告感言
2014/02/28 职场文书
美容院经理岗位职责
2014/04/03 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
科技工作者先进事迹
2014/08/16 职场文书
政协委员个人总结
2015/03/03 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers