微信小程序使用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 相关文章推荐
浅说js变量
May 25 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 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定时任务延缓执行的实现
2014/10/08 PHP
php中上传文件的的解决方案
2018/09/25 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
js制作提示框插件
2020/12/24 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
python中的装饰器详解
2015/04/13 Python
python:socket传输大文件示例
2017/01/18 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python根据时间获取周数代码实例
2019/09/30 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
检察官就职演讲稿
2014/01/13 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
工作态度检讨书
2014/02/11 职场文书
12月红领巾广播稿
2014/02/13 职场文书
体育比赛口号
2014/06/09 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python