口袋工具的发展史

本项目是一个基于云开发的小程序。

本文选取项目中的一个页面 --历史上的今天来做一个云开发的分享，会涉及云函数和云数据库。

由于是实战项目，关于小程序的基础知识请移步官方文档，本文不再赘述。

项目地址

github.com/GoKu-gaga/t…

项目预览

微信搜索：口袋工具y

扫一扫：

前期遇到的问题

数据来源： 没有数据，寸步难行呀

如何解决数据来源

编写爬虫将需要的数据爬取并保存下来

找一些提供数据的平台，如阿凡达数据、聚合数据等等。

由于本人偷懒，所以选择第二种方式，并最终选择了聚合数据平台API。

项目开始

新建项目

新建项目，配置好名称、目录、AppID等信息，后端服务选择小程序·云开发，点击新建。

关于AppID: 请自行修改为你注册的小程序AppID。

点击新建即可完成项目初始化，得到一个云开发模板：

目录结构：

+-- cloudfunctions|[指定的环境] // 存放云函数的目录

+-- miniprogram // 小程序代码编写目录

|-- README.md // 项目描述文件

|-- project.config.json // 项目配置文件

复制代码

新建云开发环境

点击左上角菜单项云开发

点击创建资源环境，环境名称及环境ID请自行设置：

点击确定即可完成创建

编写云函数

1. 新建云函数

在目录cloudfunctions上右键

新建云函数，填入新建云函数的名称(如todayInHistory)

回车或失去焦点即会自动创建并上传。

2. 安装依赖

云函数目前执行环境仅支持node，所以需要使用js来编写云函数的逻辑。 在控制台中进入该云函数的目录，执行

npm i -S axios

复制代码

本项目使用axios来执行请求的发送，可以使用其他如request-promise等等的库来替换

3. 编写云函数

新建config.js文件，添加代码如下：

exports.key = YOUR_JUHE_KEY // 在聚合数据平台申请的key

exports.baseUrl = 'http://v.juhe.cn/todayOnhistory/queryEvent.php'

复制代码

打开index.js文件，编写代码：

// 云函数入口文件

const cloud = require('wx-server-sdk')

const axios = require('axios')

cloud.init()

const db = cloud.database()

// 聚合数据

const { baseUrl, key } = require('./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. 新建页面

在开发小程序的过程中，新建一个页面是很常见的操作，有两个非常方便的方式

在app.json文件中，在pages项添加我们需要的页面路径，直接保存即可。如：

"pages": [

"pages/today-in-history/index"

]

复制代码

在pages目录下新建目录today-in-history，在新建的目录上右键 -> 新建page， 填入名称如index, 回车即可完成页面下四个文件的创建

2. 编写index.wxml

{{year}}年{{month}}月{{day}}日

{{item.title}}

{{item.date}}

复制代码

3. 编写index.js

// pages/today-in-history/index.js

Page({

/**

* 页面的初始数据

*/

data: {

year: 1990,

month: 1,

day: 1,

list: []

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function() {

const now = new Date();

const year = now.getFullYear();

const month = now.getMonth() + 1;

const day = now.getDate();

this.setData({

year,

month,

day

});

this.doGetList();

},

/**

* 执行数据获取

*/

doGetList: function() {

const {

month,

day

} = this.data;

wx.cloud.callFunction({

name: 'todayInHistory',

data: {

month,

day

}

}).then(res => {

let list = res.result.reverse();

this.setData({

list

});

})

.catch(console.error)

}

})

复制代码

4. 编写index.wxss

/* pages/today-in-history/index.wxss */

.container {

padding-bottom: 20rpx;

background-color: #E8D3A9;

}

.header {

display: flex;

justify-content: space-around;

align-items: center;

height: 80rpx;

color: #FFF;

}

.content {

flex: 1;

}

.list-view {

height: 100%;

display: flex;

flex-direction: column;

padding: 0 20rpx;

}

.list-item {

display: flex;

flex-direction: column;

border-radius: 10rpx;

padding: 16rpx 0;

box-sizing: border-box;

margin-top: 20rpx;

background-color: #fff;

text-align: center;

box-shadow: 1px 1px 5px 1px rgb(207, 207, 207);

}

.item-title {

font-size: 36rpx;

padding: 10rpx 16rpx;

color: #262626;

line-height: 48rpx;

}

.item-date {

font-size: 24rpx;

height: 30rpx;

line-height: 30rpx;

border-top: 2rpx solid #eee;

padding: 10rpx 16rpx 0;

color: #595959;

margin-top: 6rpx;

}

复制代码

补充

项目中也使用了部分的有赞的小程序组件库vant-weapp

由于聚合数据平台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。

赞赏