微信小程序 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公告滚动+AJAX后台得到数据
Apr 14 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
图解javascript作用域链
May 27 Javascript
ES2020 新特性(种草)
Jan 12 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中动态显示签名和ip原理
2007/03/28 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
Python单元测试unittest的具体使用示例
2018/12/17 Python
python isinstance函数用法详解
2020/02/13 Python
python使用建议技巧分享(三)
2020/08/18 Python
python脚本第一行如何写
2020/08/30 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
syb养殖创业计划书
2014/01/09 职场文书
年会主持词结束语
2014/03/27 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
军训新闻稿范文
2015/07/17 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python