Ausführliche Erklärung und Beispiele der Dateninteraktion und Darstellung des WeChat-Applets

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erläuterung der Dateninteraktion und zum Rendern von Beispielen für das WeChat-Applet vorgestellt. Freunde in Not können sich auf

WeChat-Applet-Dateninteraktion und -Rendering

Implementierungs-Renderings:

Die API des WeChat-Applets stellt eine API für die Netzwerkinteraktion bereit. Wir müssen sie nur aufrufen, um mit ihr zu kommunizieren Das Backend ist die API wx.request.

//list.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  list:[], 
  hiddenLoading: true, 
  url: '' 
 }, 
 loadList: function () { 
  var that = this; 
  that.setData({ 
   hiddenLoading: !that.data.hiddenLoading 
  }) 
  var url = app.urls.CloudData.getList; 
  that.setData({ 
   url: url 
  }); 
  wx.request({ 
   url: url, 
   data: {}, 
   method: 'GET', 
   success: function (res) { 
    var list= res.data.list; 
    if (list == null) { 
     list = []; 
    } 
    that.setData({ 
     list: list, 
     hiddenLoading: !that.data.hiddenLoading 
    }); 
     wx.showToast({ 
     title: "获取数据成功", 
     icon: 'success', 
     duration: 2000 
    }) 
   }, 
   fail: function (e) { 
    var toastText='获取数据失败' + JSON.stringify(e); 
    that.setData({ 
     hiddenLoading: !that.data.hiddenLoading 
    }); 
    wx.showToast({ 
     title: toastText, 
     icon: '', 
     duration: 2000 
    }) 
   }, 
   complete: function () { 
    // complete 
   } 
  }), 
 //事件处理函数 
 bindViewTap: function () { 
  wx.navigateTo({ 
   url: '../logs/logs' 
  }) 
 }, 
 onLoad: function () { 
 
 }, 
 onReady: function () { 
  this.loadList(); 
 }, 
 onPullDownRefresh: function () { 
  this.loadList(); 
  wx.stopPullDownRefresh() 
 } 
})

In der Funktion „loadList“ wird eine Netzwerkanforderung gestellt und die angeforderten Daten werden in die Datenliste eingefügt. Wir verwenden setData, um die Liste zu ändern. Nach dem Aufruf dieser Funktion ermittelt das WeChat-Applet-Framework die Änderung des Datenstatus, führt dann eine Diff-Beurteilung durch und gibt sie an die Schnittstelle weiter, wenn es eine Änderung gibt. Dies ähnelt der Rendering-Methode von React.js. Sie verwaltet intern hauptsächlich ein Objekt, das einem virtuellen Dokument ähnelt, und rendert dann die Schnittstelle durch Beurteilung des virtuellen Dokuments, was die Leistung erheblich verbessern kann.

Hier haben wir auch einen Pulldown-Aktualisierungsauslöser erstellt, d. h. die Funktion onPullDownRefresh. Um die Pulldown-Aktualisierung verwenden zu können, müssen wir sie jetzt nur noch konfigurieren Es wird wirksam, also konfigurieren Sie es einfach im JSON der entsprechenden Seite. Ja, es kann in list.json konfiguriert werden.

list.json

{ 
  "navigationBarTitleText": "产品列表",   
  "enablePullDownRefresh":true 
}

Wenn alle Seiten wirksam werden sollen, können Sie dies im Fenster in app.json konfigurieren.

app.json

{ 
 "pages":[ 
  "pages/index/index", 
  "pages/logs/logs", 
  "pages/list/list" 
 ], 
 "window":{ 
  "backgroundTextStyle":"light", 
  "navigationBarBackgroundColor": "#fff", 
  "navigationBarTitleText": "WeChat", 
  "navigationBarTextStyle":"black", 
  "enablePullDownRefresh":true 
 } 
}

In app.json gibt es auch eine Seite. Die Seiten, die wir weiterleiten müssen, müssen hier registriert werden, sonst können sie nicht weitergeleitet werden.

Beim Anfordern von Daten wurden Eingabeaufforderungen zum Warten und Erhalten von Erfolg und Misserfolg hinzugefügt. Dafür ist eine entsprechende Seitenkooperation erforderlich.

<!--list.wxml--> 
<view> 
 <!--默认隐藏--> 
 <loading>正在加载</loading> 
 <scroll-view> 
  <view> 
   <block> 
    <view> 
     <view> 
      <text>{{item.no}}({{item.content}})</text> 
     </view> 
    </view> 
   </block> 
  </view> 
 </scroll-view> 
</view>

/**list.wxss**/ 
 
.widget { 
 position: relative; 
 margin-top: 5rpx; 
 margin-bottom: 5rpx; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
 padding-left: 40rpx; 
 padding-right: 40rpx; 
 border: #ddd 1px solid; 
}

/**app.wxss**/ 
.container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: space-between; 
 box-sizing: border-box; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
}

Vielen Dank fürs Lesen !

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung und Beispiele der Dateninteraktion und Darstellung des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!