(一)页面变量对象data

对象data 有两个方面用途

第一,前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的

第二,定义JS页面中的页面局部变量,使其整个页面中可使用或调用

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

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

如:

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


js页面:


第二.页面变量

定义:


存储:


使用:

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

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

JS:

设置变量值 :

WXML:

2. 列表渲染,即数据List  用循环进行渲染   wx:for="{{ taskItems}}"  默认子项为item

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

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

data {

billStatus:[]

}

如定义为下面这样

data {

billStatus:{}

}

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

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

两种方式

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

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


微信小程序----关于变量对象data 和 前端wxml取后台js变量值的更多相关文章

  1. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  2. 微信小程序存放视频文件到阿里云用到算法js脚本文件

           peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...

  3. 微信小程序 navigateTo 传对象参数

    当微信小程序navigateTo传入参数是个object时,请使用JSON.strtingify将object转化为字符串,代码如下: wx.navigateTo({ url: '../sendChe ...

  4. 微信小程序----没有 DOM 对象,一切基于组件化 ---- mpvue

    封装好用的 类库 和 组件,复用且灵活度高 抽取相同的部分放在函数内部(组件内部) 抽取不同的部分放在形参(组件 props 传参,或者插槽) new Promise 运行时 初始化实例对象的状态为 ...

  5. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  6. uniapp微信小程序获取当前用户手机号码(前端)

    按钮触发获取用户信息 uniapp中与微信小程序官网所写会不同, <button open-type="getPhoneNumber" @getphonenumber=&qu ...

  7. 微信小程序:POST请求data数据请求不到

    最近开始开发小程序,遇到许多小问题,直奔主题. wx.request()是微信封装的ajax请求方法,也是小程序中ajax唯一的一个方法,被放在了API文档的第一个位置,的确使用率是最高的. 但是wx ...

  8. 微信小程序填坑之旅(1)-app.js中用云开发获取openid,在其他页上用app.globaldata.openid获取为空

    参考:小程序如何在其他页面监听globalData中值的变化?https://www.jianshu.com/p/8d1c4626f9a3 原因就是:app.js没执行完时,其他页已经onload了, ...

  9. 微信小程序,关于设置data里面的数据。

    关于设置 data里面的数据 wxml: <view>{{userName}}</view> data: { userName:'张三', } 有两种方法 方法一:直接使用点关 ...

随机推荐

  1. spring mvc3中JACKSON序列化日期格式的问题 - 墙头草的Java - BlogJava

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  2. kafka 集群部署 多机多broker模式

    kafka 集群部署 多机多broker模式 环境IP : 172.16.1.35   zookeeper   kafka 172.16.1.36   zookeeper   kafka 172.16 ...

  3. PHPCMS v9 实现首页,列表页,内容页调用点击量方法

    大家好,今天有点闲,看很多朋友经常问PHPCMS v9 首页,列表页,内容页调用点击怎么弄,打算抽时间把代码全部归纳出来,以便大家日后使用,如下: 1,首页调用点击量 {pc:content acti ...

  4. mysql trouble shooting---- 从库停止同步lock_wait_timeout_exceeded_try_restarting_transaction

    问题描述: 数据库从库停止同步. 问题分析: show slave status\G;(也可使用show full processlist) 显示 某个update语句出错,Lock wait tim ...

  5. (简单) HDU 1698 Just a Hook , 线段树+区间更新。

    Description: In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of ...

  6. 使用DLL进行不同语言之间的调用(转)

    源:使用DLL进行不同语言之间的调用 __declspec(dllexport) 是告诉编译器用来导出函数的,在代码中不另作说明了. extern "C" 的意思就是用C的方式来导 ...

  7. eclipse手动安装svn和maven

    一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...

  8. leetcode-004 insertion sort list

    package leetcode; class ListNode { int val; ListNode next; ListNode(int x) { val = x; next = null; } ...

  9. centos7 安装R和Rstudio客户端

    #官网下载R和Rstudio 我下载的是 R-3.2.1.tar.gz和rstudio-0.99.467-x86_64.rpm两个版本 rstudio没有看见有centos版的,下的这个RStudio ...

  10. UVa 11503 - Virtual Friends

    题目大意:给出若干对朋友关系,每给出一对朋友关系,就输出二者所在关系网中的人数. 首先是对每个人编号,使用map简化编号过程,然后就是使用并查集更新集合.要注意的是当给出A和B的朋友关系时,无论A和B ...