微信小程序 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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 函数使用说明
2010/04/07 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
python学习 流程控制语句详解
2016/06/01 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python绘制条形图方法代码详解
2017/12/19 Python
python实现百度语音识别api
2018/04/10 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
医学生实习自荐信
2013/10/01 职场文书
财务工作检讨书
2014/10/29 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
详解Node.js如何处理ES6模块
2021/05/15 Javascript