微信小程序 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 URL锚点取值方法
Feb 25 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 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文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python格式化css文件的方法
2015/03/10 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
人力资源管理专业应届生求职信
2013/09/28 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
城管综合整治方案
2014/05/01 职场文书
会计专业自荐信
2014/06/03 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技