微信小程序数据处理

微信小程序数据处理 的核心就是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, ''),
       })`
  },