文档章节

微信小程序(应用号)实战课程之记账应用开发(续)

秀杰
 秀杰
发布于 2016/10/12 21:00
字数 668
阅读 1268
收藏 0

缘起:昨天官方开发有了更新v0.10.101100,Picker的mode属性已经支持date以及time(background-image的bug也修复),于是来更新此实例。

##目标:实现集成日期组件

如图

效果图

官方文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

步骤,在item.wxml文件中增加一个picker组件,如下:

    <view class="section">
        <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
		    <view class="section__title">
		      日期: {{date}}
		    </view>
		</picker>
    </view>

如图

图1

从图中可以看出:

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
    })

经过如上处理,日期组件已经显示为当前日期

如图

图2

处理到此,我们还需要修复一个逻辑错误,即组件的结束日期应该不超过当日,做法也很简单,只需要在wxml文件中对picker的日期属性end由2017-09-01改为{{date}}即可

<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">

吐槽一下,官方的picker的还是有bug的,完全不听start与end使唤,仍可以选任意日期,暂时不去理会,代码就这么写着,什么时候开发工具修复了自然可以了,毕竟是现在还只是内测,就将就用着。

接下来处理日期组件点击确认事件bindDateChange

回到item.js文件

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

//  点击日期组件确定事件
  bindDateChange: function(e) {
    this.setData({
        date: e.detail.value
    })
  }

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

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

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

公众号

© 著作权归作者所有

秀杰
粉丝 153
博文 94
码字总数 50956
作品 0
瑞安
iOS工程师
私信 提问
加载中

评论(7)

极乐小程序
极乐小程序

引用来自“秀杰”的评论

引用来自“微信小程序联盟”的评论

引用来自“秀杰”的评论

引用来自“微信小程序联盟”的评论

黄版主有成型的小程序吗?可以提交到极乐小程序商店(http://store.dreawer.com/)哈,我们免费帮你写推荐,分发至简书、CSDN等平台。

回复@微信小程序联盟 : 有个外卖,不过还没上架,在重写后端node

回复@秀杰 : 好的,有好的小程序尽管发我哈,我会发布到极乐商店并分发哈~

回复@微信小程序联盟 : 你是Rolan?

回复@秀杰 : Rolan妹子边上的,哈哈~
秀杰
秀杰 博主

引用来自“微信小程序联盟”的评论

引用来自“秀杰”的评论

引用来自“微信小程序联盟”的评论

黄版主有成型的小程序吗?可以提交到极乐小程序商店(http://store.dreawer.com/)哈,我们免费帮你写推荐,分发至简书、CSDN等平台。

回复@微信小程序联盟 : 有个外卖,不过还没上架,在重写后端node

回复@秀杰 : 好的,有好的小程序尽管发我哈,我会发布到极乐商店并分发哈~

回复@微信小程序联盟 : 你是Rolan?
极乐小程序
极乐小程序

引用来自“秀杰”的评论

引用来自“微信小程序联盟”的评论

黄版主有成型的小程序吗?可以提交到极乐小程序商店(http://store.dreawer.com/)哈,我们免费帮你写推荐,分发至简书、CSDN等平台。

回复@微信小程序联盟 : 有个外卖,不过还没上架,在重写后端node

回复@秀杰 : 好的,有好的小程序尽管发我哈,我会发布到极乐商店并分发哈~
秀杰
秀杰 博主

引用来自“微信小程序联盟”的评论

黄版主有成型的小程序吗?可以提交到极乐小程序商店(http://store.dreawer.com/)哈,我们免费帮你写推荐,分发至简书、CSDN等平台。

回复@微信小程序联盟 : 有个外卖,不过还没上架,在重写后端node
极乐小程序
极乐小程序
黄版主有成型的小程序吗?可以提交到极乐小程序商店(http://store.dreawer.com/)哈,我们免费帮你写推荐,分发至简书、CSDN等平台。
秀杰
秀杰 博主

引用来自“qianmenchuxue”的评论

正在收集微信小程序的好文,可以转载楼主的系列文章吗?会注明作者及原出处链接;http://wxapp.dreawer.com
好的,没问题。
qianmenchuxue
qianmenchuxue
正在收集微信小程序的好文,可以转载楼主的系列文章吗?会注明作者及原出处链接;http://wxapp.dreawer.com
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.8K
11
从零开始学做微信小程序,看这些就够了!

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序...

王练
2016/11/09
31K
23
小程序云应用入门实操系列课程回顾及总结

专家介绍 白宦成 - Linux 中国开发组组长,阿里云MVP;CSDN专家 ,在 GitChat 平台上开设了《一学就会的 WordPress 实战课》达人课;自由职业者,曾就职于网易杭州研究院。 个人小程序作品:...

赤儒
04/28
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
2018最新-9小时搞定微信小程序开发

2018最新-9小时搞定微信小程序开发 网盘地址:https://pan.baidu.com/s/1N6IGuXgF3YrVvmCNi1T--Q 密码:f8pq 备用地址(腾讯微云):https://share.weiyun.com/5rrdDMP 密码:ap7b9q 本课程为...

人气王子333
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
25分钟前
6
0
Python数据可视化之matplotlib

常用模块导入 import numpy as npimport matplotlibimport matplotlib.mlab as mlabimport matplotlib.pyplot as pltimport matplotlib.font_manager as fmfrom mpl_toolkits.mplot3d i......

松鼠大帝
昨天
5
0
我用Bash编写了一个扫雷游戏

我在编程教学方面不是专家,但当我想更好掌握某一样东西时,会试着找出让自己乐在其中的方法。比方说,当我想在 shell 编程方面更进一步时,我决定用 Bash 编写一个扫雷游戏来加以练习。 我在...

老孟的Linux私房菜
昨天
7
0
Go语言Hello world(GOPATH和Go Module版)

本文是「vangoleo的Go语言学习笔记」系列文章之一。 官网: http://www.vangoleo.com/go/go-hello-world-02/ 往期回顾: Go语言入门-你好,Go语言 Go语言入门-Hello World(Go Playground版) 上...

vangoleo
昨天
9
0
C++虚函数以及虚函数表

在了解虚函数之前先了解下对象模型: 对象模型: 在C++中,有两种数据成员(class data members):static 和nonstatic,以及三种类成员函数(class member functions):static、nonstatic和v...

黑白双键
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部