微信小程序 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 firefox兼容ie的dom方法脚本
May 18 Javascript
javascript之bind使用介绍
Oct 09 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python实现的建造者模式示例
2018/08/06 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
超简单使用Python换脸实例
2019/03/27 Python
python生成器用法实例详解
2019/11/22 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
高中数学教师求职信
2013/10/30 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
工业设计专业自荐书
2014/06/05 职场文书
师范生求职自荐信
2014/06/14 职场文书
ktv好的活动方案
2014/08/15 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
认错检讨书
2014/10/02 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
Python打包为exe详细教程
2021/05/18 Python
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python