微信小程序 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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
详解vue中组件参数
Jul 09 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
python标准库os库的函数介绍
2020/02/12 Python
在线服装零售商:SheIn
2016/07/22 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
二年级学生评语大全
2014/04/23 职场文书
环保倡议书100字
2014/05/15 职场文书
毕业证代领委托书
2014/09/26 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
三国演义读书笔记
2015/06/25 职场文书
庆元旦主持词
2015/07/06 职场文书
数学备课组工作总结
2015/08/12 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
导游词之任弼时故居
2020/01/07 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python