小程序云开发实战 - 口袋工具之“历史上的今天” (2)

点击开发者工具菜单项 工具 -> 构建npm
程序将自动构建已安装的依赖

2. 在app.json引入组件 "usingComponents": { "van-datetime-picker": "/miniprogram_npm/vant-weapp/datetime-picker/index", "van-popup": "/miniprogram_npm/vant-weapp/popup/index", "van-toast": "/miniprogram_npm/vant-weapp/toast/index" } 3. 修改 index.wxml

添加下面的代码

<view> <van-popup show="{{ show }}" position="bottom"> <van-datetime-picker type="date" value="{{ currentDate }}" bind:cancel="onCancel" bind:confirm="onConfirm" /> </van-popup> </view> <van-toast /> 4. 修改 index.js

引入 Toast

import Toast from '../../miniprogram_npm/vant-weapp/toast/toast';

data 添加 属性

data: { year: 1990, month: 1, day: 1, list: [], show: false, currentDate: Date.now() }

添加 监听方法

/** * 监听日期选择 */ onChangeDate: function() { this.setData({ show: true }); }, /** * 监听取消 */ onCancel: function() { this.setData({ show: false }); }, /** * 监听确定 */ onConfirm: function(event) { const date = new Date(event.detail); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); this.setData({ year, month, day, show: false }); this.doGetList(); }

最后修改 doGetList ，添加loading

/** * 执行数据获取 */ doGetList: function() { const { month, day } = this.data; Toast.loading({ mask: true, message: '加载中...' }); wx.cloud.callFunction({ name: 'todayInHistory', data: { month, day } }).then(res => { let list = res.result.reverse(); this.setData({ list }); Toast.clear(); }) .catch(console.error) } 5. 效果如下   补充

由于聚合数据平台API非会员调用次数有限（100次/天），明显是不太够用的。因此，我们可以考虑在请求到数据时，将数据存在云数据库中，其实也就实现了一个类似爬虫的功能啦。流程如下：：梵


代码实现：

修改 cloudfunctions/todayInHistory/index.js

// ... 省略其他无需改动的代码 exports.main = async(event, context) => { const { month, day } = event const ret = await db.collection('todayInHistory').where({ date: `${month}/${day}` }).get() if (ret.data.length > 0) { return ret.data[0].result } const resp = await axios.get(baseUrl, { params: { key, date: `${month}/${day}` } }).then(res => { return res.data }) await db.collection('todayInHistory').add({ data: { date: `${month}/${day}`, result: resp.result } }) return resp.result } ··· 结语

目前只开发了两个小功能 历史上的今天 和 周公解梦 ，后续会继续开发新的功能，希望可以做成一个小工具集合，这也是 口袋工具 这个名称的由来。

感谢各位读者的阅读，由于本人水平有限，文章中如有错误或不妥之处，请不吝赐教！

如果你喜欢这篇文章或是这个项目，不妨进去点个Star支持下 today。

源码链接

https://github.com/GoKu-gaga/today

更多云开发案例请参考：

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended/blob/master/README.md

如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！