本文选取项目中的一个页面 -- 历史上的今天 来做一个云开发的分享，会涉及云函数和云数据库。
由于是实战项目，关于小程序的基础知识请移步官方文档，本文不再赘述。
项目地址
项目预览
前期遇到的问题
- @H_502_15@数据来源： 没有数据，寸步难行呀
如何解决数据来源
由于本人偷懒，所以选择第二种方式，并最终选择了聚合数据平台API。
项目开始
新建项目
+-- cloudfunctions|[指定的环境] // 存放云函数的目录
+miniprogram // 小程序代码编写目录
|README.md // 项目描述文件
|project.config.json // 项目配置文件
复制代码
新建云开发环境
编写云函数
1. 新建云函数
在目录 cloudfunctions 上右键
新建云函数，填入新建云函数的名称（如 todayInHistory ）
2. 安装依赖
云函数目前执行环境仅支持node，所以需要使用js来编写云函数的逻辑。 在控制台中进入该云函数的目录，执行
npm i -S axios
复制代码
本项目使用 axios 来执行请求的发送，可以使用其他如 request-promise 等等的库来替换
3. 编写云函数
exports.key = YOUR_JUHE_KEY // 在聚合数据平台申请的key
exports.baseUrl = 'http://v.juhe.cn/todayOnhistory/queryEvent.PHP'
复制代码
// 云函数入口文件
const cloud = require('wx-server-sdk')
const axios = 'axios')
cloud.init()
const db = cloud.database()
// 聚合数据
const { baseUrl,key } = './config')
// 云函数入口函数
exports.main = async(event,context) => {
const {
month,day
} = event
const resp = await axios.get(baseUrl,{
params: {
key,date: `${month}/${day}`
}
}).then(res => {
return res.data
})
return resp.result
}
复制代码
编写页面
1. 新建页面
在开发小程序的过程中，新建一个页面是很常见的操作，有两个非常方便的方式
"pages": [
"pages/today-in-history/index"
]
复制代码
@H_502_15@在 pages 目录下新建目录 today-in-history ，在新建的目录上右键 -> 新建page， 填入名称如 index ,回车即可完成页面下四个文件的创建
2. 编写 index.wxml
<!--pages/today-in-history/index.wxml-->
<view class="container">
<"header full-width">
<view>{{year}}年{{month}}月{{day}}日</view>
</view>
<"content full-width">
<"list-view">
<block wx:for="{{list}}" wx:key="index">
<navigator url={{'/pages/history-detail/index?id=' + item.e_id}}" class="list-item">
<"item-title">{{item.title}}</view>
<"item-date">{{item.date}}</view>
</navigator>
</block>
</view>
</view>
复制代码
3. 编写 index.js
,data: {
month,day
}
}).then(res => {
let list = res.result.reverse();
this.setData({
list
});
})
.catch(console.error)
}
})
复制代码
4. 编写 index.wxss
补充
-
@H_502_15@
项目中也使用了部分的有赞的小程序组件库vant-weapp
@H_502_15@由于聚合数据平台API非会员调用次数有限（100次/天），明显是不太够用的。因此，我们可以考虑在请求到数据时，将数据存在云数据库中，其实也就实现了一个类似爬虫的功能啦。流程如下：
代码实现：
).where({
date: ${day}`
}).get()
if (ret.data.length > 0) {
return ret.data[0].result
}
return res.data
})
'todayInHistory').add({
data: {
date: ${day}`,result: resp.result
}
})
return resp.result
}
复制代码
以上即为 历史上的今天 页面的数据获取及展示，其他页面使用到云开发的模式基本大同小异。
结语
目前只开发了两个小功能 历史上的今天 和 周公解梦 ，后续会继续开发新的功能，希望可以做成一个小工具集合，这也是 口袋工具 这个名称的由来。
