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

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

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

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

掃一掃：

本專案選擇第二種方式，並最終選擇了聚合資料平台api。

目錄結構：

+-- cloudfunctions|[指定的環境]  // 存放雲函式的目錄

+-- miniprogram                 // 小程式**編寫目錄
|-- readme.md                   // 專案描述檔案
|-- project.config.json         // 專案配置檔案
1. 新建雲函式
在目錄cloudfunctions上右鍵

新建雲函式，填入新建雲函式的名稱（如todayinhistory）
回車或失去焦點即會自動建立並上傳。
2. 安裝依賴

雲函式目前執行環境僅支援node，所以需要使用js來編寫雲函式的邏輯。
在控制台中進入該雲函式的目錄，執行
npm i -s axios
本專案使用axios來執行請求的傳送，可以使用其他如request-promise等等的庫來替換

3. 編寫雲函式
exports.key = your_juhe_key // 在聚合資料平台申請的key

exports.baseurl = ''
// 雲函式入口檔案

const cloud = require('wx-server-sdk')
const axios = require('axios')
cloud.init()
const db = cloud.database()
// 聚合資料
const  = require('./config')
// 雲函式入口函式
exports.main = async(event, context) =>  = event
const resp = await axios.get(baseurl, /$`
}}).then(res => )
return resp.result
}
1. 新建頁面

在開發小程式的過程中，新建乙個頁面是很常見的操作，有兩個非常方便的方式：
"pages": [

"pages/today-in-history/index"
]
2. 編寫index.wxml
}年}月}日

}}
3. 編寫index.js
// pages/today-in-history/index.js

page(,
/*** 生命週期函式--監聽頁面載入
*/onload: function() );
this.dogetlist();
},/**
* 執行資料獲取
*/dogetlist: function()  = this.data;
wx.cloud.callfunction(
}).then(res => );
}).catch(console.error)
}})
4. 編寫index.wxss
/* pages/today-in-history/index.wxss */

.container 
.header 
.content 
.list-view 
.list-item 
.item-title 
5. 效果預覽

到這裡我們完成了歷史上的今天的列表頁，效果如下：

點選開發者工具選單項工具->構建npm程式將自動構建已安裝的依賴

"usingcomponents":

3. 修改 index.wxml

新增下面的**

4. 修改 index.js

data:

/**

* 監聽日期選擇
*/onchangedate: function() );
},/**
* 監聽取消
*/oncancel: function() );
},/**
* 監聽確定
*/onconfirm: function(event) );
this.dogetlist();
}

/**

* 執行資料獲取
*/dogetlist: function()  = this.data;
toast.loading();
wx.cloud.callfunction(
}).then(res => );
toast.clear();
}).catch(console.error)
}

5. 效果如下

**實現：

// ... 省略其他無需改動的**

exports.main = async(event, context) =>  = event
const ret = await db.collection('todayinhistory').where(/$`
}).get()
if (ret.data.length > 0) 
const resp = await axios.get(baseurl, /$`
}}).then(res => )
await db.collection('todayinhistory').add(/$`,
result: resp.result}})
return resp.result
}···

目前只開發了兩個小功能歷史上的今天和周公解夢，後續會繼續開發新的功能，希望可以做成乙個小工具集合，這也是口袋工具這個名稱的由來。

雲開發（cloudbase）是一款雲端一體化的產品方案 ，採用 serverless 架構，免環境搭建等運維事務 ，支援一雲多端，助力快速構建小程式、web應用、移動應用。

技術文件：

微信小程式 雲開發實戰教程

雲函式，雲儲存，雲資料庫，雲呼叫 index.js 是入口檔案，雲函式被呼叫時會執行該檔案匯出的 main 方法 const cloud require wx server sdk exports.main event,context event let sum a b return pages m...

微信小程式雲開發專案實戰之商城開發日記 04

今天是愉快開發 專案的第四天了，相信如果大家跟著我能把前兩天的前端內容敲完，相信你是有比較大的收貨的。今天的內容是完成購物車的前端 購物車的設計還是比較常規的ui，展示商品的資訊，提供選中按鈕，提供加減按鈕，提供結算按鈕，提供一鍵清空按鈕，並在介面底部實時展示目前的購物車已選中的商品的總價。首先是商...

小程式 雲開發

小程式雲開發提供了三個開發基礎能力 資料庫 儲存和雲函式。雲開發提供的是json資料庫，就是資料庫中的每條記錄都是乙個json格式的物件。乙個資料庫可以有多個集合 乙個集合就是乙個json陣列，陣列的每乙個物件就是一條記錄資料，也可以這麼說乙個集合就是乙個資料表，陣列的每乙個物件就是一條資料 資料庫...