WeChat-Applet-Ajax-Implementierung fordert Serverdateninstanz an

Gestern habe ich ein WeChat-Applet-Entwicklertool heruntergeladen, kurz die Dokumentation gelesen und einfach seine Methode verwendet, um eine Ajax-Anfrage zu implementieren. In diesem Artikel wird hauptsächlich die Funktion zum Anfordern von Serverdaten und zum Durchlaufen von Daten über das WeChat-Applet Ajax vorgestellt. Er analysiert die Betriebsfähigkeiten im Zusammenhang mit dem Aufruf von WeChat-Applets und der Vorlage wx:for-Schleifenliste in Form von Beispielen Ich hoffe, es kann allen helfen.

Der Kopfzeilentitel und die Konfiguration des unteren Tabs befinden sich beide in der Datei app.json. Die Position des unteren Tabs beträgt mindestens zwei und höchstens fünf . Das Folgende ist der app.json-Dateicode und zugehörige Kommentare

{
 "pages":[
  "pages/index/index",
  "pages/tucao/tucao",
  "pages/center/center"
 ],
 "window":{
  "backgroundTextStyle":"",
  "navigationBarBackgroundColor": "red",
  "navigationBarTitleText": "一个标题而已",
  "navigationBarTextStyle":"white"
 },
 "tabBar": {
  "list": [{
   "pagePath": "pages/index/index",
   "text": "首页",
   "iconPath": "/images/public/menu-cd.png",
   "selectedIconPath": "/images/public/menu.png"
  },{
   "pagePath": "pages/tucao/tucao",
   "text": "吐槽",
   "iconPath": "/images/public/hot-cd.png",
   "selectedIconPath": "/images/public/hot.png"
  },{
   "pagePath": "pages/center/center",
   "text": "我的",
   "iconPath": "/images/public/center-cd.png",
   "selectedIconPath": "/images/public/center.png"
  }],
  "borderStyle": "white"
 }
}

Hier kann ich eine Ajax-Anfrage für Serverdaten über das WeChat-Applet implementieren wx.request Bis zu Es gab fünf solcher Anfragen. Das Folgende ist der Code von index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  Industry:{}
 },
 onLoad: function (res) {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  })
  wx.request({
   url: 'http://xx.xxxxx.com/xxx.php',//上线的话必须是https，没有appId的本地请求貌似不受影响
   data: {},
   method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   // header: {}, // 设置请求的 header
   success: function(res){
    console.log(res.data.result)
    that.setData({
     Industry:res.data.result
    })
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })
 }
})

Das Rückgabedatenformat von http://xx.xxxxx.com/xxx.php ist ein JSON Das Format ist wie folgt:

Die Anzeige der Seite ist einfach, die Variable {{array}} wird für WeChat-Vorlagendurchlaufdaten wx:for verwendet. Der index.wxml-Code lautet wie folgt:

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
</view>
<view wx:for="{{Industry}}" wx:ket="{{index}}">
  {{index}}：{{item.name}}
</view>

Verwandte Empfehlungen:

Detaillierte Erläuterung des Beispiels für den WeChat-Applet-Request-Netzwerkanforderungsvorgang

So implementieren Sie die Dropdown-Listenfunktion des WeChat-Applets

So verwenden Sie das Aktionsblatt, um das untere Menü des WeChat-Applets aufzurufen

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Ajax-Implementierung fordert Serverdateninstanz an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!