微信小程序通过api接口将json数据展现到小程序示例


Posted in Javascript onJanuary 20, 2017

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上。

那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上。

1.用到的知识点

<1> wx.request 请求接口资源(微信小程序api中的发起请求部分)

<2>swiper 实现轮播图的组件

<3>wx:for 循环语句

<4>微信小程序的基础知识

2.实现原理

首先,先看一下这个请求函数

wx.request({
 url: '******', //这里填写你的接口路径
 header: { //这里写你借口返回的数据是什么类型,这里就体现了微信小程序的强大,直接给你解析数据,再也不用去寻找各种方法去解析json,xml等数据了
  'Content-Type': 'application/json'
 },
 data: {//这里写你要请求的参数
  x: '' ,
  y: ''
 },

 success: function(res) {
 //这里就是请求成功后,进行一些函数操作
 console.log(res.data)
 }
})

3.代码

分解图

微信小程序通过api接口将json数据展现到小程序示例

<1>首先上一段知乎接口数据的json格式中的开头

"date":"20161114",
 "stories":[
  {
   "images":[
    "http://3water.com.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"
   ],
   "type":0,
   "id":8975316,
   "ga_prefix":"111422",
   "title":"小事 · 我和你们一样"
  },
  {
   "images":[
    "http://3water.com/7c908a5940384123fd88287dbc6a2c98.jpg"
   ],
   "type":0,
   "id":8977438,
   "ga_prefix":"111421",
   "title":"成长嘛,谁说就意味着一定要长大了?"
  },

<2>index.js中

Page({
 data: {
  duration: 2000,
  indicatorDots: true,
  autoplay: true,
  interval: 3000,
  loading: false,
  plain: false
 },
 onLoad: function () {
 var that = this//不要漏了这句,很重要
 wx.request({
  url: 'http://news-at.zhihu.com/api/4/news/latest',
  headers: {
  'Content-Type': 'application/json'
  },
  success: function (res) {
  //将获取到的json数据,存在名字叫zhihu的这个数组中
   that.setData({
   zhihu: res.data.stories,
   //res代表success函数的事件对,data是固定的,stories是是上面json数据中stories

   })
  }
 })


 }
})

<3> index.wxml中

<view >
<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">//这里边的属性不重要,看下边
 <block wx:for="{{zhihu}}">
  <swiper-item class="banner" >
   <image src="{{item.image}}" data-id="{{item.b}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
   <text class="banner-title">{{item.title}}</text>
  </swiper-item>
 </block>
</swiper>

</view>

看完这个代码,你会想,根据微信小程序的绑定原理,这里边的代码哪里调用了onLoad()这个函数,不用多想,微信小程序给你省略了这些步骤。直接调用zhihu这个数组就行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JS中操作JSON总结
Dec 06 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
redux.js详解及基本使用
May 24 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 #Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 #Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 #Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 #Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 #Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 #Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 #Javascript
You might like
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php判断当前操作系统类型
2015/10/28 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
原生JS轮播图插件
2017/02/09 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
促销活动总结
2014/04/28 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书