微信小程序 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使用prototype定义对象类型
Feb 07 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
javascript填充默认头像方法
Feb 22 Javascript
Vue头像处理方案小结
Jul 26 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
npm全局环境变量配置详解
Dec 15 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Array对象方法参考
2006/10/03 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
js实现每日签到功能
2018/11/29 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
主持人演讲稿范文
2013/12/28 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
贷款担保书范文
2014/05/13 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers