微信小程序通过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中输入验证中一个不错的效果
Aug 21 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
浅析js封装和作用域
Jul 09 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
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
php 日期时间处理函数小结
2009/12/18 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
创建Django项目图文实例详解
2019/06/06 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
一道SQL面试题
2012/12/31 面试题
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
学生干部学习的自我评价
2014/02/18 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
高中教师个人总结
2015/02/10 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python