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

最新推荐文章于 2024-03-07 11:11:13 发布
最新推荐文章于 2024-03-07 11:11:13 发布
阅读量8k 收藏 2
点赞数 5
分类专栏： 微信小程序 文章标签： 小程序 前端开发 微信 移动开发 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wulh8410/article/details/54862182
版权
本文介绍了微信小程序中页面变量对象data的用途，包括数据渲染和定义局部变量。详细阐述了如何在wxml中通过data设置的变量进行数据展示，以及前端如何获取后台js变量值的方法，特别讨论了数据类型限制，例如wxml仅支持数组类型的变量进行渲染。
摘要由CSDN通过智能技术生成

（一）页面变量对象data

页面变量对象data

对象data 有两个方面用途

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

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

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

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

如：

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


js页面：

最低0.47元/天 解锁文章
MrVOOP
关注
专栏目录
关于小程序wxml引用js中变量的疑问
01-08
我是个入门小程序的新手，最近遇到了一点疑惑，请各路大神解答一下，十分感谢。 xxx.wxml 垃圾桶实时剩余容量 {{list.recy_left}} 可回收垃圾 有害垃圾 干垃圾 湿垃圾 在这个代码中，第三行可以取出来值，但是在为per赋值时不可以。 如果直接在js中data中赋值，这是可以取出来了，刚开始定义为空，后面setdata就不行了。 在js中setdata后输出打印也是有值的。 请问一下怎么解决。 效果图： 下面是相关代码 xxx.js // pages/analys/analys.js Page({ /** * 页面的初始数据 */ data:
微信小程序----关于变量对象data 和 前端wxml取后台js变量值
a88312101的博客
02-04 1207
（一）页面变量对象data 对象data 有两个方面用途 第一，前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的 第二，定义JS页面中的页面局部变量，使其整个页面中可使用或调用 对象data定义的变量支持各种数据类型，string,int,[],{} 第一.wxml数据渲染，只要通过设置data值（this.setData({...})）即可 如： w...
微信小程序中wxml中用data-id传出的数据在js中的获取方法
岁末zzz的博客
06-04 7781
wxml: view bindtap=“touch” data-id="{{id}}" //{{id}}这里的id为js里面设置的数据； 需要注意的是，这里的data-后面的值是不区分大小写的。获取值是只能用小写获取，页面传值大小写不作区分 js: touch:function(e){ var id = e.target.dataset.id; console.log(id); } 这样就可获取...
微信小程序动态设置/获取值与属性
热门推荐
qq_40299140的博客
07-16 1万+
  这两天在公司做微信小程序，也是刚刚入手，遇到了很多的坑，和大家分享一下。   首先微信小程序不像普通的页面一样，获取属性啊什么的需要你去操作节点，在小程序里你就是去对这个页面的data进行一系列的操作，然后通过data来反映到页面上。   1.设置data与使用data   wxml代码： <!--index.wxml--> <view class="contai...
微信小程序获取后台拼接的id，进行id传值的方法
qq_41653381的博客
08-24 1万+
上图：这是后台给我们的编辑收货地址的接口，是带id参数的。 上图：在接口后拼接上id 用data-id设置后台传入的每个id，data-后面可以随便起名字，item.id代表每一个地址的id 然后我们通过e.currentTarget.dataset.item;找到触发当前对象的每个对应的id进行设置,然后我们通过路由后面携带拼接的data.id 通过options.i...
微信小程序关于变量对象data 和 前端wxml取后台js变量值
03-29
第一，前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的  第二，定义JS页面中的页面局部变量，使其整个页面中可使用或调用 对象data定义的变量支持各种数据类型，string,int,[],{} **第一.**wxml数据...
微信小程序-麻将骰子-程序源码.zip
05-31
3. **数据管理**：微信小程序使用MVVM（Model-View-ViewModel）模式，通过`data`对象存储和管理数据。在本例中，可能有存储骰子点数、游戏状态等数据的变量。 4. **动画效果**：为了模拟真实的骰子掷出效果，源码...
微信小程序-简易音乐音乐源码.zip
03-27
开发者需要掌握小程序的基础语法，包括WXML（结构层语言）、WXSS（样式层语言）和JavaScript（逻辑层语言）。 2. **音频处理**：源码中可能包含了对音频文件的处理，如播放、暂停、停止、音量控制等。微信小程序...
微信小程序--视图层的数据绑定、列表渲染、模板
03-29
WXML 中的动态数据均来自对应 Page 的 data。 只要把data中的数据改变，视图层就会自动改变，无需使用DOM操作。 简单绑定 数据绑定使用 Mustache 语法（双大括号）将变量包起来   使用方法： {{ 内容 }}  在组件...
微信小程序，通过变量名的字符串，来获取变量并使用
u013595395的博客
07-28 3664
注：偶然发现 不用像后面写得那么麻烦，let param = "isShow"; this.data[`${ param }`] 直接写成this.data[ param ] 如，有一变量isShow，let param = "isShow"; 通过this.data[`${ param }`]可以获取到变量。 具体的例子： data: { isShow:false } click:function(){ console.log(this.data.is...
微信小程序动态拼接变量名
qq_45963949的博客
02-19 3245
众所周知，微信小程序因为安全问题不能使用eval()函数，所以不能使用eval()来动态的拼接变量名。 但可以使用ES6的字符串模板来直接拼接，直接看代码 let obj = { obj1 :{ say:'hi1' }, obj2 :{ say:'hi2' } } let one = obj1 let two = say // 等于 obj.obj1.say // `` 是ESC下 TAB上的哪
微信小程序 基础 - 05 （wxml语法：动态数据绑定）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-06 2173
wxml是一套标签语言，符合标签语言的相关语法， 用于定义页面结构。而如果涉及到在wxml中展示动态数据，就需要结合js文件中在data里声明的变量，来动态处理。这些动态数据大致包括：动态文本、动态属性、动态样式等。 Page({ data:{ name: 'zs', age: 16, xxxx: xxx } }) wxml需要获取动态数据时，可以使用{{ }}，常见的需求有一下几大类： 1、内容绑定 动态更新组件...
微信小程序 妙用ES6 对象属性拼接和赋值进行提交数据
琳小的博客
07-21 1468
在微信小程序中，表单需要提交多项数据时，提交的数据如果是每一项都列举出来并赋值的话，代码显得冗余。 如果循环数据并
微信小程序开发系列（二十二）·wxml语法·双向数据绑定model：的用法
最新发布
时光の尘的博客
03-07 3376
在 WXML 中，普通属性的绑定是单向的，例如：如果希望用户输入数据的同时改变 data 中的数据，可以借助简易双向绑定机制。在对应属性之前添加 model：前缀即可：例如 注意事项：简易双向绑定的属性值如下限制：1、只能是一个单一字段的绑定,例如:错误用法:
微信小程序在js中的data里定义对象
FarryNiu的博客
06-12 1817
在微信小程序中定义对象
微信小程序开发学习笔记——3.3data中不同数据类型渲染及if条件渲染
Qy_cm的博客
02-18 440
>跟着b站up主“咸虾米_”学习中，把学习记录存到这方便后续查找。
《二》微信小程序中的 WXML
花铛
10-28 2011
双向绑定同样可以使用在自定义组件上。})当自定义组件的输入框的值变更时，自定义组件的 transferValue 属性会同时变更，页面的也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。在内定义代码片段，使用 name 属性，作为模板的名字。
微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染
weixin_68658847的博客
01-13 1347
微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染
微信小程序--通过请求网页获取信息并显示
06-11
要通过请求网页获取信息并显示，你可以使用微信小程序提供的网络请求 API wx.request()。具体步骤如下： 1. 在小程序的 app.json 文件中配置要请求的网页域名，如： ``` "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "appid": "wx1234567890", "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "小程序", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/about/about", "text": "关于" } ] }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "permission": { "scope.userLocation": { "desc": "小程序需要获取你的地理位置" } }, "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }, "sitemapLocation": "sitemap.json", "requiredBackgroundModes": ["audio"] ``` 2. 在小程序的 js 文件中使用 wx.request() 方法请求网页，并获取数据，如： ``` wx.request({ url: 'https://www.example.com/data.json', success: function(res) { console.log(res.data) } }) ``` 3. 将获取到的数据显示在小程序的界面上，如： ``` Page({ data: { info: '' }, onLoad: function() { var that = this wx.request({ url: 'https://www.example.com/data.json', success: function(res) { that.setData({ info: res.data }) } }) } }) ``` 其中，info 是一个数据绑定变量，用来保存从网页获取的数据。在 onLoad 方法中，使用 that.setData() 方法将获取到的数据更新到界面上。在小程序的 wxml 文件中，可以使用 {{info}} 引用该数据绑定变量，将数据显示在界面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值