【移动应用开发技术】微信小程序中实现ajax请求服务器数据的示例

【移动应用开发技术】微信小程序中实现ajax请求服务器数据的示例

这篇文章主要介绍微信小程序中实现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:

'/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

}

})

}

})其中/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.ni