专业 靠谱 的软件外包伙伴

您的位置:首页 > 新闻动态 > 微信小程序软件外包开发案例——对接服务端账目CRUD

微信小程序软件外包开发案例——对接服务端账目CRUD

2016-10-28 14:38:21

微信小程序记账应用实例课程(完结)——对接服务端账目CRUD

由单机版升级为网络版

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){ //成功回调,本地缓存accessToken

var 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){ //成功回调,本地缓存accessToken

var 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,渲染wxml

app.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');

}

...

提交到网络

// 本条数据打包成json

var 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; // 本条数据打包成json

var 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>

 

关于:中科研拓
深圳市中科研拓科技有限公司专注提供软件外包、app开发、智能硬件开发、O2O电商平台、手机应用程序、大数据系统、物联网项目等开发外包服务,十年研发经验,上百成功案例,中科院软件外包合作企业。通过IT技术实现创造客户和社会的价值,致力于为用户提供很好的软件解决方案。联系电话400-0316-532,邮箱sales@zhongkerd.com,网址www.zhongkerd.com


  上一篇   [返回首页] [打印] [返回上页]   下一篇