微信小程序 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 Jcrop插件实现图片选取功能
Nov 23 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
日语专业个人的求职信
2013/12/03 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
上党课的心得体会
2014/09/02 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
高中校园广播稿
2014/10/21 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫