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

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

第一步，環境配置

打開微信小程序開發IDE，創建一個小程序項目，AppID需要自己去小程序官網註冊一個，然後後端服務注意選擇小程序-雲開發。

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

image

然後點擊新建。不出所料，應該會出現這樣一個界面。

image

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

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

image

配置完畢之後，你可能會關心費用問題，不用擔心，默認的配置是完全免費的，如果你用戶量不太大，基本上夠你的日常需求了，對個人開發者來說，相當的有好。

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

雲服務開通完畢，接下來可以部署下腳手架為我們提供的雲函數，可以看到cloudfunctions文件夾提示未選擇環境，我們右鍵點擊，選擇我們剛才開通的那個雲開發環境。然後展開目錄，對準login這個目錄，右鍵，選擇

image

然後，關閉IDE，重啟IDE，在點擊第一個按鈕，獲取openid，此時可以看到獲取openid是成功的了。

image

這裡表示我們的雲開發環境從開通到部署的鏈路已經打通了，接下來的事情，當然是寫自己的雲函數了。我們是要做一個新聞諮詢的小程序，所以，一般來說，找一個自己經常看的覺得內容質量不錯的新聞內網站看看人家提供了什麼接口沒，分兩步走：

1、如果有提供了接口，我們在雲函數中直接調用接口，拿到數據，餵給小程序前端即可，這種最方便了。

2、通常情況下是沒有接口的，此時怎麼辦？一個思路是使用雲函數去爬取新聞網站的內容，存放到雲開發db上面，然後小程序端來讀雲開發db中的內容，亦或者直接通過通過爬蟲程序生成一個json返回給小程序端，不通過存儲db這個過程。其缺點是沒有緩存數據，每次都要經過爬蟲去爬，用戶可能等很久才能看到新聞，體驗並不好。目前，雲開發套件裡面有提供db服務，所以，既然提供了，當然就直接拿來使用了，提升用戶體驗的事，當然就得幹了。

本文為了簡便期間，目的就是為了介紹如何在小程序中使用騰訊雲的雲函數功能，因此，就不介紹db的存儲了。那麼，開始吧。

新建雲函數

直接對這cloudfunctions那個文件夾點擊新建雲函數，成功之後就會看到目錄裡面有腳手架生成的一些框架代碼了。

<code>// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    data:data
  }
}
/<code> 

大多看到是這種，其中wxContext是小程序的上下文，這裡可以拿到小程序的AppID等等一些常量信息。

然後，event這個參數是幹嘛，event其實就是小程序端傳遞給這邊的參數：

<code>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)
      }
    })
  },
/<code>

比如，我在小程序端調用news這個雲函數，傳遞data為

<code>{
  hot_type:'views',//hot_type 可接受參數 views（瀏覽數） | likes（點贊數） | comments（評論數）
  category:'Article',//category 可接受參數 Article | GanHuo | Girl
  count:20
}
/<code>

那麼這個event其實就是這個object。

好了，瞭解了腳手架為我們創建的一些模板及其參數之後，我們就可以編寫業務邏輯了。

獲取新聞邏輯

獲取新聞需要發送網絡請求，這裡我們直接使用axios，但是微信小程序這裡沒有提供，所以我們需要在雲函數的目錄中去執行

<code>npm i axios
/<code>

注意，一定是在你生成的按個雲函數的目錄中去執行npm i

然後，就可以愉快的寫網路請求了。

<code>// 雲函數入口文件
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
  }
}
/<code>

如上，我在雲函數中加了一個getNews的方法，接受的三個參數是小程序端傳遞過來的。然後拿到請求結果之後，在返回給小程序端。需要注意的是，返回的body是這樣的。

image

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

至此，手把手帶你使用雲函數進行小程序開發已經結束了，相信這個簡單的demo可以帶你打開對如何利用雲函數開發更多有趣的小程序的大門。

比如，你可以做一個小遊戲，利用雲函數作為中轉請求你的後臺，讓雲函數實現權限校驗，來保護你自己的服務器。

比如，你可以做一個親子相冊，利用雲函數，存儲圖片到騰訊雲存儲。

亦或者，你可以做聊天室...

本項目的代碼地址在此