WeChat-Applet-Ajax-Implementierung fordert Serverdateninstanz an

小云云
Freigeben: 2017-12-18 09:30:17
Original
4056 Leute haben es durchsucht

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"
 }
}
Nach dem Login kopieren

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
   }
  })
 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!