挑战独立开发day5-微信小程序编写2

挑战独立开发day5-微信小程序编写2

首页休闲益智迷你编程更新时间:2024-08-03

当你身处困境时,你会怎么选。。。。

写在前面

昨天介绍了一下微信小程序的整体情况,今天在补充一些我觉得需要记录的功能点以及实现,为自己的技术做些累积(万一需要去找工作,也算是可以吹逼的一点吧,哈哈)。目前依旧是面临着经济压力,所以,我对我的计划做出了调整,有了一部分新思路,关于广告方向的,简单写了一下计划书,感兴趣的朋友,可以交流一下,希望能快速落地变现。

日期选择器功能扩展

这是在做【缴费记录】页面时遇到的问题,我们先看一下页面。

根据实际使用场景,一般我们都是按年缴费,所以搜索框应该是以年份进行检索;因为小程序中还有其他位置需要时间检索,所以我把这部分抽成了一个插件。根据isMonth这个参数,进行展示效果的控制。

插件是基于vant-weapp写的,引用如图,核心是van-datetime-picker,这是我们主要使用的时间选择器。

我们先看官方的参数说明(这里仅列举功能相关的参数,其他信息请直接官网查看)

我们可以看到,官方其实仅提供了三种模式date(年月日)time(带时间的)year-month(仅年月)。官方表明不建议动态修改,确实在动态传输type类别中会发生问题,但是为了满足我们的业务需求(仅搜索年份),所以,我们需要对源码进行简单的修改。

我们首先根据json引用路径找到van-datetime-picker的源码位置

打开js文件,找到getRanges方法(如何找到的?请直接在控制台打断点),具体代码我就不贴了,大家可以自己去研究一下,我们直接找到关键代码。

在返回展示结果时有一个判断,其含义是根据不同的类别,截取不同的长度(splice函数的用法,可以参考w3school)。我在这里新建了一个【year】类别,仅保留年份元素。至此,我们就实现了时间控件仅展示年份的功能。

表格工具

还是以【缴费记录】为例,微信小程序官方以及有赞都没有提供可直接使用的表格控件,这里我引用了miniprogram-table-component这个插件。很简单也很实用,具体可直接查看github,链接如下:

https://github.com/habc0807/miniprogram-table-component

日程表

在首页中我们有一个【课程安排】功能。

这里我们采用了一个calendar插件,也是很简单很实用的小插件,这个插件的git地址我给忘记了。。。有需要的可以私信我。

写在最后

其他的功能,基本上都是基于官方文档就能实现了,小程序的页面,至此也就全部搭建完成了,从明天开始实现与后台的交互。

为了缓解经济压力,我还是的找份工作或者找找融资,毕竟只有活下去才能有机会实现梦想。加油!

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved