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

摘要： 本專案是一個基於雲開發的小程式。 本文選取專案中的一個頁面 -- 歷史上的今天 來做一個雲開發的分享，會涉及雲函式和雲資料庫。 由於是實戰專案，關於小程式的基礎知識請移步官方文件，本文不再贅述。 專案地址 github.com/GoKu-gaga/t… 專案預覽...

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

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

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

專案地址

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 。