微信小程序模版渲染详解


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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
React SSR样式及SEO的实践
Oct 22 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
微信小程序如何获取用户信息
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
Smarty日期时间操作方法示例
2016/11/15 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python 图片验证码代码分享
2012/07/04 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python2与Python3的区别实例总结
2019/04/17 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
面试后的感谢信范文
2014/02/01 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014年化验室工作总结
2014/11/21 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
工作年限证明模板
2015/06/15 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
python urllib库的使用详解
2021/04/13 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android