小程序雲開發實戰 - 口袋工具之「歷史上的今天」

前言

本項目是一個基於雲開發的小程序。

本文選取項目中的一個頁面 -- 歷史上的今天 來作一個雲開發的分享，會涉及雲函數和雲數據庫。

因爲是實戰項目，關於小程序的基礎知識請移步官方文檔，本文再也不贅述。

項目預覽

• 微信搜索： 口袋工具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相關的技術故事/技術實戰經驗想要跟你們分享，歡迎留言聯繫咱們哦~比心！