您的位置 首页 kreess

基於雲開發的微信小程序實戰教程(三)

PS: 實戰篇已開啟~手把手帶你體驗小程序開發+上線全流程體驗,文章內容戳 基於雲開發的微信小程序實戰教程(三)上篇文章中,簡單介紹瞭下微信開發者工具是怎麼去用的,還介紹瞭

PS: 實戰篇已開啟~手把手帶你體驗小程序開發+上線全流程體驗,文章內容戳


基於雲開發的微信小程序實戰教程(三)

上篇文章中,簡單介紹瞭下微信開發者工具是怎麼去用的,還介紹瞭項目的基礎目錄結構,以及每個文件的作用,還配帶瞭一些例子說明。最後還剩下cloudfunctions目錄,也就是雲開發的文件夾介紹。

本章主要內容:小程序雲開發的基礎目錄結構,cloudfunctions目錄介紹;如何編寫雲函數;雲開發的調試。

一、小程序雲開發的目錄結構介紹

cloudfunctions目錄介紹:

cloudfunctions是存放我們所有的雲函數的地方,也就是相當於我們進行數據存儲、進行數據添加、刪除、修改等操作的地方。

從下圖可以看到,我們下載的 demo 中目前有 4 個文件夾,每個文件夾其實現在可以理解為,一個文件夾對應一個雲函數,也就是已經有瞭 4 個雲函數的例子。

和我下圖的不太一樣也沒關系,這隻是官網給提供的例子,隻是參考看一眼他們怎麼寫的,最終也用不到這幾個例子中的代碼。

有瞭雲開發的功能,我們直接在這裡通過雲函數,進而完成對數據的管理,實現頁面和數據的交互,完成一個完整的小程序(也就是所謂的後臺,服務器,就不需要我們再去申請瞭,非常方便)

二、什麼是雲函數

雲函數也是一個 js 文件,用來操作你小程序中存儲下來的數據,並把結果拋出來。

比如刪除一條數據,我們需要從前端界面點擊刪除按鈕發起請求,調用到雲函數去處理數據,找到該條數據並把它從刪除,拋出刪除成功,這樣我們前端的頁面上就可以知道「這條數據已經被我們刪除瞭,存儲數據的數據庫中已經沒有這條數據瞭」。

還有一個雲函數的好處是,因為雲開發是基於微信提供的服務,所以能夠直接訪問到一些微信對外提供的一些方法,比如微信登錄、分享朋友圈、等等我們直接就能夠調用到。

看個例子,打開login文件夾,可以看到有config.json,index.js,packge.json三個文件,下面分別來介紹一下。

index.js,雲函數最主要的文件,裡面需要寫的就是我們的接口函數。

也就是說,我們在這裡對數據庫存儲的數據做處理(比如修改一條記錄),處理完後再把最新的處理過的結果拋出返回。這樣子我們前端頁面交互調用到這個方法時,就能得到更新後的最新數據瞭。

看上面截圖,我們隨便打開一個login/index.js,看下大概代碼怎麼寫的。以下是關鍵代碼,為方便理解,我去掉瞭它原本的註釋,加瞭自己的一些理解和解釋。

// 這句是必須寫的,固定格式。沒有為啥,規定就是這樣用的
const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
// 配置env的值,默認也不用改。
// cloud.DYNAMIC_CURRENT_ENV 默認是當前所處的雲環境,如果之前創建瞭多個雲服務環境,就需要改。
// 一般初學咱們也不會創建好幾個,因為一個賬號隻能開通一個免費版的基礎雲服務環境。
})

/**
* event,能夠拿到前端傳過來的數據,比如刪除某條數據,從前端把這條數據的id傳過來,使用event對象去拿到參數
* context,一般用不到
* 這個方法也是固定格式,按這個樣子在裡面寫自己的邏輯就可以瞭
*/
exports.main = async (event, context) => {
// 獲取 WX Context (微信調用上下文),包括 OPENID、APPID、及 UNIONID(需滿足 UNIONID 獲取條件)等信息
// OPENID比較常用於校驗身份
// OPENID是用戶的唯一身份標識,不管你改微信號、昵稱、頭像等等,這個值是不會變的,一個用戶就一個值
const wxContext = cloud.getWXContext()

// 這裡寫你要做的邏輯,比如查詢列表,調用到這裡就是拿到存下來的數據,並把它 return 出去

// 使用 return 把你需要返回給前端的數據返回,這樣頁面就能拿到你的處理結果瞭
return {
openid: wxContext.OPENID,
message: "我從雲函數把數據帶回來瞭"
}
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

返回顶部