DDR爱好者之家 Design By 杰米
实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上。
那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上。
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.代码
分解图
<1>首先上一段知乎接口数据的json格式中的开头
"date":"20161114", "stories":[ { "images":[ "http://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg" ], "type":0, "id":8975316, "ga_prefix":"111422", "title":"小事 · 我和你们一样" }, { "images":[ "http://jb51.net/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="/UploadFiles/2021-04-02/{{item.image}}">看完这个代码,你会想,根据微信小程序的绑定原理,这里边的代码哪里调用了onLoad()这个函数,不用多想,微信小程序给你省略了这些步骤。直接调用zhihu这个数组就行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年11月28日
2024年11月28日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]