Categories
程式開發

高仿瑞幸小程序 08 創建第一個雲函數


通過雲函數,我們將擁有編寫服務端代碼的能力。我們可以在服務端執行一些邏輯,可以上傳圖片,可以調用其他網絡服務的api,可以對數據庫進行操作。重要的是,雲函數的編寫相當簡潔,便利。

在這一節,我們將通過雲函數獲取“為你推薦”的產品數據,實現數據動態化。實現這一功能,我們需要學習以下三塊內容:

1 創建第一個雲函數2 調用雲函數3 學會綁定點擊事件

一 創建第一個雲函數

如何創建雲函數呢?我們這里通過“微信開發者工具”來完成雲函數的創建和代碼編寫。

首先,我們右鍵單擊“cloudfunctions”,選擇“新建Node.js雲函數”

高仿瑞幸小程序 08 創建第一個雲函數 1

寫上我們的函數名“client_home_get_best”,這時候,工具會為我們創建一個同名文件夾,文件夾下面有一些文件,如下圖:

高仿瑞幸小程序 08 創建第一個雲函數 2

接下來我們要做的是安裝wx-server-sdk依賴,怎麼做呢?右鍵點擊新建的雲函數文件夾,選擇“在終端打開”。

高仿瑞幸小程序 08 創建第一個雲函數 3

在打開的終端中輸入“npm install –save [email protected]” 敲下回車並等待依賴下載完成。如下圖:

高仿瑞幸小程序 08 創建第一個雲函數 4

當安裝完依賴後,我們的雲函數文件夾也起了變化。多了node_modules文件夾和package-lock.json文件。

高仿瑞幸小程序 08 創建第一個雲函數 5

對於目前的我們來講,只有index.js文件是最重要的,之後我們會在這個js文件中編寫我們的代碼。先來看看工具默認都生成了什麼代碼:

// 云函数入口文件

const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数

exports.main = async (event, context) => {

  const wxContext = cloud.getWXContext()

  

  return {

    event,

    openid: wxContext.OPENID,

    appid: wxContext.APPID,

    unionid: wxContext.UNIONID,

  }

}

從上往下解讀代碼,先是引入了wx-server-sdk,接著進行了初始化了。

誠如註釋所述,我們的主要工作就是在“雲函數入口函數”內編寫代碼。我們要寫什麼代碼呢?我們要在這裡返回“為你推薦”模塊的數據,在這一節,我們只返回4個產品。在下一節,我們會結合數據庫,從產品數據庫中隨機抽取4個返回。

Ok,在具體編碼之前,我想先對返回的數據做一個約定。

我需要status字段來告訴客戶端,獲取數據是成功了(success)還是失敗了(fail)。

我需要一個msg字段來返回一些信息,雖然,這次用不著,但是我還是想先做好約定。

我還需要一個data字段來返回推薦產品的數據。所以返回數據的格式應該像下面這個樣子。

return {

    status: status,

    msg: msg,

    data: data,

}

我們還需要做的是,把推薦的產品數據賦值給data。

那麼,雲函數入口函數的完整代碼就該是這樣:

// 云函数入口函数

exports.main = async (event, context) => {

  const wxContext = cloud.getWXContext()

  const status = "success"

  const msg = ""

  const data = [{

      name: "拿铁",

      oPrice: 24,

      nPrice: 12,

      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/88F34543128D-1.jpeg"

    },

    {

      name: "提拉米苏爱摩卡",

      oPrice: 19,

      nPrice: 28,

      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/7B69340506EC-1.jpeg"

    },

    {

      name: "陨石拿铁",

      oPrice: 28,

      nPrice: 16.8,

      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/82B1B9FDDB21-1.jpeg"

    },

    {

      name: "榛果拿铁",

      oPrice: 28,

      nPrice: 16.8,

      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/FBD8B7AADBD9-1.jpeg"

    }

  ]

  return {

    status: status,

    msg: msg,

    data: data,

  }

}

當我們寫完雲函數之後,我們需要把雲函數上傳到雲開發的服務器上。怎麼做呢?其實也很簡單,我們只需要右鍵單擊雲函數的文件夾,選擇“上傳並部署:雲端安裝依賴(不上傳node_modules)”

高仿瑞幸小程序 08 創建第一個雲函數 6

至此我們就完成了雲函數的編寫,接下來我們需要對雲函數進行調用。

二 調用雲函數

在小程序中,調用雲函數是一件非常簡單的事。我們只需要用過wx.cloud.callFunction即可。同時,小程序對雲函數的調用是支持Promise風格的。什麼是Promise?這對於js來說是個神器啊。我們有沒有必要講一下Promise,是有必要呢?還是有必要呢?

我們還是簡單說一下Promise吧。簡單的說,就是用來處理異步回調的神器。像獲取網絡數據就是一個典型的異步操作。對於我們來講,只需要熟練使用.then()和.catch()就好。

現在,讓我們回到雲函數的回調上來。我們回想一下,什麼時候會去調用雲函數? 1是界面初始化的時候,還有就是“換一批”和“刷新”圖標被點擊的時候。所以我們需要把調用雲函數的代碼寫成一個函數:

onGetBest

這個函數我們寫在methods塊內。

/**

* 组件的方法列表

*/

methods: {

onGetBest:function(){

  wx.cloud.callFunction({

    name:"client_home_get_best"

  }).then(res=>{

    if (res.result.status == "success" &&res.result.data){

      this.setData({

        products:res.result.data

      })

    }

  }).catch(err=>{

    console.log(err)

  })

}

},

我們需要注意,在什麼地方傳入name的屬性,也就是我們雲函數的函數名“client_home_get_best”。

我們在then中接收雲函數返回的數據。我們在雲函數中返回的數據,都保存在res.result中。想想我們都返回了什麼? status,msg和data。在這裡,我們將以status是否為“success”和data是否存在為依據,來判斷是否要更新“為你推薦”的數據。

調用雲函數的函數就寫完了,如果我有什麼沒講清楚的,可以留言給我。

因為我們在界面初始化的時候,會調用一次雲函數。所以我們要把onGetBest函數在attached中調用一次。接下來,我們要綁定點擊事件。

三 綁定點擊事件

在小程序的組件中,我們可以通過bindtap來綁定點擊事件

bindtap=“onGetBest"

在這個界面中,我們要在兩個組件上綁定點擊事件,1是“換一批”文字,2是刷新圖標,代碼如下:

换一批

是不是很簡單?

我們再來做一個簡單的處理是用戶體驗更好一些。是什麼處理呢?就是當我們接受到數據後,我們再來顯示“為你推薦”模塊。怎麼做到呢?我們可以通過wx:if來實現。怎麼實現呢?通過判斷綁定的數據products數組來判斷,只有當products數組元素大於0時,才顯示“為你推薦”模塊。代碼如下:

0}}">

完整代碼我放在了github上,地址是:

https://github.com/gogoswift/luckin

這個系列的文章列表

我所想的跨平台開發:小程序 +App+Web

高仿瑞幸小程序 00 準備工作

高仿瑞幸小程序 01 初建項目,引入 Vant Weapp

高仿瑞幸小程序 02 創建 Tabbar

高仿瑞幸小程序 03 創建輪播圖

高仿瑞幸小程序 04 小程序的全局數據

高仿瑞幸小程序 05 更正輪播組件的高度計算

高仿瑞幸小程序 06 layout 佈局

高仿瑞幸小程序 07 為你推薦模塊