本文實例講述了微信小程序ajax實現請求服務器數據及模版遍歷數據功能。分享給大家供大家參考，具體如下：
昨天下載了一個微信小程序的開發者工具，大概看了一下文檔，簡單的用他的方法實現了ajax請求。
微信小程序文檔地址：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl
頭部標題和底部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，格式如下
展示頁面就簡單了，變量{{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>希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答
