微信小程序模版渲染详解


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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php实现的双色球算法示例
2017/06/20 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
Cookie 小记
2010/04/01 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python进阶篇之字典操作总结
2016/11/16 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
详解python算法常用技巧与内置库
2020/10/17 Python
以下的初始化有什么区别
2013/12/16 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
三年级数学教学反思
2014/01/31 职场文书
查摆剖析材料范文
2014/09/30 职场文书
师德师风事迹材料
2014/12/20 职场文书
公司出纳岗位职责
2015/03/31 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript