微信小程序 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访问XML数据的实例
Dec 27 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
vue中的scope使用详解
Oct 29 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
Javascript中window.name属性详解
Nov 19 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
PHP5 字符串处理函数大全
2010/03/23 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
网页javascript精华代码集
2007/01/24 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python global全局变量函数详解
2018/09/18 Python
解析Python3中的Import
2019/10/13 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python之生成多层json结构的实现
2020/02/27 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
农业生产宣传标语
2014/10/08 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
推广普通话主题班会
2015/08/17 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python