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


Posted in Javascript onDecember 15, 2017

本文实例讲述了微信小程序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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
微信小程序使用request网络请求操作实例
Dec 15 #Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 #Javascript
Angular中管道操作符(|)的使用方法
Dec 15 #Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 #Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 #Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 #Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
You might like
PHP邮件专题
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
jQuery Tools tab使用介绍
2012/07/14 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python 动态绘制爱心的示例
2020/09/27 Python
Python collections模块的使用方法
2020/10/09 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
卫校中专生的自我评价
2014/01/15 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
单位委托书怎么写
2014/09/21 职场文书
委托函范文
2015/01/29 职场文书
2016中秋节问候语
2015/11/11 职场文书