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

头像
CloudBase云开发
    阅读 7 分钟
    1

    前言

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

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

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

    项目预览

    • 微信搜索： 口袋工具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 
    <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 的部分组件

    • 安装
    # npm
  npm i vant-weapp -S --production

  # yarn
  yarn 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-picker
      type="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. 效果如下

    列表

    切换日期

    <font color="#0080ff" size=6>补充</font>

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

    结语

    目前只开发了两个小功能 历史上的今天 和 周公解梦 ，后续会继续开发新的功能，希望可以做成一个小工具集合，这也是 口袋工具 这个名称的由来。

    感谢各位读者的阅读，由于本人水平有限，文章中如有错误或不妥之处，请不吝赐教！

    如果你喜欢这篇文章或是这个项目，不妨进去GitHub链接点个Star支持下 today。

    源码链接

    https://github.com/TencentClo...

    如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！

    node.js
    CloudBase云开发
    425 声望438 粉丝

    云开发（Tencent CloudBase，TCB）是云端一体化的后端云服务 ，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力极大的降...

    « 上一篇
    开发者福音！面向Web场景的云开发服务正式开放！
    下一篇 »
    小程序·云开发实战 - 体重记录小程序

    引用和评论

    推荐阅读
    头像
    如何抓住短剧“狂飙”风口？腾讯微搭发布一站式短剧平台解决方案

    CloudBase云开发阅读 974

    头像
    解决lodash由于依赖错误导致无法启动的问题

    LYX6666赞 3阅读 1k

    头像
    阿里云ECS服务器部署Node.js项目全过程详解

    kovli赞 1阅读 6k

    头像
    SAP Fiori应用的三种部署方式

    注销赞 1阅读 5k

    头像
    JS工程化集锦

    specialCoder赞 2阅读 1.8k

    头像
    Node.js学习备案

    寒青赞 1阅读 1.5k

    头像
    解决nvm install node 出现错误

    吴季分赞 1阅读 854

    0 条评论
    得票最新