手摸手帶你利用云函數輕松實現一個熱點資訊小程序

原文地址 https://cloud.tencent.com/developer/article/1609581

第一步削樊,環(huán)境配置

打開微信小程序開發(fā)IDE豁生,創(chuàng)建一個小程序項目,AppID需要自己去小程序官網注冊一個漫贞,然后后端服務注意選擇小程序-云開發(fā)甸箱。

注意,以前的老版本IDE迅脐,在藍色框那里會有一個騰訊云的選項摇肌。實際上都是使用的騰訊云服務,統一選擇小程序-云開發(fā)就好仪际。

image

然后點擊新建围小。不出所料岁经,應該會出現這樣一個界面悍抑。

image

可以看到,微信開發(fā)者工具的腳手架已經為我們創(chuàng)建好了一些模板代碼穿仪,今天成榜,豬腳就是我們的cloudfunctions部分框舔,即如何利用騰訊云為我們即將寫的新聞小程序提供數據服務。

在開發(fā)之前,我們發(fā)現控制臺報了一個錯誤刘绣,提示我們沒有開通云服務樱溉。我們發(fā)現微信開發(fā)者工具的頂部工具欄中,云開發(fā)那個按鈕是灰色的纬凤,點擊進去福贞,提示我們開通,表示我們沒有開通云開發(fā)服務停士,點擊它挖帘,新建一個。

image

配置完畢之后恋技,你可能會關系費用問題拇舀,不用擔心,默認的配置是完全免費的蜻底,如果你用戶量不太大骄崩,基本上夠你的日常需求了,對個人開發(fā)者來說薄辅,相當的有好刁赖。

第二步:云函數開發(fā)及部署

云服務開通完畢,接下來可以部署下腳手架為我們提供的云函數长搀,可以看到cloudfunctions文件夾提示未選擇環(huán)境,我們右鍵點擊鸡典,選擇我們剛才開通的那個云開發(fā)環(huán)境源请。然后展開目錄,對準login這個目錄彻况,右鍵谁尸,選擇

image

然后,關閉IDE纽甘,重啟IDE良蛮,在點擊第一個按鈕,獲取openid悍赢,此時可以看到獲取openid是成功的了决瞳。

image

這里表示我們的云開發(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是這樣的绑洛。

image

而我們真正從云函數拿到的結果包裹在內層的result中。

至此童本,手把手帶你使用云函數進行小程序開發(fā)已經結束了真屯,相信這個簡單的demo可以帶你打開對如何利用云函數開發(fā)更多有趣的小程序的大門。

比如穷娱,你可以做一個小游戲绑蔫,利用云函數作為中轉請求你的后臺,讓云函數實現權限校驗鄙煤,來保護你自己的服務器。

比如茶袒,你可以做一個親子相冊梯刚,利用云函數,存儲圖片到騰訊云存儲薪寓。

亦或者亡资,你可以做聊天室...

本項目的代碼地址在此

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市向叉,隨后出現的幾起案子锥腻,更是在濱河造成了極大的恐慌,老刑警劉巖母谎,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瘦黑,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機幸斥,發(fā)現死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門匹摇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人甲葬,你說我怎么就攤上這事廊勃。” “怎么了经窖?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵坡垫,是天一觀的道長。 經常有香客問我画侣,道長冰悠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任棉钧,我火速辦了婚禮屿脐,結果婚禮上,老公的妹妹穿的比我還像新娘宪卿。我一直安慰自己的诵,他們只是感情好,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布佑钾。 她就那樣靜靜地躺著西疤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪休溶。 梳的紋絲不亂的頭發(fā)上代赁,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天,我揣著相機與錄音兽掰,去河邊找鬼芭碍。 笑死,一個胖子當著我的面吹牛孽尽,可吹牛的內容都是我干的窖壕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼杉女,長吁一口氣:“原來是場噩夢啊……” “哼瞻讽!你這毒婦竟也來了?” 一聲冷哼從身側響起熏挎,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤速勇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后坎拐,有當地人在樹林里發(fā)現了一具尸體烦磁,經...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡养匈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了个初。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乖寒。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖院溺,靈堂內的尸體忽然破棺而出楣嘁,到底是詐尸還是另有隱情,我是刑警寧澤珍逸,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布逐虚,位于F島的核電站,受9級特大地震影響谆膳,放射性物質發(fā)生泄漏叭爱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一漱病、第九天 我趴在偏房一處隱蔽的房頂上張望买雾。 院中可真熱鬧,春花似錦杨帽、人聲如沸漓穿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晃危。三九已至,卻和暖如春老客,著一層夾襖步出監(jiān)牢的瞬間僚饭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工胧砰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留鳍鸵,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓尉间,卻偏偏與公主長得像偿乖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子乌妒,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內容