微信小程序学习之数据处理详解


Posted in Javascript onJuly 05, 2017

前言

微信小程序数据处理 的核心就是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的值

<view>{{name}}</view>

当我们需要将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值转换为对应的字符显示呢。在这里提供三种方式

<!--方式1,使用三元表达式-->
 <view>{{type==1 ?'初中':(type==2?'高中':'大学')}}</view>
<!--方式2,使用条件渲染-->
<view wx:if="{{type==1}}">初中</view>
<view wx:elif="{{type==2}}">高中</view>
<view wx:else>大学</view>
<!--方式3,js对数据预处理,jsdata中增加typeName-->
js文件相应预处理:
 var typeName = ''
 if (this.data.type == 1) {
 typeName = '初中'
 } else if (this.data.type = 2) {
 typeName = '高中'
 } else {
 typeName = '大学'
 }
 this.setData({
 typeName: typeName
 })

WXML:中显示
<view>{{typeName}}</view>

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

<!--方式1,直接使用style -->
 <view style="{{isSelected==true ? 'background-color:#ff0000;color:#fff':'background-color:#ddd;color:#000000'}}">按钮</view>
<!--style也可以style="{{isSelected? 'background-color:#ff0000;color:#fff':'background-color:#ddd;color:#000000'}}"-->
<!--方式2,使用class-->
 <view class="{{isSelected ?'isSelected':'noSelected'}}">按钮</view>

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时将数据传递到新的页面,那么我们如何确定当前点击项的数据呢?

<block wx:for="{{peoples}}" wx:for-index="id" data-index="{{id}}" bindtap="select">
 <!---给每个菜单定义一个index值 -->
 <view data-name="{{item.name}}">
 <text >{{item.address}}</text>
 </view>
 </block>

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, ''),
 })`
 },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 第二代身份证号码的验证机制代码
May 12 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
js获取视频时长代码
Apr 10 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
jquery常用的12个小功能
Jul 22 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 #Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 #Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
You might like
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php分页函数示例代码分享
2014/02/24 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python中dict使用方法详解
2019/07/17 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python实现控制台输出彩色字体
2020/04/05 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
python 5个实用的技巧
2020/09/27 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
销售类个人求职信范文
2013/09/25 职场文书
会计岗位职责
2013/11/08 职场文书
记账会计岗位职责
2014/06/16 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
捐款感谢信
2015/01/20 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
python - asyncio异步编程
2021/04/06 Python
看看如何用Python绘制小米新版天价logo
2021/04/20 Python