受朋友所托，帮他做一个简单的微信小程序，利用业余时间研究了几天，简单做了一个样品出来，总结一下一些小程序的特性。
小程序开发整体跟前端页面开发很像，都是用标签写页面内容，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”。
网友评论