微信小程序使用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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
js Dom实现换肤效果
Oct 21 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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
redis 队列操作的例子(php)
2012/04/12 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php常用图片处理类
2016/03/16 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
简介Django中内置的一些中间件
2015/07/24 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python实现杨氏矩阵查找
2019/03/02 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python标准库os库的函数介绍
2020/02/12 Python
django中的数据库迁移的实现
2020/03/16 Python
numpy库reshape用法详解
2020/04/19 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
html5唤起app的方法
2017/11/30 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
个人求职信范文分享
2014/01/31 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
见习期个人总结
2015/03/05 职场文书
公司岗位说明书
2015/10/08 职场文书