腾讯犀牛鸟云开发校园技术布道师养成计划第五天


网络API

数据和文件是小程序开发非常重要的元素,在前面的章节里,数据和文件等的存储都是在小程序的页面进行渲染、或是页面间传递或与本地手机交互。

数据API

小程序以及很多程序的API是预先就已经写好的函数,使我们不需要对底层有太多了解,只需要按照技术文档进行传递参数就能调用出非常复杂的功能。而还有一类API则侧重于把数据资源给开放出来,我们可以通过HTTP的方式来使用这些数据。

了解网络数据API

//知乎日报的最新话题
https://news-at.zhihu.com/api/4/news/latest
 
//知乎日报某一个话题的内容
https://news-at.zhihu.com/api/4/news/9714883
 
//v2ex论坛的最新主题
https://www.v2ex.com/api/topics/latest.json
 
//CNode论坛的最新话题
https://cnodejs.org/api/v1/topics

练手API资源推荐

  • 聚合API:一个比较全面的综合性API服务平台
  • 即速API:也是提供一些综合性的API服务
  • V2EX API:v2ex论坛是很多程序员经常会光顾的综合性技术论坛
  • CNode API:Nodejs交流论坛
  • 和风天气:含天气预报、空气质量、实况天气等数据
  • Github API:Github是所有程序员都(必须)会使用的网站
  • 知乎日报API:知乎日报API分析

渲染网络数据到页面

要渲染从API里获取到的数据,首先我们需要对API里的字段(属性)到底是干什么的要有一定的了解。

获取网络数据

域名校验与白名单

res对象和res.data对象

技术文档:wx.request网络数据请求

  • statusCode:开发者服务器返回的 HTTP 状态码,也就是指示HTTP请求是否成功,其中200为请求成功404请求失败,更多状态码的知识可以查阅MDN HTTP响应代码
  • header:开发者服务器返回的 HTTP消息头,其中Content-Type为服务器文档的MIME 类型,API的MIME类型通常为 “application/json; charset=UTF-8”,建议服务器返回值使用 UTF-8 编码(如果你有服务器的话)。
  • wx.request只能发起 HTTPS 请求,默认超时时间为60s,最大并发限制为10个

将数据渲染到页面

简单的知乎日报首页

打开开发者工具调试工具栏的AppData标签页,就能看到从网络API里获取到的数据。也可以在此处编辑数据,并及时地反馈到界面上。如果AppData里有数据,可以确认页面已经取得res里的data数据,如果数据没有渲染到页面,说明列表渲染可能有误。通过这种方式可以诊断页面渲染问题所在。

详情页数据渲染

HTML标签解析rich-text

只需要将富文本对象放在rich-text的nodes里,就能将富文本解析出来了,比如将上面的替换成以下代码。

<rich-text nodes="{{body}}"></rich-text>

跨页面数据渲染

解构赋值

解构赋值也就是从数组Array和对象Object中提取值,按照对照的位置,对变量进行赋值,简写

let { title, body, image, share_url}=res.data

历史上的今天

注册历史上的今天的服务

注册聚合API并认证,认证之后可以申请开通历史上的今天、图书电商数据等免费的API服务,并找到你的与之对应的AppKey

替换下面链接你的历史上的今天对应的key(直接输AppKey就行),然后在浏览器打开链接(下面这个是1.0版)

http://api.juheapi.com/japi/toh?month=9&day=15&key=d68ed793a10607f864d31744f986e8d6

将一些通用的数据、函数单独拿出来存放在globalData里或进行模块化,是在实际开发中会经常使用到的一种方法,它可以让数据、函数更容易管理以及可以重复利用,使得代码更加精简。

wx.request请求数据

wx.request里的data就是要传入的参数,我们把month、day、key传入到请求的链接里。它等价于以下链接(注意把data里的属性值,以免传两次参数)

2020-03-21 21-04-34 的屏幕截图.png

天气API

技术文档:和风常规天气数据API

encodeURI与decodeURI

在浏览网页的时候我们经常看到汉字或一些字符变成了一个“乱码”,原因就在于链接进行了编码处理。encodeURI() 函数可把字符串作为 URI 进行编码,而decodeURI()函数则可以进行解码。

腾讯地图LBS

如果想在小程序中调用地图的POI检索(POI,即兴趣点Point of Interest,区域内搜索酒店、学校、ATM等)、 关键词输入提示、地址解析、逆地址解析、行政区划、距离计算、路径规划等数据服务,这时候就需要使用到地图类相关的API。

地图API:腾讯LBS位置服务

md5加密算法

WebServiceAPI Key配置中签名校验里提到我们使用WebServiceAPI的方法需要对请求路径+”?”+请求参数+SK进行拼接,并计算拼接后字符串md5值,即为签名(sig)。MD5是计算机安全领域广泛使用到的一种加密算法,主要用于确保消息传输的完整一致。

md5依赖:md5开源项目下载链接

坐标逆解析

坐标的逆解析就是坐标(latitude,longitude)转化为详细的地址名。

小程序使用腾讯地图位置服务,还有一种更加简单的方法,具体可以阅读《微信小程序:个性地图使用指南


文章作者: 毛雷
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 毛雷 !
评论
  目录