微信小程序模版渲染详解


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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
webstorm+vue初始化项目的方法
Oct 18 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
实现vuex原理的示例
Oct 21 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邮件发送,php发送邮件的类
2011/03/24 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
求职自荐书范文
2013/12/04 职场文书
行政助理的岗位职责
2014/02/18 职场文书
公司董事长岗位职责
2014/06/08 职场文书
毕业生面试求职信
2014/06/23 职场文书
反腐倡廉标语
2014/06/24 职场文书
2014年教务工作总结
2014/12/03 职场文书
2015入党自传书范文
2015/06/26 职场文书
解析Java异步之call future
2021/06/14 Java/Android