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

1,643 阅读5分钟

前言

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

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

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

项目地址

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

<!--pages/today-in-history/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">
        <navigator url="{{'/pages/history-detail/index?id=' + item.e_id}}" class="list-item">
          <view class="item-title">{{item.title}}</view>
          <view class="item-date">{{item.date}}</view>
        </navigator>
      </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;
}

.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