小程序初体验之数据处理

受朋友所托，帮他做一个简单的微信小程序，利用业余时间研究了几天，简单做了一个样品出来，总结一下一些小程序的特性。

小程序开发整体跟前端页面开发很像，都是用标签写页面内容，CSS控制样式，JS控制逻辑等，不同的是小程序封装了很多很方便的API，还有将页面显示的数据单独抽离出来，方便JS对数据的操作。

在粗略看完腾讯官方的简易教程之后，开始写我的第一个小程序，期间遇到了一些数据处理和动态样式处理的问题，其实都是对数据的处理，记录如下

数据处理

由于小程序不能使用Document和Window操作DOM对象，因此不能使用JQuery，所以修改页面样式和处理数据都需要使用小程序特定的方式来处理

页面显示的数据

页面显示的数据保存在.js文件内的data:{}里，比如：

data: {
    number_array: ['1', '2', '3'],
    number_string: '0',
    number_int: 4
  }

可以使用JS代码来改变数据的值，比如：

this.setData({
    number_array: ['a', 'b', 'c'],
    number_string: 'd',
    number_int: 9
})

在.wxml文件中使用{{number_string}}的方式绑定数据，这样当用户的操作改变了数据的值后，页面内容会同步改变。

页面样式的修改

因为小程序不能使用Document和Window操作DOM对象，也不能使用JQuery，所以动态的改变页面的样式，也需要采用改变数据来改变样式，比如：

<view class="tabcontent" style="display:{{ishidden}}">
    <image src="../../imgs/pro.jpg"></image>
</view>

页面中设置标签的样式采用变量的形式，使用.js文件中的数据来控制：

data: {
    ishidden: 'auto'
}

当用户触发了某些动作的时候，调起JS方法修改数据：

this.setData({
    ishidden: 'none'
})

这样就可以动态改变页面的样式。其中style也可以换成class，直接修改标签的类名。

页面间的传递

页面间数据的传递有两种方法，一是在标签中写：

<navigator url="/pages/pagename/pagename?data=value">

二是在JS代码中写：

wx.navigateTo({
   url: "/pages/pagename/pagename?data=value"
})

这样pagename页面就能拿到变量名为data的值，方法如下：

onLoad: function (options) {
    wx.showModal({
      title: '测试',
      content: '收到的值：' + options.data,
    })
  }

pagename页面加载完以后，会弹出一个对话框显示“收到的值：value”。