欢迎光临,了解微信小程序开发,就上易用通!

微信小程序关于变量对象data 和 前端wxml取后台js变量值

发布:2018-02-01 17:20浏览: 来源:网络 作者:cola

(一)页面变量对象data

对象data 有两个方面用途

第一,前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的 
第二,定义JS页面中的页面局部变量,使其整个页面中可使用或调用

对象data定义的变量支持各种数据类型,string,int,[],{}

**第一.**wxml数据渲染,只要通过设置data值(this.setData({...}))即可

如:

wxml页面:detail对象中包含有TaskBillCode与BillDate两个属性

微信小程序关于变量对象data 和 前端wxml取后台js变量值(图1)

js页面:微信小程序关于变量对象data 和 前端wxml取后台js变量值(图2)

第二.页面变量

定义:微信小程序关于变量对象data 和 前端wxml取后台js变量值(图3)

存储:微信小程序关于变量对象data 和 前端wxml取后台js变量值(图4)

使用:微信小程序关于变量对象data 和 前端wxml取后台js变量值(图5)

 

(二)前端wxml取后台js变量值

1.js后台只能通过设置Data里的变量值( this.setData({}) ),前台wxml才能得到渲染 wxml以双括号取变量值 {{ var }}

JS:微信小程序关于变量对象data 和 前端wxml取后台js变量值(图6)

设置变量值 :微信小程序关于变量对象data 和 前端wxml取后台js变量值(图7)

WXML:微信小程序关于变量对象data 和 前端wxml取后台js变量值(图8)

  1. 列表渲染,即数据List 用循环进行渲染 wx:for="{{ taskItems}}" 默认子项为item微信小程序关于变量对象data 和 前端wxml取后台js变量值(图9)

3.关于多数据的数据类型,目前wxml取变量只支持数组,并不支持对象

微信小程序关于变量对象data 和 前端wxml取后台js变量值(图10)

这里面的billStatus 只能定义为数组类型,才能支持wxml用变量取数组的值

 

  1. data {
    
    billStatus:[]
    
    }
    如定义为下面这样
    
    
    data {
    
    billStatus:{}
    
    }

则会导致 {{billStatus[item.Status]}} 取不到值 ,但代入数值还是可以取到 {{billStatus1}}

4.关于在全局里app.js定义数组

两种方式

一种是直接在全局变量对象中定义,但这样是指定不了下标的,下标只能从默认的0开始

微信小程序关于变量对象data 和 前端wxml取后台js变量值(图11)

别一种则是在全局变量对象中只定义动态数组变量,在加载后赋值 这样是能达到指定下标变量名的效果

微信小程序关于变量对象data 和 前端wxml取后台js变量值(图12)

微信小程序关于变量对象data 和 前端wxml取后台js变量值(图13)





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。