微信小程序使用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 相关文章推荐
jquery固定底网站底部菜单效果
Aug 13 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
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
网站当前的在线人数
2006/10/09 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
python encode和decode的妙用
2009/09/02 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python实现猜单词游戏
2020/05/22 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
中间件分为哪几类
2016/09/18 面试题
护士专业推荐信
2013/11/02 职场文书
校运会广播稿100字
2014/01/27 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
经营管理策划方案
2014/05/22 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server