【微信小程序开发•系列文章三】数据层

最新推荐文章于 2024-03-13 11:20:58 发布

置顶

jsongo

最新推荐文章于 2024-03-13 11:20:58 发布

阅读量3.8k

点赞数

分类专栏：微信小程序文章标签：微信小程序 js 微信 MINA框架

本文链接：https://blog.youkuaiyun.com/lingyb011/article/details/53067228

版权

关于数据层的一些基本应用，在上两篇文章中其实已经提过。一个是App({…}) 里定义的globalData，用来全局共享数据。另一个是每个Page自己的数据字段data: { … }
本文分三块来讲，网络数据请求，文件操作，本地数据操作。涉及到的示例代码地址：https://github.com/jsongo/weapp-tutorial-3

1、网络请求

（1）需要一个数据接口来测试
上篇文章中的数据，我们是写死在page的data里的。实际应用中肯定不会这么干，只能是从后台请求，或从本地存储中获取。
微信提供了一个接口用来发起请求：wx.request。而且它发起的请求，官方文档中说，只能是https请求，且一个微信小程序，同时只能有5个网络请求连接。

我们来修改一下上篇文章中用到的例子，我们把数据改成从36Kr那里获取。稍微研究下36Kr网站的页面，就会发现一个小接口，用来拉取列表数据：
API：Get http://36kr.com/api/info-flow/main_site/posts?b_id=5053833&per_page=20&_=1475166251729
url参数：bid表示上次列表拉到第几条，那条的id；per_page表示要拉取多少条；最后的下划线表示当前的时间戳，这个可以省略。
返回：json格式的数据，结构如下
36Kr返回列表数据
其中，当code为0时，表示没有error，这时拿到的response.data.items就是我们要的数据列表，我们只取每一项里的几个数据就可以了。请求的地址不是https，不过可以发现，我们把地址改成https，也可以请求到数据，说明36Kr后台做了https的接入。

（2）发起请求
wx.request的用法其实跟ajax的调用很像。

…
wx.request({
  url: url,
  data: {},
  header: {
      'Content-Type': 'application/json'
  },
  success: function(res) {
    … // use res.data
  }
})
…

它有几个主要的参数：url指定请求地址；data带上请求的数据，可能是json数据也可以是字符串；header设置请求的头部信息，如上面所示；method指定请求的方式，默认是GET，其它值有：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT；另外，success用来指定请求成功的回调，fail是失败的回调，还有一个complete，成功或失败都会回调。

以上代码中，在success回调里拿到res是一个json数据，格式如：{data: xxx} ，res.data就可以拿到服务器返回的数据。完整代码可以参考