小程序 - 顏值大師

文章目錄

• 小程序 - 顏值大師
• 1、基礎(chǔ)要求
• 1.1掌握 HTML CSS JS
• 1.2了解微信小程序的基本使用
• 1.3了解 ES6 常用語法
• 2、動(dòng)態(tài)設(shè)置 camera 組件的高度
• 2.1渲染 camera 組件
• 3、隱藏 navigation 導(dǎo)航條
• 4、在 camera 組件之上渲染操作按鈕
• 4.1定義如下的頁面結(jié)構(gòu)：
• 4.2美化樣式：
• 5、動(dòng)態(tài)切換攝像頭朝向
• 5.1在 data 中定義數(shù)據(jù)：
• 5.2為切換攝像頭按鈕綁定點(diǎn)擊事件處理函數(shù)：
• 5.3 實(shí)現(xiàn)reverseCamera函數(shù)的功能：
• 5.4為 camera 組件動(dòng)態(tài)綁定 `device-position`
• 6、實(shí)現(xiàn)拍照功能
• 6.1在 data 中定義數(shù)據(jù)：
• 6.2為拍照按鈕綁定點(diǎn)擊事件處理函數(shù)：
• 6.3實(shí)現(xiàn) takePhoto 函數(shù)的功能：
• 7、從相冊(cè)選取照片
• 7.1為按鈕綁定事件處理函數(shù)：
• 7.2實(shí)現(xiàn) choosePhoto 函數(shù)：
• 8、將選擇的照片渲染到屏幕上
• 8.1定義 UI 結(jié)構(gòu)：
• 9、重選照片
• 9.1定義 UI 結(jié)構(gòu)：
• 9.2實(shí)現(xiàn) reChoose 函數(shù)：
• 10、申請(qǐng)百度AI開放平臺(tái)賬號(hào)
• 11、實(shí)現(xiàn)API鑒權(quán)
• 12、將圖片轉(zhuǎn)碼為 base64 字符串
• 13、發(fā)起請(qǐng)求檢測(cè)顏值數(shù)據(jù)
• 14、把英文信息映射為中文信息

1、基礎(chǔ)要求

1.1掌握 HTML CSS JS

1.2了解微信小程序的基本使用

• 會(huì)創(chuàng)建小程序項(xiàng)目和小程序頁面

• 知道小程序頁面的組成部分及各自的作用

• 會(huì)用 button，image，view 等小程序組件

• 會(huì)使用 wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求

1.3了解 ES6 常用語法

• 箭頭函數(shù)

• let，const 等

2、動(dòng)態(tài)設(shè)置 camera 組件的高度

2.1渲染 camera 組件

<camera style="height: {{wh}}px; width: 100%;" flash="off"></camera>

1. 在 data 中定義 wh

   data: {    // 窗口可用的高度    wh: 0}

2. 動(dòng)態(tài)獲取頁面可用高度

   /*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad: function(options) {    const sysInfo = wx.getSystemInfoSync()    this.setData({        wh: sysInfo.windowHeight    })}

3、隱藏 navigation 導(dǎo)航條

在 app.json 的 window 節(jié)點(diǎn)中，新增如下配置：

{  "pages": [    "pages/home/home"  ],  "window": {    // ... 省略其他配置    "navigationStyle": "custom"  },  "sitemapLocation": "sitemap.json"}

4、在 camera 組件之上渲染操作按鈕

4.1定義如下的頁面結(jié)構(gòu)：

<camera style="height: {{wh}}px; width: 100%;" flash="off">  <cover-view class='btn-box'>    <!-- 切換攝像頭 -->    <cover-image src='/images/icon/reverse.png'></cover-image>    <!-- 拍照 -->    <cover-image src='/images/icon/camera.png'></cover-image>    <!-- 從相冊(cè)選取照片 -->    <cover-image src='/images/icon/album.png'></cover-image>  </cover-view></camera>

4.2美化樣式：

.btn-box {  display: flex;  justify-content: space-around;  position: absolute;  bottom: 50px;  width: 100%;}.btn-box cover-image {  width: 50px;  height: 50px;  opacity: 0.7;}

5、動(dòng)態(tài)切換攝像頭朝向

5.1在 data 中定義數(shù)據(jù)：

data: {    // 攝像頭的朝向   front   back    position: 'front'}

5.2為切換攝像頭按鈕綁定點(diǎn)擊事件處理函數(shù)：

<!-- 切換攝像頭 --><cover-image src='/images/icon/reverse.png' bindtap='reverseCamera'></cover-image>

5.3 實(shí)現(xiàn)reverseCamera函數(shù)的功能：

// 點(diǎn)擊按鈕，切換攝像頭reverseCamera() {    const newPosition = this.data.position === 'front' ? 'back' : 'front'    this.setData({      position: newPosition    })}

5.4為 camera 組件動(dòng)態(tài)綁定 device-position

<camera style="height: {{wh}}px; width: 100%;" flash="off" device-position='{{position}}'></camera>

6、實(shí)現(xiàn)拍照功能

6.1在 data 中定義數(shù)據(jù)：

data: {    // 照片的路徑    src: ''}

6.2為拍照按鈕綁定點(diǎn)擊事件處理函數(shù)：

<!-- 拍照 --><cover-image src='/images/icon/camera.png' bindtap='takePhoto'></cover-image>

6.3實(shí)現(xiàn) takePhoto 函數(shù)的功能：

// 拍照takePhoto() {    // 創(chuàng)建相機(jī)的實(shí)例對(duì)象    const ctx = wx.createCameraContext()    // ctx.takePhoto 實(shí)現(xiàn)拍照    ctx.takePhoto({      quality: 'high',      success: (res) => {        // console.log(res.tempImagePath)        this.setData({          src: res.tempImagePath,          isShowPic: true        }, () => {          this.getFaceInfo()        })      },      fail: () => {        console.log('拍照失敗！')        this.setData({          src: ''        })      }    })}

7、從相冊(cè)選取照片

7.1為按鈕綁定事件處理函數(shù)：

<!-- 從相冊(cè)選取照片 --><cover-image src='/images/icon/album.png' bindtap='choosePhoto'></cover-image>

7.2實(shí)現(xiàn) choosePhoto 函數(shù)：

  // 從相冊(cè)選取照片  choosePhoto() {    wx.chooseImage({      count: 1,      sizeType: ['original'],      sourceType: ['album'],      success: (res) => {        // console.log(res)        if (res.tempFilePaths.length > 0) {          this.setData({            src: res.tempFilePaths[0],            isShowPic: true          }, () => {            this.getFaceInfo()          })        }      },      fail: () => {        console.log('選擇照片失敗！')        this.setData({          src: ''        })      }    })  }

8、將選擇的照片渲染到屏幕上

8.1定義 UI 結(jié)構(gòu)：

<view wx:else>  <image src='{{src}}' style='width: 100%; height: {{wh}}px; display: block;' mode='aspectFill'></image></view>

9、重選照片

9.1定義 UI 結(jié)構(gòu)：

<button type='warn' class='reChoose' bindtap='reChoose'>重選照片</button>

9.2實(shí)現(xiàn) reChoose 函數(shù)：

// 重新選擇照片  reChoose() {    this.setData({      isShowPic: false,      src: ''    })  }

10、申請(qǐng)百度AI開放平臺(tái)賬號(hào)

1. 申請(qǐng)百度賬號(hào)
2. 登錄開放平臺(tái) http://ai.baidu.com/
3. 創(chuàng)建人臉識(shí)別的應(yīng)用
4. 填寫應(yīng)用信息
5. 得到應(yīng)用的 API Key 和 Secret Key

11、實(shí)現(xiàn)API鑒權(quán)

// this.globalData.access_token = 'aaa'    wx.request({      method: 'POST',      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=自己的ID&client_secret=自己的KEY',      success: (res) => {        this.globalData.access_token = res.data.access_token      },      fail: () => {        wx.showToast({          title: '鑒權(quán)失敗！',        })      }    })

12、將圖片轉(zhuǎn)碼為 base64 字符串

const fileManager = wx.getFileSystemManager()const fileStr = fileManager.readFileSync(this.data.src, 'base64')

13、發(fā)起請(qǐng)求檢測(cè)顏值數(shù)據(jù)

wx.request({      method: 'POST',      url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token='   token,      header: {        'Content-Type': 'application/json'      },      data: {        image_type: 'BASE64',        image: fileStr,        // 年齡,顏值分?jǐn)?shù),表情,性別,是否戴眼鏡,情緒        face_field: 'age,beauty,expression,gender,glasses,emotion'      },      success: (res) => {        console.log(res)        if (res.data.result.face_num <= 0) {          return wx.showToast({            title: '未檢測(cè)到人臉！',          })        }        this.setData({          faceInfo: res.data.result.face_list[0],          isShowBox: true        })      },      fail: () => {        wx.showToast({          title: '顏值檢測(cè)失敗！',        })      },      complete: () => {        wx.hideLoading()      }    })

14、把英文信息映射為中文信息

1. 定義映射關(guān)系：

   data: {    // 映射關(guān)系    map: {      gender: {           male: '男', female: '女'      },      expression: {        none: '不笑', smile: '微笑', laugh: '大笑'      },      glasses: {        none: '無眼鏡',common: '普通眼鏡',sun: '墨鏡'      },      emotion: {        angry: '憤怒', disgust: '厭惡', fear: '恐懼', happy: '高興',        sad: '傷心', surprise: '驚訝', neutral: '無情緒'      }    }}

2. 修改UI結(jié)構(gòu)：

   <view class='faceinfo_box' wx:if="{{isShowBox}}">    <view class='face_row'>      <text>年齡：{{faceInfo.age}}歲</text>      <text>性別：{{map.gender[faceInfo.gender.type]}}</text>    </view>    <view class='face_row'>      <text>顏值：{{faceInfo.beauty}}分</text>      <text>表情：{{map.expression[faceInfo.expression.type]}}</text>    </view>    <view class='face_row'>      <text>眼鏡：{{map.glasses[faceInfo.glasses.type]}}</text>      <text>情緒：{{map.emotion[faceInfo.emotion.type]}}</text>    </view></view>