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

前言

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

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

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

项目预览

微信搜索： 口袋工具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} = eventconst 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`

<view class="container"><view class="header full-width"><view>{{year}}年{{month}}月{{day}}日</view></view><view class="content full-width"><view class="list-view"><block wx:for="{{list}}" wx:key="index"><view class="item-title">{{item.title}}</view><view class="item-date">{{item.date}}</view></block></view></view>
</view>

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;
}

5. 效果预览

到这里我们完成了 历史上的今天 的列表页，效果如下：

添加日期选择器

1. 引入 vantweapp

项目中使用 wantweapp 的部分组件

安装

# npmnpm i vant-weapp -S --production# yarnyarn add vant-weapp --production

构建npm

点击开发者工具菜单项 工具 -> 构建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 class="full-width"><van-popup show="{{ show }}" position="bottom"><van-datetime-pickertype="date"value="{{ currentDate }}"bind:cancel="onCancel"bind:confirm="onConfirm"/></van-popup>
</view>
<van-toast id="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} = eventconst 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
}
···