前言

本項目是一個基于云開發的小程序。

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

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

項目預覽

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

• 安裝

# npmnpm i vant-weapp -S --production# yarnyarn 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-pickertype="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. 效果如下

補充

• 由于聚合數據平臺API非會員調用次數有限（100次/天），明顯是不太夠用的。因此，我們可以考慮在請求到數據時，將數據存在云數據庫中，其實也就實現了一個類似爬蟲的功能啦。流程如下：：梵

代碼實現：

• 修改 cloudfunctions/todayInHistory/index.js

// ... 省略其他無需改動的代碼 exports.main = async(event, context) => {const {month,day} = eventconst 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/TencentCloudBase/Good-practice-tutorial-recommended

如果你有關于使用云開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享，歡迎留言聯系我們哦~比心！

轉載于:https://www.cnblogs.com/CloudBase/p/11265087.html

總結

以上是生活随笔為你收集整理的小程序云开发实战 - 口袋工具之“历史上的今天”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。