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


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 相关文章推荐
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Javascript Promise用法详解
May 10 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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函数
2006/10/09 PHP
php 过滤危险html代码
2009/06/29 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
layui文件上传实现代码
2017/05/20 Javascript
angular4自定义组件详解
2017/09/28 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python 如何创建一个线程池
2020/07/28 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
市优秀教师事迹材料
2014/02/05 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
保护环境倡议书
2014/04/14 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
西安大雁塔导游词
2015/02/10 职场文书
加薪申请报告范本
2015/05/15 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis