原文地址 https://cloud.tencent.com/developer/article/1609581
第一步削樊,環(huán)境配置
打開微信小程序開發(fā)IDE豁生,創(chuàng)建一個小程序項目,AppID需要自己去小程序官網注冊一個漫贞,然后后端服務注意選擇小程序-云開發(fā)甸箱。
注意,以前的老版本IDE迅脐,在藍色框那里會有一個騰訊云的選項摇肌。實際上都是使用的騰訊云服務,統一選擇小程序-云開發(fā)就好仪际。
然后點擊新建围小。不出所料岁经,應該會出現這樣一個界面悍抑。
可以看到,微信開發(fā)者工具的腳手架已經為我們創(chuàng)建好了一些模板代碼穿仪,今天成榜,豬腳就是我們的cloudfunctions部分框舔,即如何利用騰訊云為我們即將寫的新聞小程序提供數據服務。
在開發(fā)之前,我們發(fā)現控制臺報了一個錯誤刘绣,提示我們沒有開通云服務樱溉。我們發(fā)現微信開發(fā)者工具的頂部工具欄中,云開發(fā)那個按鈕是灰色的纬凤,點擊進去福贞,提示我們開通,表示我們沒有開通云開發(fā)服務停士,點擊它挖帘,新建一個。
配置完畢之后恋技,你可能會關系費用問題拇舀,不用擔心,默認的配置是完全免費的蜻底,如果你用戶量不太大骄崩,基本上夠你的日常需求了,對個人開發(fā)者來說薄辅,相當的有好刁赖。
第二步:云函數開發(fā)及部署
云服務開通完畢,接下來可以部署下腳手架為我們提供的云函數长搀,可以看到cloudfunctions文件夾提示未選擇環(huán)境,我們右鍵點擊鸡典,選擇我們剛才開通的那個云開發(fā)環(huán)境源请。然后展開目錄,對準login這個目錄彻况,右鍵谁尸,選擇
然后,關閉IDE纽甘,重啟IDE良蛮,在點擊第一個按鈕,獲取openid悍赢,此時可以看到獲取openid是成功的了决瞳。
這里表示我們的云開發(fā)環(huán)境從開通到部署的鏈路已經打通了,接下來的事情左权,當然是寫自己的云函數了皮胡。我們是要做一個新聞咨詢的小程序,所以赏迟,一般來說屡贺,找一個自己經常看的覺得內容質量不錯的新聞內網站看看人家提供了什么接口沒,分兩步走:
1甩栈、如果有提供了接口泻仙,我們在云函數中直接調用接口,拿到數據量没,喂給小程序前端即可玉转,這種最方便了。
2允蜈、通常情況下是沒有接口的冤吨,此時怎么辦?一個思路是使用云函數去爬取新聞網站的內容饶套,存放到云開發(fā)db上面漩蟆,然后小程序端來讀云開發(fā)db中的內容,亦或者直接通過通過爬蟲程序生成一個json返回給小程序端妓蛮,不通過存儲db這個過程怠李。其缺點是沒有緩存數據,每次都要經過爬蟲去爬蛤克,用戶可能等很久才能看到新聞捺癞,體驗并不好。目前构挤,云開發(fā)套件里面有提供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前联。
好了功戚,了解了腳手架為我們創(chuàng)建的一些模板及其參數之后,我們就可以編寫業(yè)務邏輯了似嗤。
獲取新聞邏輯
獲取新聞需要發(fā)送網絡請求啸臀,這里我們直接使用axios,但是微信小程序這里沒有提供烁落,所以我們需要在云函數的目錄中去執(zhí)行
npm i axios
注意乘粒,一定是在你生成的按個云函數的目錄中去執(zhí)行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中。
至此童本,手把手帶你使用云函數進行小程序開發(fā)已經結束了真屯,相信這個簡單的demo可以帶你打開對如何利用云函數開發(fā)更多有趣的小程序的大門。
比如穷娱,你可以做一個小游戲绑蔫,利用云函數作為中轉請求你的后臺,讓云函數實現權限校驗鄙煤,來保護你自己的服務器。
比如茶袒,你可以做一個親子相冊梯刚,利用云函數,存儲圖片到騰訊云存儲薪寓。
亦或者亡资,你可以做聊天室...
本項目的代碼地址在此