Explication détaillée et exemples d'interaction de données et de rendu de l'applet WeChat

Cet article présente principalement les informations pertinentes sur l'explication détaillée de l'interaction des données et des exemples de rendu de l'applet WeChat. Les amis dans le besoin peuvent se référer à

Interaction et rendu des données de l'applet WeChat

Rendu d'implémentation :

L'API de l'applet WeChat fournit une API pour l'interaction réseau. Il suffit de l'appeler pour communiquer avec. le backend. Pour l'interaction des données, l'API est wx.request. Le code spécifique est le suivant.

//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() 
 } 
})

Une requête réseau est effectuée dans la fonction loadList, et les données demandées sont placées dans la liste de données. Nous utilisons setData pour modifier la liste. Après avoir appelé cette fonction, le framework d'applet WeChat déterminera le changement d'état des données, puis effectuera un jugement différentiel et le restituera à l'interface s'il y a un changement. Ceci est similaire à la méthode de rendu de React.js. Elle maintient principalement un objet similaire à un document virtuel en interne, puis restitue l'interface en jugeant le document virtuel, ce qui peut considérablement améliorer les performances.

Ici, nous avons également créé un déclencheur d'actualisation déroulant, c'est-à-dire la fonction onPullDownRefresh. Afin de pouvoir utiliser l'actualisation déroulante, nous devons maintenant le configurer uniquement. prendre effet, il suffit donc de le configurer dans le json de la page correspondante. Oui, il peut être configuré dans list.json.

list.json

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

Si vous avez besoin que toutes les pages prennent effet, vous pouvez le configurer dans la fenêtre de app.json.

app.json

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

Dans app.json, il y a aussi des pages. Les pages que nous devons acheminer doivent être enregistrées ici, sinon elles ne peuvent pas être acheminées.

Lors de la demande de données, des invites d'attente et d'obtention du succès et de l'échec ont été ajoutées. Cela nécessite la coopération de la page correspondante. Le code de la page list.wxm est le suivant

<!--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; 
}

Merci d'avoir lu, j'espère que cela pourra aider tout le monde. !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!