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

前端之家收集整理的这篇文章主要介绍了微信小程序ajax实现请求服务器数据及模版遍历数据功能示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求。

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

头部标题底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个

。下面是app.json文件代码和相关注释

标题而已","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的代码

获取应用实例 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,格式如下

展示页面就简单了,变量wx:for 。index.wxml代码如下:

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

原文链接:https://www.f2er.com/weapp/34681.html

猜你在找的微信小程序相关文章