天天看點

【Serverless】雲函數微信小程式

簡介

什麼是AppGallery Connect雲函數

雲函數是一項Serverless計算服務,提供FaaS(Function as a Service)能力,可以幫助開發者大幅簡化應用開發與運維相關事務,降低應用功能的實作門檻,快速建構業務能力。

雲函數提供了高效可靠的函數開發與運作架構,替開發者完全解決傳統應用開發與運維中的諸多複雜事務(如伺服器配置與管理、代碼部署、負載均衡、彈性伸縮、高可用保證等),開發者隻須聚焦業務邏輯、開發并上傳函數代碼,即可建構高可用、可伸縮的Serverless應用。

雲函數作為Serverless的核心與樞紐,支援連接配接和擴充周邊雲服務能力,開發者可以像拼搭積木一樣自由便捷地組織各項服務來實作業務邏輯

您将建立什麼?

在本次案例中,您将實作一個能夠使用AppGallery Connect雲函數與用戶端進行互動的功能,您需要完成的功能将包含:

在AGC網站上添加實作生肖計算的函數。

在AGC網站上測試新增的函數。

用戶端調用新增函數,輸入年份并成功得到傳回。

你将會學到什麼:

如何将方法函數添加為AppGallery Connect的雲函數。

如何測試添加的雲函數。

如何內建AppGallery Connect雲函數的SDK并在本地調用雲函數。

您需要什麼?

開發環境及技能要求

您需要搭一套完整的微信開發工具開發環境

熟悉JavaScript

參考​​賬号注冊認證​​注冊成為開發者

能力接入準備

內建AppGallery Connect雲函數,需要完成以下準備工作

1.建立微信小程式工程

2.建立AppGallery Connect應用

在華為AppGallery Connect控制台建立應用。開發者可以先建立一個項目,然後在項目中添加應用。建立應用的過程中開發者需要填寫對應應用的名稱、包名、分類、語言等資訊,建立完成後開發者可以獲得應用的基本配置資訊。

(1).登入​​AppGallery Connect網站​​,輸入賬号資訊進入AppGallery Connect控制台。

(2).在AppGallery Connect控制台頁面上,點選"我的項目",進入項目管理頁面。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

(3).在我的項目管理頁面,點選添加項目按鈕,輸入項目名稱,建立項目。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

(4).在項目設定頁面點選添加應用開始建立我的應用。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

(5)在建立應用頁面,填寫應用名稱,應用包名。平台,裝置,應用分類(應用、遊戲)和語言,請按實際情況選擇。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

(6).應用建立成功後,可在我的項目中檢視應用包名和APP ID**ID等資訊。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

提示:需要通過注冊成開發者才能完成內建準備中的操作,否則無法進行接入準備操作。

配置您的開發環境

  1. 登入​​AppGallery Connect網站​​,點選"我的項目"。
  2. 在項目清單中選擇您需要開通雲函數服務的項目。
  3. 在左側導航欄選擇"建構 > 雲函數"。
  4. 點選頁面右上角"立即開通"。

說明:

如果您此時未設定預設資料處理位置,系統會自動彈出提示框提示您設定預設資料處理位置,具體操作請參見​​設定預設​​

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

內建SDK

在微信小程式項目中,安裝雲函數JS SDK到項目中,安裝完成後添加到package.Json

npm install --save @agconnect/[email protected]

配置雲函數

建立雲函數

1.開通雲函數服務後,在雲函數界面,點選"+建立雲函數"。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

2.在建立界面中,完成函數定義。

1)"函數名稱"和"描述"欄輸入函數名稱與描述。

2)"代碼輸入類型"選擇"線上編輯"。

3)"部署資訊"中輸入部署資訊,可使用預設配置。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

3.在handler.js檔案的代碼輸入框中輸入以下代碼。

let myHandler = function(event, context, callback, logger) 

    var res = new context.HTTPResponse(context.env, { 

            "res-type":"context.env", 

        "faas-content-type":"json", 

},"application/json", "200"); 

    var year; 

    if (event.body) { 

        var _body = JSON.parse(event.body); 

        year = _body.year; 

    } else { 

        year = event.year; 

    } 

    var body = { 

            result:'' 

}; 

    body.result = animal(year); 

    res.body = body; 

    context.callback(res); 

    function animal (inputYear) 

        var resultString; 

    if (!isNumber(inputYear)) { 

        resultString = "input is not a number"; 

    } else { 

        var remainder = inputYear % 12; 

        switch (remainder) { 

            case 0: 

                resultString = "Monkey"; 

                break; 

            case 1: 

                resultString = "Chicken"; 

                break; 

            case 2: 

                resultString = "Dog"; 

                break; 

            case 3: 

                resultString = "Pig"; 

                break; 

            case 4: 

                resultString = "Mouse"; 

                break; 

            case 5: 

                resultString = "Cow"; 

                break; 

            case 6: 

                resultString = "Tiger"; 

                break; 

            case 7: 

                resultString = "Rabbit"; 

                break; 

            case 8: 

                resultString = "Dragon"; 

                break; 

            case 9: 

                resultString = "Snake"; 

                break; 

            case 10: 

                resultString = "Horse"; 

                break; 

            case 11: 

                resultString = "Sheep"; 

                break; 

            default: 

                resultString = "No symbolic Animal"; 

        } 

    } 

    return resultString; 

} 

    function isNumber (input) 

    if (parseInt(input).toString == "NaN") { 

        return false; 

    } else { 

        return true; 

    } 

} 

}; 

module.exports.myHandler =myHandler;      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

測試函數

1.您可以通過兩種方式進入函數測試頁面。

1)點選函數詳情界面右上角的"測試"按鈕。

2)在Cloud Functions主界面上左側導航欄點選"函數",在函數頁面點選"測試"頁簽。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

2.選擇剛剛建立的函數及其版本,在事件中輸入如下代碼:

{ 
"year": 2020      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

3.在執行結果中檢視結果,判斷是否與如下結果一緻:

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

添加觸發器

1.在函數清單中點選函數名稱進入函數詳情頁面。如果是函數别名,則進入函數别名配置頁面。

2.點選"配置"頁簽下的"添加觸發器",顯示觸發器建立界面。

3.在"配置觸發器"區域配置"觸發器類型"等資訊,此處以HTTP觸發器類型和POST請求方式為例。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

4.完成後點選"添加"并點選"儲存"。

5.将"詳細資訊"中的"觸發URL"的字尾儲存,作為後續用戶端請求時的觸發器辨別。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

界面設定

您可以按照以下UI進行設計:      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

代碼如下:

index.wxml:

<view class="container">

  <view>

    <form catchsubmit="formSubmit" catchreset="formReset">

      <text>AGC-function-Demo</text>

      <text>\n</text>

      <text>\n</text>

      <view class="weui-cell__bd" style="margin: 30rpx 0">

        <input class="weui-input" name="httpTrigger" placeholder="input your HttpTrigger"

      </view>

      <view class="weui-cell__bd" style="margin: 30rpx 0">

        <input class="weui-input" name="body" placeholder="input your Body"

      </view>

      <text>\n</text>

      <view class="btn-area">

        <button style="margin: 30rpx 0" type="primary" formType="submit" data-type="run">run</button>

      </view>

    </form>

  </view>

  <view class="text-box">

    <text class="text-content">{{functionRes}}</text>

  </view>

 

</view>      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

index.wxss:

/**index.wxss**/

.container {

  padding:0 0;

}

.userinfo {

  color:#aaa;

}

 

.userinfo-avatar {

  overflow: hidden;

  width:128rpx;

  height:128rpx;

  margin:20rpx;

  border-radius:50%;

}

 

.section_switch {

  display: flex;

  align-items: center;

  justify-content: space-around;

}

 

.text-box {

  margin:20rpx;

}

.text-content {

  word-break: break-all;

}      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

雲函數開發

雲函數最主要的功能就是在端側觸發雲測的函數,首先調用wrap接口通過觸發器辨別指定需要觸發的函數,然後調用call接口将函數的入參傳入并觸發函數。

formSubmit: function (e)

        console.log(e);

        var _a = e.detail.value, httpTrigger = _a.httpTrigger, body = _a.body;

        switch (e.detail.target.dataset.type) {

            case 'run':

                this.run(httpTrigger, body);

                break;

            default:

                break;

        }

    },

 

run: function (httpTrigger, body)

        var _this = this;

        var functionCallable = agconnect.function().wrap(httpTrigger);

        functionCallable.call(body).then(function (res)

            _this.setData({

                functionRes: JSON.stringify(res.getValue())

            });

        });

    }      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

在初始化時輸入剛剛複制的應用配置資訊

var agConnectConfig = { 

    //應用配置資訊 

    } 

    //初始化agc      
【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

打包測試

1.打開微信開發者工具,選擇編譯。

2. 打開頁面後再HttpTrigger中填寫之前在建立觸發器時擷取的觸發器辨別,再Function Body中添加觸發的入參。

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

3.點選run後檢視result。

列印結果顯示2022是虎年,說明測試成功

【Serverless】雲函數微信小程式
【Serverless】雲函數微信小程式

恭喜您

  • 如何将方法函數添加為AppGallery Connect的雲函數。
  • 如何測試添加的雲函數。
  • 如何內建AppGallery Connect雲函數的SDK并在本地調用雲函數。

參考檔案

  • 詳細的雲函數配置開發指南請參見​​雲函數服務開發指南​​。
  • 雲函數的相關API介紹請參見​​雲函數API參考​​。

繼續閱讀