前言本项目是一个基于云开发的小程序。本文选取项目中的一个页面——历史上的今天来分享一个云开发，会涉及到云函数和云数据库。由于是实战项目，小程序基础知识请参考官方文档，本文不再赘述。项目预览微信搜索：袖珍工具y扫一扫：前期遇到的问题数据源：没有数据寸步难行数据源如何解决写爬虫爬取并保存所需数据找一些提供数据的平台，如头像数据、聚合数据等。本项目选择第二种方式，最终选择了聚合数据平台API。启动项目创建新项目创建新项目，配置名称、目录、AppID等信息，后端服务选择小程序·云开发，点击新建。关于AppID：请自行修改为您注册的小程序AppID。点击新建，完成项目初始化，得到一个云开发模板：目录结构：+--cloudfunctions|[指定环境]//云函数存放目录+--miniprogram//小程序代码编写目录|--README.md//项目描述文件|--project.config.json//项目配置文件新建云开发环境点击左上角菜单项云开发，点击创建资源环境。环境名称和环境ID请自行设置：点击OK完成创建编写云函数1.新建云函数在cloudfunctions目录下右键新建云函数，填写新云函数的名称（比如todayInHistory），回车或者失去焦点，会自动创建并上传。2、安装依赖云函数目前的执行环境只支持node，所以需要用js来写云函数的逻辑。在控制台进入云函数所在目录，执行npmi-Saxios本项目使用axios发送请求，可以使用request-promise等其他库替换3.编写云函数，新建config。js文件，添加如下代码：exports.key=YOUR_JUHE_KEY//keyexports.baseUrl='http://v.juhe.cn/todayOnhistory/queryEvent.php'应用于聚合数据平台，打开index.js文件并编写代码：//云函数入口文件constcloud=require('wx-server-sdk')constaxios=require('axios')cloud.init()constdb=cloud.database()//聚合数据const{baseUrl,key}=require('./config')//云函数入口函数exports.main=async(event,context)=>{const{month,day}=eventconstresp=awaitaxios.get(baseUrl,{params:{key,date:`${month}/${day}`}}).then(res=>{returnres.data})returnresp.result}写入page1.Newpage在在开发小程序的过程中，新建页面是一个很常见的操作，有两种很方便的方法：在app.json文件中，在pages项中添加我们需要的页面路径，直接保存即可。例如："pages":["pages/today-in-history/index"]在pages目录下新建目录today-in-history，在新建目录上右击->新建页面，填写index等名称，回车即可完成页面下四个文件的创建2.编写index.wxml{{年}}年{{月}}月{{日}}日{{item.title}}{{item.date}}3.写index.js//pages/today-in-history/index.jsPage({/***页面初始数据*/data:{year:1990,month:1,day:1,list:[]},/***生命周期函数--监控页面加载*/onLoad:function(){constnow=newDate();constyear=now.getFullYear();constmonth=now.getMonth()+1;constday=now.getDate();this.setData({年月日}）;这个.doGetList();},/***执行数据获取*/doGetList:function(){const{month,day}=this.data;wx.cloud.callFunction({name:'todayInHistory',data:{month,day}}).then(res=>{letlist=res.result.reverse();this.setData({list});}).catch(console.error)}})4.编写index.wxss/*pages/today-in-history/index.wxss*/.container{padding-bottom:20rpx;背景色：#E8D3A9；}.header{显示：flex；证明内容：周围空间；对齐项目：居中；高度：80rpx；颜色：#FFF;}.content{flex:1;}.list-view{height:100%;显示：弹性；弹性方向：列；填充：020rpx；}.list-item{显示：flex；弹性方向：列；边界半径：10rpx；填充：16rpx0；框大小：边框框；保证金顶部：20rpx；背景色：#fff；文本对齐：居中；框阴影：1px1px5px1pxrgb(207,207,207);}.item-title{字体大小：36rpx;填充：10rpx16rpx；颜色：#262626；line-height:48rpx;}5.效果预览到这里就完成了历史上今天的列表页，效果如下：添加日期选择器1.在vantweapp项目中引入wantweapp的一些组件安装#npmnpmivant-weapp-S--production#yarnyarnaddvant-weapp--productionbuildnpm点击开发者工具菜单项Tools->Buildnpm程序会自动构建安装好的依赖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添加如下代码4.修改index.js引入ToastimportToastfrom'../../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){constdate=newDate(event.detail);constyear=date.getFullYear();constmonth=date.getMonth()+1;constday=date.getDate();this.setData({年,月,日,显示:false});this.doGetList();}最后修改doGetList，增加加载/***执行数据获取*/doGetList:function(){const{month,day}=this.data;Toast.loading({mask:true,message:'Loading...'});wx.cloud.callFunction({name:'todayInHistory',data:{month,day}}).then(res=>{letlist=res.result.reverse();this.setData({list});Toast.clear();}).catch(console.error)}5.效果如下<字体color="#0080ff"size=6>补充由于聚合数据平台非会员API调用次数有限（100次/天），显然不够用。因此，我们可以认为，在请求数据时，将数据存储在云数据库中，实际上实现了一种类似爬虫的功能。流程如下：梵码实现：修改cloudfunctions/todayInHistory/index.js//...省略其他不需要修改的代码exports.main=async(event,context)=>{const{month,天}=eventconstret=awaitdb.collection('todayInHistory').where({date:`${month}/${day}`}).get()if(ret.data.length>0){returnret.data[0].result}constresp=awaitaxios.get(baseUrl,{params:{key,date:`${month}/${day}`}}).then(res=>{返回res.data})awaitdb.collection('todayInHistory').add({data:{date:`${month}/${day}`,result:resp.result}})returnresp.result}···结语目前只开发了历史上的今天和周公解梦两个小功能，未来会不断开发新的功能，希望做成一个小工具合集，这也是PocketTools这个名字的由来。感谢各位读者的阅读。由于本人水平有限，文章中如有错误或不妥之处，请指出！如果你喜欢这篇文章或者这个项目，今天不妨去GitHub链接点个Star支持一下。源码链接https://github.com/TencentClo...如果你有任何使用云开发CloudBase的技术故事/技术实践经验想分享给大家，欢迎留言联系我们~比心！
