手把手帶你利用雲函數 SCF 輕鬆實現一個熱點資訊小程序

時間 2020-07-05

標籤手把手利用函數 scf 輕鬆實現一個熱點資訊程序简体版

原文原文鏈接

第一步，環境配置

打開微信小程序開發 IDE，建立一個小程序項目，AppID 須要本身去小程序官網註冊一個，而後後端服務注意選擇小程序-雲開發。javascript

注意，之前的老版本 IDE，在藍色框那裏會有一個騰訊雲的選項。實際上都是使用的騰訊雲服務，統一選擇小程序-雲開發就好。前端

點擊新建，會出現這樣一個界面：java

能夠看到，微信開發者工具的腳手架已經爲咱們建立好了一些模板代碼，今天，豬腳就是咱們的 cloudfunctions 部分，即如何利用騰訊雲爲咱們即將寫的新聞小程序提供數據服務。ios

在開發以前，咱們發現控制檯報了一個錯誤，提示咱們沒有開通雲服務。咱們發現微信開發者工具的頂部工具欄中，雲開發那個按鈕是灰色的，點擊進去，提示咱們開通，表示咱們沒有開通雲開發服務，點擊它，新建一個。git

配置完畢以後，你可能會關係費用問題，不用擔憂，默認的配置是徹底免費的，若是你用戶量不太大，基本上夠你的平常需求了，對我的開發者來講，至關的友好。github

第二步：雲函數開發及部署

雲服務開通完畢，接下來能夠部署下腳手架爲咱們提供的雲函數，能夠看到 cloudfunctions 文件夾提示未選擇環境，咱們右鍵點擊，選擇咱們剛纔開通的那個雲開發環境。而後展開目錄，對準 login 這個目錄，右鍵，選擇express

而後，關閉 IDE，重啓 IDE，在點擊第一個按鈕，獲取 openid，此時能夠看到獲取 openid 是成功的了。npm

這裏表示咱們的雲開發環境從開通到部署的鏈路已經打通了，接下來的事情，固然是寫本身的雲函數了。咱們是要作一個新聞諮詢的小程序，因此，通常來講，找一個本身常常看的以爲內容質量不錯的新聞內網站看看人家提供了什麼接口沒，分兩步走：json

若是有提供了接口，咱們在雲函數中直接調用接口，拿到數據，餵給小程序前端便可，這種最方便了。axios
一般狀況下是沒有接口的，此時怎麼辦？一個思路是使用雲函數去爬取新聞網站的內容，存放到雲開發 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 能夠帶你打開對如何利用雲函數開發更多有趣的小程序的大門。

好比，你能夠作一個小遊戲，利用雲函數做爲中轉請求你的後臺，讓雲函數實現權限校驗，來保護你本身的服務器。

好比，你能夠作一個親子相冊，利用雲函數，存儲圖片到騰訊雲存儲。

亦或者，你能夠作聊天室...