微信小程序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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
用js简单提供增删改查接口
May 12 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
nodejs基础知识
2017/02/03 NodeJs
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
详解vue v-model
2020/08/31 Javascript
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
测试工程师岗位职责
2013/11/28 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
风之谷观后感
2015/06/11 职场文书
就业证明函
2015/06/17 职场文书
正规欠条模板
2015/07/03 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL