微信小程序 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 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue点击当前路由高亮小案例
Sep 26 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
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
node thread.sleep实现示例
2018/06/20 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python使用type动态创建类操作示例
2020/02/29 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
《长征》教学反思
2014/04/27 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
边城读书笔记
2015/06/29 职场文书
团支部书记竞选稿
2015/11/21 职场文书
高中班主任寄语
2019/06/21 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL