微信小程序 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 使用手册(二)
Sep 23 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
javascript Number 与 Math对象的介绍
Nov 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
世界上第一台立体声收音机
2021/03/01 无线电
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
python删除某个字符
2018/03/19 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python pygame实现球球大作战
2019/11/25 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
劳资人员岗位职责
2013/12/19 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
学生个人自我鉴定
2014/03/26 职场文书
学校搬迁方案
2014/06/15 职场文书
机动车登记业务委托书
2014/10/08 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
python获取带有返回值的多线程
2022/05/02 Python