WeChat 애플릿으로 구현된 데이터 처리에 대한 자세한 설명

이 글은 주로 WeChat 미니 프로그램의 데이터 처리에 대한 관련 정보를 소개합니다. 글의 소개는 매우 상세하며 도움이 필요한 친구들이 참고할 수 있는 내용을 담고 있습니다.

머리말

WeChat 애플릿 데이터 처리의 핵심은 js 파일 페이지의 데이터입니다. WXML과 js 사이의 중요한 연결고리로서 WXML 페이지에 표시해야 하는 데이터를 데이터에 정의해야 합니다. 그렇지 않으면 페이지에 표시할 수 없습니다. 데이터의 데이터는 네트워크 요청이나 일부 논리적 처리를 통해 설정되고 초기화됩니다.

데이터 데이터를 설정하는 방법은 두 가지가 있습니다. 예를 들어 우리 데이터에 이름이 있고 비어 있도록 초기화됩니다.

data:{
 name:'我是初始化的name'
}

데이터가 여러 개인 경우 쉼표를 사용하여 영어 쉼표'로 구분합니다. ', 그러면 원하는 경우 데이터를 변경하면 됩니다

 //方式1
 this.data.name='我现在name值是Code4Android'
 //方式2
 this.setData({
 name:'我现在name值是Code4Android'
 })

그러나 어떤 방법을 사용하든 처리 후에는 name 값이 "현재 이름 값은 Code4Android입니다"가 되므로 를 전달하면 됩니다. data.name</code > name 값을 가져옵니다. 질문이 있으신가요? 이 두 가지 방법의 차이점은 무엇인가요? <code>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 ?&#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，直接使用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的形式，多个参数用&分开、例如

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")

🎜이제 페이지의 데이터에 있는 데이터를 표시해야 할 때 WXML에 이름 값을 표시하는 뷰를 만듭니다. 데이터의 값을 가져와서 표시하려면 중괄호를 사용해야 합니다. 위의 두 가지 방법을 통해, 두 번째 방법을 사용하면 페이지의 데이터가 변경되지 않고 여전히 초기화된 값임을 알 수 있습니다. 방법 데이터가 변경되면 둘 사이의 차이점을 이해해야 합니다. 🎜🎜🎜데이터가 🎜🎜🎜🎜

 var pages = getCurrentPages()
 pages[pages.length - 2].setData({
 address: address
 })

🎜와 같은 객체인 경우 그런 다음 people 객체를 수정하고 표시하려고 합니다. 🎜🎜🎜🎜

 <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>

🎜 이때 people 객체가 완전히 수정된 경우도 있습니다. 예를 들어 위에서 데이터의 일부를 수정하려면 name 속성만 수정하면 되며, address 값은 변경되지 않으며 다음과 같이 수정할 수 있습니다🎜🎜🎜🎜

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

🎜people이 포함된 배열이 있는 경우 object in it🎜🎜🎜🎜rrreee🎜데이터 Type 값에 배열이 있는 경우 다른 값은 다른 단어를 표시해야 합니다. 예를 들어 type에는 중학교를 나타내는 1, 2, 3의 값이 있습니다. 고등학교, 대학교 각각. 따라서 서버가 값을 반환할 때 유형 값을 해당 문자 표시로 어떻게 변환합니까? 여기에는 세 가지 방법이 제공됩니다. 🎜🎜🎜rrreee🎜WXML 파일에서는 상태에 따라 다른 스타일을 표시해야 하는 경우가 많습니다. 예를 들어 isSelected일 때 데이터의 뷰는 다음과 같습니다. true, 배경은 빨간색이고 글꼴 색상은 흰색입니다. 그렇지 않으면 배경이 회색(#ddd)이면 다음 두 가지 방법으로 달성할 수 있습니다🎜🎜🎜🎜rrreee🎜🎜🎜페이지 데이터 전송🎜🎜🎜🎜 새 페이지 열기 wx.navigateTo가 자주 사용됩니다. 새로 열린 페이지에 데이터를 전달하려면 url? 뒤에 를 연결하면 됩니다. key=value 형식에서 여러 매개변수는 &로 구분됩니다(예: 🎜🎜🎜🎜rrreee🎜navigateTo를 통해 새 페이지를 연 후 새 페이지는 옵션 매개변수가 있는 onLoad 메서드를 제한합니다). , options.name을 전달하면 전달된 데이터를 가져올 수 있습니다. 🎜🎜위에 선언한 people과 같은 Object 개체를 전달하려는 경우 URL에 '?people='+people을 연결하면 수신 시 데이터를 정상적으로 구문 분석할 수 없음을 알 수 있습니다. 이때, 메소드는 🎜🎜🎜🎜rrreee🎜를 전달하고 🎜🎜🎜🎜rrreee🎜를 통해 수신합니다. 그런 다음 obj는 JSON 객체이고 obj를 통해 속성 값을 가져올 수 있습니다. 이름. 이렇게 하면 모든 것이 잘 될 것 같나요? 물론 그렇지 않습니다. 예를 들어 위의 people 개체 데이터는 다음과 같습니다. 🎜🎜🎜🎜rrreee🎜 이때 위 메서드를 통해 데이터를 전달하고 JSON.parse를 전달하면 오류가 보고됩니다. 당시에 얻은 people은 완전한 문자열이 아닌데, 그 이유는 name 속성에 '&'가 포함되어 있고, 애플릿에서는 & 앞의 부분을 people의 값으로 간주하기 때문입니다. , & 이후의 데이터는 7일간의 부분 데이터입니다. 따라서 people은 완전한 json 객체가 아니므로 구문 분석이 비정상적으로 실패합니다. 🎜🎜🎜그럼 이때 데이터를 전송하는 방법은 두 가지가 있는데, 하나는 🎜🎜🎜🎜rrreee🎜와 같이 위 문자열의 & 기호를 모두 바꾸는 것입니다. 그러면 이때 수신된 데이터를 정상적으로 구문 분석할 수 있습니다. , 그러나 이름에 있는 &가 사라진 것을 알 수 있습니다. & 기호에 대한 특별한 요구 사항이 없는 경우, 즉 &가 특별한 의미를 나타내지 않는 경우 이를 바꾸거나 &를 다른 고유 문자로 바꿀 수 있습니다. 그런 다음 다시 교체하세요. 🎜🎜🎜물론 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, ''),
 })`
 },

总结

위 내용은 WeChat 애플릿으로 구현된 데이터 처리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!