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

袁某某發表於2019-02-04

前言

本專案是一個基於雲開發的小程式。

本文選取專案中的一個頁面 -- 歷史上的今天 來做一個雲開發的分享，會涉及雲函式和雲資料庫。

由於是實戰專案，關於小程式的基礎知識請移步官方文件，本文不再贅述。

專案地址

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。

相關文章