微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例


Posted in Javascript onMarch 30, 2019

本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作。分享给大家供大家参考,具体如下:

微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可。现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法:

官方文档给出了示例代码,但是我这边自己进行了简单的处理:

index.js

Page({
 data: {
 },
 onLoad: function () {
  var that = this
  wx.request({
   url: 'http://www.likeyunba.com/test/test.json',
   headers: {
    'Content-Type': 'application/json'
   },
   success: function (res) {
    //将获取到的json数据,存在名字叫list的这个数组中
    that.setData({
     list: res.data,
     //res代表success函数的事件对,data是固定的,list是数组
    })
   }
  })
 }
})

上面的url是json数据

test.json

[
  {
    "id":"1",
    "title":"测试数据1"
  },
  {
    "id":"2",
    "title":"测试数据2"
  },
  {
    "id":"3",
    "title":"测试数据3"
  },
  {
    "id":"4",
    "title":"测试数据4"
  },
  {
    "id":"5",
    "title":"测试数据5"
  },
  {
    "id":"6",
    "title":"测试数据6"
  },
  {
    "id":"7",
    "title":"测试数据7"
  },
  {
    "id":"8",
    "title":"测试数据8"
  },
  {
    "id":"9",
    "title":"测试数据9"
  }
]

index.wxml

<view wx:for="{{list}}" wx:key="list">
 <view>{{item.id}}</view>
 <view>{{item.title}}</view>
</view>

然后wxml是首页,渲染json数据的,这是一个for循环(wx.for),wx:key="list"干嘛用的?
如果我们没有wx:key="list",那么在控制台会报错,但是这个报错并不影响页面的渲染,基本可以忽略掉!

Now you can provide attr "wx:key" for a "wx:for" to improve performance.这是报错信息

wx:key用来对列表渲染的数据指定一个"主键”,以加快列表渲染的速度。以下是官方文档原话:如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。如果你一定想去掉这个警告,可以在wx:for的组件属性里增加一个 wx:key="unique",unique请替换成数据绑定列表里的任意一个字段的字段名,比如文章列表数据中的字段“postId”,即wx:key="postId"。不建议使用wx:key="*this"

微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

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

Javascript 相关文章推荐
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
详解puppeteer使用代理
Dec 27 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 #Javascript
vue路由--网站导航功能详解
Mar 29 #Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 #Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 #Javascript
详解vue项目打包步骤
Mar 29 #Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
Vue项目history模式下微信分享爬坑总结
Mar 29 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python使用正则筛选信用卡
2019/01/27 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python查看数据类型的方法
2019/10/12 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
用C语言实现文件读写操作
2013/10/27 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
结婚典礼证婚词
2014/01/11 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL