微信小程序ajax實現請求服務器數據及模版遍歷數據功能示例

2024-09-01 08:33:56

字體：大中小

來源：轉載

供稿：網友

本文實例講述了微信小程序ajax實現請求服務器數據及模版遍歷數據功能。分享給大家供大家參考，具體如下：

昨天下載了一個微信小程序的開發者工具，大概看了一下文檔，簡單的用他的方法實現了ajax請求。

微信小程序文檔地址：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl

微信小程序,ajax請求,服務器,模版,遍歷,數據

頭部標題和底部tab配置都在 app.json文件中，底部tab位最少兩個，最多五個。下面是app.json文件代碼和相關注釋

{ "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" }}

這里我是通過微信小程序wx.request實現ajax請求服務器數據的，一個程序里面最多能有五個這樣的請求。下面是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   }  }) }})

其中http://xx.xxxxx.com/xxx.php的返回數據格式是一個json，格式如下

微信小程序,ajax請求,服務器,模版,遍歷,數據

展示頁面就簡單了，變量{{array}} 微信模版遍歷數據使用 wx:for 。index.wxml代碼如下：

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

希望本文所述對大家微信小程序開發有所幫助。

注：相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。

上一篇：原生JavaScript實現Ajax異步請求

下一篇：原生JS寫Ajax的請求函數功能