#由单机版升级为网络版

##1.缓存accessToken，以后作为令牌使用，uid不必缓存，由服务端完成映射，user/login接口

先来回顾一下app.js封装的httpService的代码实现：

  httpService:function(uri, param, cb) {
//    分别对应相应路径，参数，回调wx.request({url: 'http://financeapi.applinzi.com/index.php/' + uri,data: param,header: {'Content-Type': 'application/json'},success: function(res) {cb(res.data)},fail: function() {console.log('接口错误');}})  }

调用的是wx.request接口，返回res.data即为我们服务器返回的数据，结构与wx.request返回的类似，这里多一层结构，不可混淆。

response.code,response.msg,response.data是我自己服务端定义的结构

res.statusCode,res.errMsg,res.data是微信给我们定义的结构

而我们的response又是包在res.data中的，所以正常不加封装的情况下，要取得我们自己服务端返回的目标数据应该是写成,res.data.data.accessToken；好在已经作了封装，不会那么迷惑人了，今后调用者只认response.data就可以拿到自己想要的数据了。

明白了上述关系与作了封装后，我们调用起来就方便了，index.js中onShow写上如下代码

app.httpService('user/login',{openid: userInfo.nickName}, function(response){//成功回调，本地缓存accessTokenvar accessToken = response.data.accessToken;wx.setStorageSync('accessToken', accessToken);});

app.js onLaunch调用如下代码，在程序启动就登录与缓存accessToken。

之所以不在index.js中调用登录，是因为app launch生命周期较前者更前，accessToken保证要加载item/all之前生成并缓存到本地

  onLaunch: function () {//调用应用实例的方法获取全局数据var that = this//调用登录接口wx.login({success: function () {wx.getUserInfo({success: function (res) {//请求登录that.httpService('user/login',{openid: res.userInfo.nickName}, function(response){//成功回调，本地缓存accessTokenvar accessToken = wx.getStorageSync('logs') || '';accessToken = response.data.accessToken;wx.setStorageSync('accessToken', accessToken);});}})}})},

##2.请求网络，对接获取的账目列表，item/all接口

使用onShow而不使用onLoad，是因为每次添加返回后首页需要自刷新

response是服务器返回的数据

而response.data中包含了自己的账目列表信息

{"code": 200,"msg": "加载成功","data": [{"id": "21","title": "工资","cate": "+","account": "6500.0","date": "2016-10-22","uid": "8"},{"id": "20","title": "超市购物","cate": "-","account": "189.0","date": "2016-10-21","uid": "8"},{"id": "12","title": "抢红包","cate": "+","account": "20.5","date": "2016-10-30","uid": "8"}]
}

读取代码：

  onShow: function () {var that = this// 获取首页列表，本地storage中取出accessToken作为参数，不必带上uid；// 成功回调后，设置为data，渲染wxmlapp.httpService('item/all', {'accessToken': wx.getStorageSync('accessToken')}, function(response){that.setData({'items':response.data});});}

布局代码：

<block wx:for="{{items}}"><view class="news-item" data-title="{{item.title}}"><view class="news-text"><text class="news-title">{{item.title}}</text><view class="news-stamp"><text wx:if="{{item.cate == '-'}}" class="sign-green">{{item.cate}} {{item.account}}</text><text wx:else class="sign-red">{{item.cate}} {{item.account}}</text><text>{{item.date}}</text></view></view></view></block>

##2.请求网络，对接账目，item/add接口

拿到表单组件上的各值，title,record,cate,date，而accessToken我们就在httpService方法统一注入。

  httpService:function(uri, param, cb) {// 如果令牌已经存在，那么提交令牌到服务端if (wx.getStorageSync('accessToken')) {param.accessToken = wx.getStorageSync('accessToken');}...

提交到网络

    // 本条数据打包成jsonvar record = {title: this.data.title,cate: this.data.cate,account: this.data.account,date: this.data.date}// accessToken放在record传入也可以，但为了更多的复用，我将它放在httpService时统一注入// 访问网络var app = getApp();app.httpService('item/add',record,function(response) {// 提示框that.setData({modalHidden: false});});

##3.首页传id值，编辑页面访问网络并显示数据

1.从首页列表传item对象的id号到item页面

<view class="news-item" data-id="{{item.id}}" bindtap="itemTap">

2.绑定data-id到点击单元格事件itemTap

var id = parseInt(e.currentTarget.dataset.id);

3.使用navigate传值

    wx.navigateTo({url: '../item/item?id='+id})

4.item页面接收id值，并作判断有无id号

  onLoad: function (options) {this.setData({id:options.id,})}

5.读取网络返回的数据与渲染到页面

    var that = this;if (options.id) {// 访问网络var app = getApp();app.httpService('item/view',{id: options.id},function(response){that.setData({id: response.data.id,title: response.data.title,cate: response.data.cate,account: response.data.account,date: response.data.date});});}

6.并将button按钮绑定为update方法

    <button wx:if="{{id}}" class="button" type="primary" bindtap="update">编辑</button><button wx:else class="button" type="primary" bindtap="save">添加</button>

7.修改账目提交到网络，item/update

客户端update方法

update: function(){var that = this;// 本条数据打包成jsonvar record = {title: this.data.title,cate: this.data.cate,account: this.data.account,date: this.data.date,id: this.data.id}// accessToken放在record传入也可以，但为了更多的复用，我将它放在httpService时统一注入// 访问网络var app = getApp();app.httpService('item/update',record,function(response) {// 提示框that.setData({modalHidden: false});});},

8.删除账目,item/del接口

方法实现

  delete: function () {var that = this;// 访问网络，删除账目var app = getApp();app.httpService('item/del',{id: that.data.id},function(response){// 提示框that.setData({modalTitle: '删除成功',modalHidden: false});});},

布局页面

先判断是否有id值，有则在编辑按钮正文出现删除按钮

    <button wx:if="{{id}}" class="button" type="default" bindtap="delete">删除</button>

源码下载：关注下方的公众号->回复数字1002

对小程序开发有趣的朋友关注公众号: huangxiujie85，QQ群: 581513218，微信: small_application，陆续还将推出更多作品。