微信小程序 setData使用方法及常用错误解决办法


Posted in Javascript onMay 11, 2017

微信小程序 setData使用方法及常用错误解决办法

最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序。

就在这里。。没错就是这里,传回来的值是以jsonarray格式传过来的。
我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok,

结果没想到小程序setData()设置数组对象的某个元素的属性时根本没用。。。。。

然后百度一会儿找到了方法   https://3water.com/article/111691.htm

最近在使用微信小程序的setData时,遇到了以下问题。如下:

官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的:

Page({
 data: {
  array: [{text: 'init data'}],
 },
 changeItemInArray: function() {
  this.setData({
   'array[0].text':'changed data'
  })
 }
})

使用了 ‘array[0].text' : ‘changed data' 这样的值。但在实际使用中,我们对数组的中的某个元素的设置是动态的。即 我们通常应该是‘array[‘+index+'].text' : ‘changed data' ,其中index应该是一个动态的数字。但显然,这样是无法使用在对象的key中的。

所以,我只能使用了一个变通的方法。如下:

var param = {};
var string = "array["+index+"].text;
param[string] = 'changed data';
that.setData(param);

这个每个属性都需要来一次。。。

不知道是我没找到更好的方法还是怎样,我的强迫症都出来了。。

下面就是我的代码。。。

markers: {
   iconPath: "/picture/bike.png",
   id: 0,
   latitude: 23.099994,
   longitude: 113.324520,
   width: 50,
   height: 50
  }

这是markers类结构,我为了赋值写了这么多。。

for(var i = 0; i < res.data.length; i++){
       // that.data.markers[i].id=i;
        // mark.id=i;
       var param = {};
       var string = "markers["+i+"].id";
       param[string] = res.data[i].Bike_id;       
        that.setData(param);


       var string="markers["+i+"].iconPath";
       param[string] ="/picture/bike.png";
       that.setData(param);


       var string = "markers["+i+"].latitude";
       param[string] = res.data[i].BIKE_latitude;       
        that.setData(param);
     


       var string = "markers["+i+"].longitude";
       param[string] = res.data[i].BIKE_longitude;       
        that.setData(param);




        var string = "markers["+i+"].width";
       param[string] = 50;       
        that.setData(param);


        var string = "markers["+i+"].height";
       param[string] = 50;       
        that.setData(param);
        /* that.setData({
        markers:[{
   iconPath: "/picture/bike.png",
   id: 0,
   latitude: 23.099994,
   longitude: 113.324520,
   width: 50,
   height: 50
        }]
       })*/
       }
     //   console.log(res.data[1])
       var markk=that.data.markers;
       that.setData({markers:markk})

最后还必须setData一下,不然地图不会刷新。。

如果QT瞬间弄好,真的麻烦。。。。。。。。。。。。。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
微信小程序中使用javascript 回调函数
May 11 #Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 #Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 #Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 #Javascript
JS实现的四级密码强度检测功能示例
May 11 #Javascript
详解Vue中状态管理Vuex
May 11 #Javascript
You might like
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python 3.8 新功能全解
2019/07/25 Python
总经理职责
2013/12/22 职场文书
学校安全责任书
2014/04/14 职场文书
小学生操行评语
2014/04/22 职场文书
给老婆的保证书范文
2014/04/28 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
Java 死锁解决方案
2022/05/11 Java/Android