全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[保定市seo公司]微信小程序实现数据处理的详解

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

  前言

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

  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, '●▲=;'),
 })`
 },

 

  总结

  以上就是微信小程序实现数据处理的详解的详细内容,更多请关注久澳传媒编程栏目其它相关文章◁▷!

[保定市seo公司]微信小程序实现数据处理的详解

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。