文档章节

微信小程序数据处理

第九程序
 第九程序
发布于 2017/07/05 09:35
字数 1593
阅读 30
收藏 0

微信小程序数据处理 的核心就是js文件 Page 的 data。他是WXML 和js交互的重要桥梁,WXML 页面需要展示的数据都需要被定义在data中,否则就无法在页面进行展示。data中的数据是通过网络请求或者一些逻辑处理进行设置以及初始化的。

data数据的设置有两种方式,例如我们data中的有一个name并且初始化为空

data:{
  name:'我是初始化的name'
}

当有多个数据时用逗号英文逗号‘,’进行分开,那么如果我们想更改数据就可以

//方式1
    this.data.name='我现在name值是Code4Android'
   //方式2
    this.setData({
      name:'我现在name值是Code4Android'
    })

不过用哪 一种方式,经过处理后,name的值都会变为“我现在name值是Code4Android”,我们可以通过this.data.name来取出name的值。也许你会有疑问,这两种方式有什么区别吗?

那我们现在WXML中创建一个view用来显示name的值

{{name}}

当我们需要将data中的数据显示在页面上时。需要用大括号来获取data中的值并将其显示,通过上面的两种方式,发现方式1设置后,页面上的数据并没有发生改变,依然是初始化的值,当使用第二种方式时数据发生改变,这时候你应该就明白两者区别了。

当数据是一个对象时,如

data:{
people:{
  name:'Code4Android',
  address:'河南'
}
}

那么我们想修改people对象并显示

this.setData({
      people:{
        name:'Code4Android1',
       address:'河南'
      }
    })

此时people对象时被全部修改了,有时候,我们只需要修改部分数据,例如在上面,我们只需要修改name属性,address的值不变化,可以如下方式修改

this.setData({
      'people.name': 'Code4Android'
    })

如果有一个数组,里面放着people对象

this.setData({
      'peoples[0].name': 'Code4Android'
    })

当我们data中有一个type值,不同的值要显示不同的字,例如type有1,2,3三种值,分别表示初中,高中,大学。那么当服务端返回值后,我们该如何将type值转换为对应的字符显示呢。在这里提供三种方式

{{type==1 ?'初中':(type==2?'高中':'大学')}}

 初中

 高中

 大学

js文件相应预处理:
    var typeName = ''
    if (this.data.type == 1) {
      typeName = '初中'
    } else if (this.data.type = 2) {
      typeName = '高中'
    } else {
      typeName = '大学'
    }
    this.setData({
      typeName: typeName
    })

WXML:中显示


 {{typeName}}

在WXML文件中,往往我们会根据不同的状态显示不同的样式,此时就需要根据不同的状态展示不同的样式,例如,一个view当data中的isSelected为true时背景为红色,字体颜色为白色,否则背景为灰色(#ddd),那么可下面两种方式实现

按钮

 按钮

wxss:
.isSelected {
  background-color: #f00;
  color: #fff;
}

.noSelected {
  background-color: #ddd;
  color: #000;
}

#页面数据传递

当我们打开一个新页面时往往使用 wx.navigateTo,如果想传递到新打开页面数据,则可以在url后拼接?key=value的形式,多个参数用&分开、例如

wx.navigateTo({
      url: '/pages/mypage/mypage?name=Code4Android',
       })`

通过navigateTo打开新页面后,新的页面会限制性onLoad方法,该方法有一个options参数,然后通过options.name就可以获取传递的数据。

如果我们想传递Object对象,例如上面声明的people,此时如果在url拼接'?people='+people,发现接收时数据无法正常解析,此时我们可以使用下面方法传递

var string = JSON.stringify(this.data.people)
wx.navigateTo({
      url: '/pages/mypage/mypage?people='+string ,
       })`

接收后通过

var string =options.people
var obj=JSON.parse(string)

然后obj就是我们JSON对象了,我们可以obj.name获取属性值。你以为这样就万事大吉了吗?当然不是;例如我们上面的people对象数据时这样的

data:{
    people: {
      name: '名字&名字',
      age: 25,
      address: '河南'
    }
}

此时通过上面方法传递数据通过JSON.parse发现报错了,从错误原因很容易看出来,此时获取的people不是一个完整的字符串,原因就是name属性中含有‘&’,而小程序认为&前的部分是people的值,&后的数据时七天部分数据。所以导致people不是一个完整的json对象,则导致parse失败异常。

那么这时候该如何传递数据呢,我的解决思路有两个,一个是将上面string中的&符号全部替换掉,如

var string = JSON.stringify(this.data.people)
wx.navigateTo({
      url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
       })`

那么此时接收的数据可以正常解析了,但是你会发现名字中的&没有了,如果你对符号&没有特殊要求,即&没有代表特殊含义时可以替换掉,亦或者将&替换成其他唯一字符,然后再替换回来。

当然我们也可以使用wx.setStorageSync("people", this.data.people)将数据保存,然后在新打开的页面wx.getStorageSync("people")将数据取出,并且取出的数据结构和存储的一样。

有很多时候,我们需要将当前页面选择的数据,返回到上一个页面,那么该如何操作呢,例如页面1显示一个地址信息,并且有一个更改地址按钮,跳转新页面2选择地址,并将选择的地址在1页面展示。

var pages = getCurrentPages()
      pages[pages.length - 2].setData({
        address: address
      })

说道页面传递数据,我们常见的就是当前页面是一个列表数据,点击某一个item时将数据传递到新的页面,那么我们如何确定当前点击项的数据呢

{{item.address}}

wx:for="{{peoples}}"就是讲peoples数据循环渲染,和Android ListView效果一样, wx:for-index是自定义当然显示item的索引键名字,data-是自定义数据,data-后面部分是自定义的,在data-自定义的数据通过e.currentTarget.dataset获取。例如上面点击事件

select: function (e) {
    var index = e.currentaTrget.dataset.index
    var people = this.data.peoples[index]
    var string = JSON.stringify(this.data.people)
    wx.navigateTo({
      url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
       })`
  },

© 著作权归作者所有

共有 人打赏支持
第九程序
粉丝 84
博文 142
码字总数 172691
作品 0
厦门
程序员
亲身体验小程序wepy和mpvue框架的区别

前言 小编公司也随潮流,把现有h5项目,重做成小程序项目,前期是用wepy搭建的,开始感觉还不错,随着加入的功能越来越多,感觉性能也越来越成问题。下面我们来详细介绍。开发文档 原生开发小...

向建峰_Javan
前天
0
0
微信小程序商店 | 即速商店_小程序流量平台

微信小程序商店 | 即速商店 即速应用商店-分类最齐全的微信小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可 免费发布 自...

jisuapp
02/08
0
0
掘金开发者大会 ∙ 微信小程序专场 | 一场汇聚了微信小程序日活前十名半数的开发者大会,邀您参加!

掘金开发者大会 ∙ 微信小程序专场 一场迟来的聚会 自2017年1月微信小程序正式上线以来,应用数与开发者数持续增长,目前已经有超过100万个微信小程序发布且相关开发者也超过了150万。同样,...

稀土君
08/06
0
0
掘金开发者大会 ∙ 微信小程序专场正式启动

一场迟来的聚会 自2017年1月微信小程序正式上线以来,应用数与开发者数持续增长,目前已经有超过100万个微信小程序发布且相关开发者也超过了150万。同样,我们也可以通过掘金的数据看到 2017...

掘金官方
08/07
0
0
【值得收藏】微信小程序开发干货合集,快上车!

小程序的成功,让广大程序员早已不再纠结该不该学习小程序开发 ,但会纠结如何学习小程序开发,为帮助大家更好的学习小程序开发,特地整理一批相关学习资源,供大家交流学习! 近期优秀文章 ...

慕课网
08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windbg调试C源码级驱动

联机方式不多说了。我博客里有,英文的。 windbg联机文档 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/debugger/debug-universal-drivers---step-by-step-lab--echo-kernel......

simpower
37分钟前
0
0
redis快照和AOF简介

数据持久化到硬盘:一是快照(snapshotting),二是只追加文件(append-only file AOF) 快照 核心原理:redis某个时间内存内的所有数据写入硬盘 场景:redis快照内存里面的数据 1. 用户发送bgsav...

拐美人
37分钟前
0
0
这个七夕,送你一份程序员教科书级别的告白指南

给广大爱码士们的高能预警: 今天,就是七夕了…… (单身非作战人群请速速退场!) 时常有技术GG向个推君抱怨 经过网民多年的教育 以及技术人持之以恒的自黑 冲锋衣狂热分子·格子衫骨灰级粉...

个推
42分钟前
0
0
python爬虫日志(15)cookie详解

转载:原文地址 早期Web开发面临的最大问题之一是如何管理状态。服务器端没有办法知道两个请求是否来自于同一个浏览器。那时的办法是在请求的页面中插入一个token,并且在下一次请求中将这个...

茫羽行
43分钟前
0
0
qlv视频格式转换器

  腾讯视频中的视频影视资源有很多,小编经常在里面下载视频观看,应该也有很多朋友和小编一样吧,最近热播的电视剧也不少,如《香蜜沉沉烬如霜》、《夜天子》还有已经完结的《扶摇》,这么...

萤火的萤火
46分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部