微信小程序数据处理方法详细解读与分析

why 42 2024-10-15

这篇文章主要给大家介绍了关于微信小程序中数据处理的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。

微信小程序数据处理方法详细解读与分析

前言

微信小程序数据处理 的核心就是js文件 Page 的 data。他是WXML 和js交互的重要桥梁，WXML 页面需要展示的数据都需要被定义在data中，否则就无法在页面进行展示。data中的数据是通过网络请求或者一些逻辑处理进行设置以及初始化的。

data数据的设置有两种方式，例如我们data中的有一个name并且初始化为空


1

2

3

data:{

 name:'我是初始化的name'

}

当有多个数据时用逗号英文逗号‘,'进行分开，那么如果我们想更改数据就可以


1

2

3

4

5

6

//方式1

this.data.name='我现在name值是Code4Android'

//方式2

this.setData({

name:'我现在name值是Code4Android'

})

不过用哪 一种方式，经过处理后，name的值都会变为“我现在name值是Code4Android”，我们可以通过this.data.name来取出name的值。也许你会有疑问，这两种方式有什么区别吗？

那我们现在WXML中创建一个view用来显示name的值


1

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

当我们需要将data中的数据显示在页面上时。需要用大括号来获取data中的值并将其显示，通过上面的两种方式，发现方式1设置后，页面上的数据并没有发生改变，依然是初始化的值，当使用第二种方式时数据发生改变，这时候你应该就明白两者区别了。

当数据是一个对象时，如


1

2

3

4

5

6

data:{

people:{

 name:&#39;Code4Android&#39;,

 address:&#39;河南&#39;

}

}

那么我们想修改people对象并显示


1

2

3

4

5

6

this.setData({

people:{

name:&#39;Code4Android1&#39;,

address:&#39;河南&#39;

}

})

此时people对象时被全部修改了，有时候，我们只需要修改部分数据，例如在上面，我们只需要修改name属性，address的值不变化，可以如下方式修改


1

2

3

this.setData({

&#39;people.name&#39;: &#39;Code4Android&#39;

})

如果有一个数组，里面放着people对象


1

2

3

this.setData({

&#39;peoples[0].name&#39;: &#39;Code4Android&#39;

})

当我们data中有一个type值，不同的值要显示不同的字，例如type有1,2,3三种值，分别表示初中，高中，大学。那么当服务端返回值后，我们该如何将type值转换为对应的字符显示呢。在这里提供三种方式


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!--方式1，使用三元表达式-->

 <view>{{type==1 ?&#39;初中&#39;:(type==2?&#39;高中&#39;:&#39;大学&#39;)}}</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 = &#39;&#39;

 if (this.data.type == 1) {

 typeName = &#39;初中&#39;

 } else if (this.data.type = 2) {

 typeName = &#39;高中&#39;

 } else {

 typeName = &#39;大学&#39;

 }

 this.setData({

 typeName: typeName

 })

 

WXML:中显示

<view>{{typeName}}</view>

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!--方式1，直接使用style -->

 <view style="{{isSelected==true ? &#39;background-color:#ff0000;color:#fff&#39;:&#39;background-color:#ddd;color:#000000&#39;}}">按钮</view>

<!--style也可以style="{{isSelected? &#39;background-color:#ff0000;color:#fff&#39;:&#39;background-color:#ddd;color:#000000&#39;}}"-->

<!--方式2，使用class-->

 <view class="{{isSelected ?&#39;isSelected&#39;:&#39;noSelected&#39;}}">按钮</view>

 

wxss:

.isSelected {

 background-color: #f00;

 color: #fff;

}

 

.noSelected {

 background-color: #ddd;

 color: #000;

}

页面数据传递

当我们打开一个新页面时往往使用 wx.navigateTo ,如果想传递到新打开页面数据，则可以在url后拼接？key=value的形式，多个参数用&分开、例如


1

2

3

wx.navigateTo({

 url: &#39;/pages/mypage/mypage?name=Code4Android&#39;,

 })`

通过navigateTo打开新页面后，新的页面会限制性onLoad方法，该方法有一个options参数，然后通过options.name就可以获取传递的数据。

如果我们想传递Object对象，例如上面声明的people，此时如果在url拼接 '?people='+people，发现接收时数据无法正常解析，此时我们可以使用下面方法传递


1

2

3

4

var string = JSON.stringify(this.data.people)

wx.navigateTo({

 url: &#39;/pages/mypage/mypage?people=&#39;+string ,

 })`

接收后通过


1

2

var string =options.people

var obj=JSON.parse(string)

然后obj就是我们JSON对象了，我们可以obj.name获取属性值。你以为这样就万事大吉了吗？当然不是；例如我们上面的people对象数据时这样的


1

2

3

4

5

6

7

data:{

 people: {

 name: &#39;名字&名字&#39;,

 age: 25,

 address: &#39;河南&#39;

 }

}

此时通过上面方法传递数据通过JSON.parse发现报错了，从错误原因很容易看出来，此时获取的people不是一个完整的字符串，原因就是name属性中含有‘&',而小程序认为&前的部分是people的值，&后的数据时七天部分数据。所以导致people不是一个完整的json对象，则导致parse失败异常。

那么这时候该如何传递数据呢，我的解决思路有两个，一个是将上面string中的&符号全部替换掉，如


1

2

3

4

var string = JSON.stringify(this.data.people)

wx.navigateTo({

 url: &#39;/pages/mypage/mypage?people=&#39;+string.replace(/&/g, &#39;&#39;),

 })`

那么此时接收的数据可以正常解析了，但是你会发现名字中的&没有了，如果你对符号&没有特殊要求，即&没有代表特殊含义时可以替换掉，亦或者将&替换成其他唯一字符，然后再替换回来。

当然我们也可以使用wx.setStorageSync("people", this.data.people)将数据保存，然后在新打开的页面wx.getStorageSync("people")将数据取出，并且取出的数据结构和存储的一样。

有很多时候，我们需要将当前页面选择的数据，返回到上一个页面，那么该如何操作呢，例如页面1显示一个地址信息，并且有一个更改地址按钮，跳转新页面2选择地址，并将选择的地址在1页面展示。


1

2

3

4

var pages = getCurrentPages()

pages[pages.length - 2].setData({

address: address

})

说道页面传递数据，我们常见的就是当前页面是一个列表数据，点击某一个item时将数据传递到新的页面，那么我们如何确定当前点击项的数据呢？


1

2

3

4

5

6

<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获取。例如上面点击事件


1

2

3

4

5

6

7

8

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: &#39;/pages/mypage/mypage?people=&#39;+string.replace(/&/g, &#39;&#39;),

 })`

 },

总结

以上就是微信小程序实现数据处理的详解的详细内容。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 数据 微信小程序 小程序
上一篇:微信小程序开发疑问解决办法总结与分析
下一篇:微信小程序使用 sha1 进行密码加密方法详解
相关文章

 发表评论

暂时没有评论，来抢沙发吧~