WeChat アプレットで実装されるデータ処理の詳細な説明

この記事では、WeChat ミニ プログラムのデータ処理に関する関連情報を主に紹介します。この記事の紹介は非常に詳細であり、必要な友人はぜひ参考にしてください。

はじめに

WeChat アプレットのデータ処理の中核は、js ファイル Page のデータです。これは、WXML と js の間の重要な橋渡しです。WXML ページに表示する必要があるデータは、データ内で定義する必要があります。そうしないと、ページ上に表示できません。 data 内のデータは、ネットワーク要求または何らかの論理処理を通じて設定および初期化されます。

データの設定方法は2通りあります。例えば、データに名前があり空に初期化する

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

データが複数ある場合は英語のカンマで区切ります。 '、その後、必要に応じてデータを変更するだけです

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

しかし、どの方法を使用しても、処理後、name の値は「現在の name 値は Code4Android」になります。this を渡すことができます。 data.name を使用して、name の値を取得します。これら 2 つの方法の違いは何ですか?という疑問があるかもしれません。 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")

🎜次に、name🎜🎜🎜🎜

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

🎜の値を表示するためのビューをWXMLで作成します。ページ上のデータを表示する必要がある場合。データ内の値を取得して表示するには中括弧を使用する必要があります。上記の 2 つの方法を使用すると、方法 1 を設定した後、ページ上のデータは変更されておらず、2 番目の方法を使用しても初期化された値のままであることがわかります。メソッド データが変更されるときは、2 つの違いを理解する必要があります。 🎜🎜🎜データが🎜🎜🎜🎜

 <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オブジェクトを変更して🎜🎜🎜🎜

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オブジェクトは完全に変更されている場合があります。データの一部を変更するだけで済みます。たとえば、上記では name 属性のみを変更する必要があります。address の値は変更されません。次のように変更できます🎜🎜🎜🎜rrreee🎜配列がある場合人々のオブジェクトが含まれています🎜🎜🎜🎜rrreee🎜データ型の値に配列がある場合、値が異なれば、異なる単語が表示されます。たとえば、type には中学校を表す 1、2、3 の 3 つの値があります。それぞれ学校、高校、大学。では、サーバーが値を返すとき、型の値を対応する文字表示に変換するにはどうすればよいでしょうか。ここでは 3 つの方法を提供します🎜🎜🎜🎜rrreee🎜 WXML ファイルでは、状態に応じて異なるスタイルを表示することがよくあります。このとき、たとえば、ビューはビューとして使用されます。 isSelected が true の場合、背景は赤、フォントの色は白になります。それ以外の場合、背景は灰色 (#ddd) になり、次の 2 つの方法でページ データを転送できます🎜🎜🎜🎜🎜 🎜🎜新しいページを開くとき、wx.navigateTo がよく使われます。新しく開いたページにデータを渡したい場合は、URL の後ろに を追加します。 key=value の形式で、複数のパラメータは & で区切られます。たとえば、🎜🎜🎜🎜rrreee🎜 navigateTo で新しいページを開いた後、新しいページは、options パラメータを持つ onLoad メソッドを制限します。 、そして options.name を渡すと、渡されたデータを取得できます。 🎜🎜上記で宣言した people などの Object オブジェクトを渡したい場合、URL で '?people='+people を結合すると、受信時にデータを正常に解析できないことがわかります。このとき、メソッドは 🎜🎜🎜🎜rrreee🎜 を渡し、 🎜🎜🎜🎜rrreee🎜 を通してそれを受け取ります。そして、obj は JSON オブジェクトであり、obj を通して属性値を取得できます。名前コード>。このままですべてうまくいくと思いますか？もちろんそうではありません。たとえば、上記の people オブジェクト データは次のようになります 🎜🎜🎜🎜rrreee🎜現時点では、上記のメソッドでデータを渡して <code>JSON.parse を渡すと、エラーが報告されます。エラーの原因を見ると、この時点で取得された people が完全な文字列ではないことがわかります。その理由は、name 属性に「&」が含まれており、アプレットは & より前の部分が people の値であると認識しているためです。 &以降のデータは7日間の部分データです。したがって、people は完全な json オブジェクトではないため、解析が異常に失敗します。 🎜🎜🎜それでは、この時点でデータを送信するにはどうすればよいでしょうか? 解決策は 2 つあります。 1 つは、🎜🎜🎜🎜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 中国語 Web サイトの他の関連記事を参照してください。