范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序实战记账功能开发

07-07 亚博APP
摘要:在微信官方开辟者此前的更新中,Picker的mode属性已撑持date和time(background-image的bug也修复),在是来更新此实例。

在微信官方开辟者此前的更新中,Picker的mode属性已撑持date和time(background-image的bug也修复),在是来更新此实例。

若何实实际现集成日期组件开辟,方针完成以下图

/

步调,在item.wxml文件中增添一个picker组件,以下: 日期: {{date}}

如图

/

从图中可以看出:

1.日期后面是空白的,应当默许显示今天日期;

2.点击肯定也没有显示到组件上,需要实现bindDateChange方式。

在是我们需要在item.js文件中,声明一个data值date与wxml中的{{date}}绑定联系关系

然后在onLoad中初始化字符串格局的日期值,具体申明见注释:

// 获得当前日期 var date = new Date();

// 格局化日期为YYYY-mm-dd var dateStr = date.getFullYear() + - + (date.getMonth() + 1) + - + date.getDate();

// 存回data,以衬着到页面 this.setData({ date: dateStr })

颠末如上处置,日期组件已显示为当前日期

如图

/

处置到此,我们还需要修复一个逻辑毛病,即组件的竣事日期应当不跨越当日,做法也很简单,只需要在wxml文件中对picker的日期属性end由2017-09-01改成{{date}}便可

吐槽一下,官方的picker的仍是有bug的,完全不听start与end使唤,仍可以选肆意日期,临时不去理睬,代码就这么写着,甚么时辰开辟东西修复了天然可以了,究竟是此刻还只是内测,就迁就用着。 接下来处置日期组件点击确认事务bindDateChange

回到item.js文件

声明一个bindDateChange方式,添加以下代码以写回data中的date值

// 点击日期组件肯定事务

bindDateChange: function(e) {

this.setData({ date: e.detail.value }) }

至此,已实现集成日期picker组件。剩下的就是将它同之前的题目、类型、金额字段那样存在json再当地setStorage存储便可,这里不作赘述,具体可以参考本人公家号之前发的文章《微信小法式(利用号)实战课程之记账利用开辟》。

width=700

小法式端经由过程微信第三方登录,掏出nickname向办事端要求登录,成功后当地并缓存uid,accessToken

App({ onLaunch: function() { wx.login({ success: function(res) { if (res.code) { //倡议收集要求 wx.request({ url: \'https://亚博test.com/onLogin\', data: { code: res.code } }) } else { console.log(\'获得用户登录态掉败!\' + res.errMsg) } } }); } })

缓存用户的根基信息

index.js

onLoad: function(){

var that = this

//挪用利用实例的方式获得全局数据 app.getUserInfo(function(userInfo){ //要求登录 console.log(userInfo.nickName); app.httpService( \'user/login\', { openid: userInfo.nickName }, function(response){ //成功回调 console.log(response);

// 当地缓存uid和accessToken var userinfo = wx.getStorageSync(\'userinfo\') || {}; userinfo[\'uid\'] = response.data.uid; userinfo[\'accessToken\'] = response.data.accessToken; console.log(userinfo); wx.setStorageSync(\'userinfo\', userinfo); } ); }) }

app.js

界说一个通用的收集拜候函数:

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(\'接口毛病\'); }

})

},

这里method默许为get,假如设置为其他,好比post,那末办事端怎样也取不到值,在是改动了办事真个取值体例,由POST改成POST改成_GET。

在Storage面板中,查抄到数据已成功存入

/

缓存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之前生成并缓存到当地。

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数