微信小程序 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 常见开发使用技巧总结
Dec 26 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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者的疑难问答(2)
2006/10/09 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
详解Python 解压缩文件
2019/04/09 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
浅析python中的del用法
2020/09/02 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
毕业生自我鉴定
2013/11/05 职场文书
投资建议书模板
2014/05/12 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js