微信小程序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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
Javascript里使用Dom操作Xml
Jan 22 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
微信小程序使用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 socke 向指定页面提交数据
2008/07/23 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vue header组件开发详解
2018/01/26 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
化学实验员岗位职责
2013/12/28 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
行为习惯主题班会
2015/08/14 职场文书
开网店计划分析
2019/07/30 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL