本文分后三块来说,网络数据命令,文件操作方式,本地数据操作方式。牵涉至的示例代码地址:https://github.com/jsongo/weapp-tutorial-3
1、网络命令
(1)须要一个数据USB去测试
上篇文章中的数据,我们就是写下死去在page的data里的。实际应用领域中确实不能这么干活,就可以从后台命令,或从本地存储中以获取。
微信提供更多了一个USB用以发动命令:wx.request。而且它发动的命令,官方文档中说道,就可以就是https命令,且一个微信小程序,同时就可以存有5个网络命令相连接。
我们去修正一下上篇文章中使用的例子,我们把数据换成从36Kr那里以获取。稍微研究之下36Kr网站的页面,就可以辨认出一个大USB,用以拉取列表数据:
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就可以领到服务器返回的数据。完备代码可以参照github上的pages/index/index.js文件。
开发工具之前的化解版本,其实就是播发没法网络命令的。因为微信在工具里搞了一些安全管制,所以这里为了研发,我们得再回去化解开发工具。研究了有工具源码,找出一个地方可以对网络命令的地址搞检验的,把它记住就Ok。最新工具化解方法参照https://github.com/jsongo/weApp-ide ,有兴趣的读者可以至app.nw/app/dist/weapp/appservice/asdebug.js 文件中,找出下面这行代码,把if条件记住就可以用了,比较简单。
化解网络命令管制
(3)demo功能分析
直观几句话分析一下我们的36Kr新闻列表的demo。功能也挺直观,关上时从网络上命令36Kr的数据表明成一个列表,页面列表的每一项都可以步入查阅这篇文章的正文内容(只是个demo,所以就没取钱内容,轻易拎每个列表项的summary字段回去当正文)。列表页在顶部下拉可以创下列表,在最为底部往龙日可以读取更多。
化解网络命令管制
(4)demo数据分析
列表的分解成逻辑跟上篇文章的一样,只是数据的来源相同而已。主要代码的结构如下:
主代码
data里定义了两个属性,一个就是news数组,用以存取列表数据;refresh,用以同意上方的loading区域与否表明,只有用户在顶部下拉的时候,才可以表明最顶部的loading...区域,view中通过