微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能。分享给大家供大家参考，具体如下：

昨天下载了一个微信小程序的开sOyTL发者工具，大概看了一下文档，简单的用他的方法实现了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",sOyTL

"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",

http:// "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代码如下：

{{userInfo.nickName}}

{{index}}：{{item.name}}

希望本文所述对大家微信小程序开发有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。