這裡有1秒給你微信頭像帶上口罩的軟體！

2020 年 4 月 7 日
筆記

春風瑟瑟，華夏大地一片復甦。

儘管還在疫情之中，但春天已經逐漸出現生機，復工已經一個多月，復學也近在眼前，每天坐地鐵上班的小E，已經找不到座位了，甚至去商場吃飯，也需要等位一個多小時……

雖然中國哪裡都是人山人海，但國外總感染人數已經超過50萬了，這可讓遊學在外的留學生嚇壞了，他們四處勸告放飛自我的歪果仁帶口罩，在朋友圈宣傳、出門派口罩、甚至微信頭像也不放過……

小E的留學生朋友，紛紛求會P圖的小姐姐幫忙給微信頭像P上口罩，但小姐姐拼盡全力，極限也只是10分鐘P一張頭像，根本應付不了姐妹們迫切的需求，以及外國小夥伴紛至沓來的請求……

以至於她昨晚忙到了凌晨4點，第二天8點起床繼續P圖，甚是疲憊。

憐香惜玉的小E，實在是看不得姐妹美貌的外表頂著黑眼圈，於是花了10分鐘，給姐妹做了個「1秒戴口罩」的H5軟體。

▼

自從給小姐妹做了這個軟體後，媽媽再也不用擔心她熬夜了，而且她還成了朋友圈中的「防疫大使」，芳名遠揚，甚至有一些小夥子向她拋出了橄欖枝。

為了讓大家都可以成為朋友圈「防疫大使」，小E在這裡公開「1秒戴口罩」小程式的製作方法~

大家快坐穩扶好，拿著小本本來學習吧！

0.知識點

1. 能夠正確地使用騰訊雲提供的 SDK 進行服務調用

2. 學會使用騰訊云云函數搭建網站服務

3. 學會使用serverless 快速部署應用

1.準備工作

1. 進入騰訊雲控制台，在左上角雲產品菜單里，選擇【人臉識別】-> 【人臉識別】，進入後在左邊菜單欄中選擇【人臉檢測與分析】控制面板，進入後開通服務。

2. 在左上角雲產品菜單里，選擇【管理與審計】-> 【訪問管理】，進入後在左邊菜單欄中選擇【訪問密鑰】->【API 密鑰管理】，生成並獲取一對 API 密鑰。

3. 在電腦上安裝Nodejs語言運行環境，可到下面的網址下載：https://nodejs.org/zh-cn/

4. 安裝serverless framework，npm install -g serverless

5. 在下面的網址中下載本課程的程式碼包：https://github.com/Juliiii/JSCONF-SCF-DEMO

2.運行文件

1. 將申請好的雲 api 秘鑰，填寫進課程的項目中的配置文件：

/server/wearMask/config.js

jsmodule.exports = {  secretId: "your secret id",  secretKey: "your secret key"};

2. 使用 serverless framwork 一鍵部署項目：

進入/server/wearMask，然後執行npm run deploy:install 進入到根目錄，新建serverless.yml 填入下面的配置：

name: wearMask  web:  component: "@serverless/tencent-website"  inputs:    code:      src: ./web      index: index.html      error: index.html      envPath: ./web    env:      apiUrl: ${func.APIGateway}  func:  component: "@serverless/tencent-scf"  inputs:    name: wearMask    codeUri: ./server/wearMask    handler: index.main_handler    runtime: Nodejs8.9    timeout: 30    events:      - apigw:          name: apiUrl          parameters:            environment: release            endpoints:              - path: /                method: POST                enableCORS: TRUE                function:                  isIntegratedResponse: TRUE                  functionQualifier: $LATEST

然後在命令行鍵入：sls –debug，掃碼一鍵登錄，稍等下即可一句命令部署整個項目的前後端。