第一步,環境配置
打開微信小程序開發 IDE,創建一個小程序項目,AppID 需要自己去小程序官網注冊一個,然后后端服務注意選擇小程序-雲開發。
注意,以前的老版本 IDE,在藍色框那里會有一個騰訊雲的選項。實際上都是使用的騰訊雲服務,統一選擇小程序-雲開發就好。
點擊新建,會出現這樣一個界面:
可以看到,微信開發者工具的腳手架已經為我們創建好了一些模板代碼,今天,豬腳就是我們的 cloudfunctions 部分,即如何利用騰訊雲為我們即將寫的新聞小程序提供數據服務。
在開發之前,我們發現控制台報了一個錯誤,提示我們沒有開通雲服務。我們發現微信開發者工具的頂部工具欄中,雲開發那個按鈕是灰色的,點擊進去,提示我們開通,表示我們沒有開通雲開發服務,點擊它,新建一個。
配置完畢之后,你可能會關系費用問題,不用擔心,默認的配置是完全免費的,如果你用戶量不太大,基本上夠你的日常需求了,對個人開發者來說,相當的友好。
第二步:雲函數開發及部署
雲服務開通完畢,接下來可以部署下腳手架為我們提供的雲函數,可以看到 cloudfunctions 文件夾提示未選擇環境,我們右鍵點擊,選擇我們剛才開通的那個雲開發環境。然后展開目錄,對准 login 這個目錄,右鍵,選擇
然后,關閉 IDE,重啟 IDE,在點擊第一個按鈕,獲取 openid,此時可以看到獲取 openid 是成功的了。
這里表示我們的雲開發環境從開通到部署的鏈路已經打通了,接下來的事情,當然是寫自己的雲函數了。我們是要做一個新聞咨詢的小程序,所以,一般來說,找一個自己經常看的覺得內容質量不錯的新聞內網站看看人家提供了什么接口沒,分兩步走:
-
如果有提供了接口,我們在雲函數中直接調用接口,拿到數據,喂給小程序前端即可,這種最方便了。
-
通常情況下是沒有接口的,此時怎么辦?一個思路是使用雲函數去爬取新聞網站的內容,存放到雲開發 db 上面,然后小程序端來讀雲開發 db 中的內容,亦或者直接通過通過爬蟲程序生成一個 json 返回給小程序端,不通過存儲 db 這個過程。其缺點是沒有緩存數據,每次都要經過爬蟲去爬,用戶可能等很久才能看到新聞,體驗並不好。目前,雲開發套件里面有提供 db 服務,所以,既然提供了,當然就直接拿來使用了,提升用戶體驗的事,當然就得干了。
本文為了簡便期間,目的就是為了介紹如何在小程序中使用騰訊雲的雲函數功能,因此,就不介紹 db 的存儲了。那么,開始吧。
新建雲函數
直接對這 cloudfunctions 那個文件夾點擊新建雲函數,成功之后就會看到目錄里面有腳手架生成的一些框架代碼了。
// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 雲函數入口函數
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
data:data
}
}
大多看到是這種,其中 wxContext 是小程序的上下文,這里可以拿到小程序的 AppID 等等一些常量信息。
然后,event 這個參數是干嘛,event 其實就是小程序端傳遞給這邊的參數:
getNews:function(){
wx.cloud.callFunction({
name: 'news',
data: {
hot_type:'views',//hot_type 可接受參數 views(瀏覽數) | likes(點贊數) | comments(評論數)
category:'Article',//category 可接受參數 Article | GanHuo | Girl
count:20
},
success: res => {
console.log('[雲函數] [news] 調用')
console.log(res)
this.setData({
news:res.result.data
})
},
fail: err => {
console.error('[雲函數] [news] 調用失敗', err)
}
})
},
比如,我在小程序端調用 news 這個雲函數,傳遞 data 為
{
hot_type:'views',//hot_type 可接受參數 views(瀏覽數) | likes(點贊數) | comments(評論數)
category:'Article',//category 可接受參數 Article | GanHuo | Girl
count:20
}
那么這個 event 其實就是這個 object。
好了,了解了腳手架為我們創建的一些模板及其參數之后,我們就可以編寫業務邏輯了。
獲取新聞邏輯
獲取新聞需要發送網絡請求,這里我們直接使用 axios,但是微信小程序這里沒有提供,所以我們需要在雲函數的目錄中去執行
npm i axios
注意,一定是在你生成的按個雲函數的目錄中去執行 npm i
然后,就可以愉快的寫網路請求了。
// 雲函數入口文件
const cloud = require('wx-server-sdk')
const axios = require('axios')
cloud.init()
async function getNews(category,hot_type,count) {
console.log('start getNews')
let data = {}
try {
const url = `https://gank.io/api/v2/hot/${hot_type}/category/${category}/count/${count}`
console.log(url)
var res = await axios.get(url)
data = res.data.data
} catch (err) {
console.log(err)
}
return data
}
// 雲函數入口函數
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
const data = await getNews(event.category,event.hot_type,event.count)
console.log(data)
return {
event,
data:data
}
}
如上,我在雲函數中加了一個 getNews 的方法,接受的三個參數是小程序端傳遞過來的。然后拿到請求結果之后,在返回給小程序端。需要注意的是,返回的 body 是這樣的。
而我們真正從雲函數拿到的結果包裹在內層的 result 中。
至此,手把手帶你使用雲函數進行小程序開發已經結束了,相信這個簡單的 demo 可以帶你打開對如何利用雲函數開發更多有趣的小程序的大門。
比如,你可以做一個小游戲,利用雲函數作為中轉請求你的后台,讓雲函數實現權限校驗,來保護你自己的服務器。
比如,你可以做一個親子相冊,利用雲函數,存儲圖片到騰訊雲存儲。
亦或者,你可以做聊天室...
One More Thing
3 秒你能做什么?喝一口水,看一封郵件,還是 —— 部署一個完整的 Serverless 應用?
復制鏈接至 PC 瀏覽器訪問:https://serverless.cloud.tencent.com/deploy/express
3 秒極速部署,立即體驗史上最快的 Serverless HTTP 實戰開發!
傳送門:
- GitHub: github.com/serverless
- 官網:serverless.com
歡迎訪問:Serverless 中文網,您可以在 最佳實踐 里體驗更多關於 Serverless 應用的開發!