第二章 "我要點爆"微信小程序點爆頁面的實現與雲函數和雲存儲的應用

點爆頁面的實現與雲函數和雲存儲的應用以及錄音功能講解

點爆頁面制作

點爆頁面主要提供文字記錄和語音記錄兩種爆文記錄方式，在本頁面內輸入文字或錄入語音后選擇心情點擊點爆按鈕，跳轉到點爆方式選擇界面。

首先，我們來實現頁面布局，將文字記錄和語音記錄使用導航切換的方式放在一個頁面內。

導航中在js中設置一個currentTab變量通過數據綁定判斷顯示文字記錄和語音記錄的切換， {{item}} ，使用列表渲染wx:for創建導航，同時通過data-index將當前項的的下標index記錄，用於在js中控制currentTab的值，並為導航每個組件添加一個點擊事件。分別為文字記錄和語音記錄設置兩個form，通過導航切換時currentTab的值和show與hide樣式來判斷是否顯示。

detonation.wxml

<view class="the_header">
  <text>點爆-抑制不住的心情</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="the_nav">
  <text class="item {{currentTab==index ? 'active' : ''}}" wx:for="{{navber}}" 
      data-index="{{index}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<form class="{{currentTab==0 ? 'show' : 'hide'}}">
  <view class="the_main">
    <text space="ensp">  我們在路上，點爆，讓時間忘不掉你的腳步！</text>
    <!-- 當點擊輸入時觸發bindinput -->
    <textarea bindinput="textInput" value="{{baotext.wtext}}" maxlength="-1"></textarea>
  </view>
  <view class="the_check">
  <!-- 當點擊值時觸發bindchange -->
    <radio-group bindchange="changeMood">
      <radio checked="checked" value="紅色">紅色心情</radio>
      <radio value="黑色">黑色心情</radio>
    </radio-group>
  </view>
  <view class="the_button">
    <button bindtap="detonation">點爆</button>
  </view>
</form>
<form class="{{currentTab==1 ? 'show' : 'hide'}}">
  <view class="the_main">
    <text space="ensp">  我們在路上，點爆，讓時間忘不掉你的腳步！</text>
    <view class="yuyin">
      <button bindtouchstart="touchdown" bindtouchend="touchup"><image src="/images/yuyin2.png" bindtap="ystart"></image></button>
    </view>
  </view>
  <view class="the_check">
    <radio-group bindchange="changeMoody">
      <radio checked="checked">紅色心情</radio>
      <radio>黑色心情</radio>
    </radio-group>
  </view>
  <view class="the_button">
    <button bindtap="ydetonation">點爆</button>
  </view>
</form>

在js頁面中將實現登錄判斷、導航切換、錄音功能、文字記錄等功能。
在onShow中對用戶是否為登錄狀態進行判斷，如果未登錄則跳轉到user頁面。
navbarTap為導航點擊切換事件，當文本記錄與語音記錄導航被點擊時觸發，將當前點擊組件的下標index賦值給控制變量currentTab，通過數據綁定改變導航和頁面顯示。
textInput為textarea組件中bindinput屬性的方法，用於實時記錄組件中輸入的文本值。

changeMood情緒單選按鈕組當選中情緒項發生改變時觸發，記錄用戶選擇的情緒顏色。

detonation文字記錄點爆按鈕點擊事件方法，當完成文字記錄后，點擊點爆按鈕即可跳轉到爆炸方式選擇界面，此時我們把當前頁面所有的數據信息暫時保存在本地，方便在最后爆文發布頁面提交保存到數據庫中。

錄音功能：通過button按鈕進行錄音，當按下按鈕時錄音開始，當松開按鈕時錄音結束跳轉到錄音試聽頁面，分別使用button組件的bindtouchstart屬性和bindtouchend屬性。
這里使用RecorderManager來實現錄音操作，在頂部實例化一個唯一的RecorderManager錄音管理器，配置錄音參數options然后調用start開始錄音API開始錄音，松開按鈕錄音結束后調用stop錄音結束API，同時調用錄音結束的回調函數onStop，將音頻文件保存在本地。

在停止錄音后我們要將錄音文件保存下來，同時將音頻文件上傳到雲端（這里我們直接進行音頻文件的存儲，實際上存儲音頻文件應在爆文提交時才執行），保存音頻文件時，為了讓用戶的每個音頻文件文件名唯一，我們用用戶的openid+語音文件數來命名，使用雲函數獲取和修改用戶語音數量，使用雲存儲API上傳文件到雲，下面我們來進行雲函數和雲存儲的操作介紹。

雲函數的使用與環境配置：

1、創建雲函數

右鍵cloudfunctions文件選擇新建Node.js雲函數，雲函數命名為updateVoice用於修改用戶語音數量。

2、安裝node.js及npm：

一：從Node.js官網下載對應平台的安裝程序
二：一鍵安裝
三：打開cmd，輸入node -v，npm -v如果出現版本號，證明安裝成功

注意：在使用npm可能會出現“npm不是內部或外部命名，與不是可運行程序”的提示，這是由於環境變量問題，需對node進行環境變量配置。

3、安裝wx-server-sdk

右鍵updataVoice在終端中打開，運行：

安裝成功后雲函數文件夾中會有多一個文件（package-lock.json）：

右鍵上傳並部署:所有文件

打開雲端控制台可以看到我們雲函數中已經有一個雲函數了。

在雲函數updateVoice下index.js進行雲函數代碼編寫

console.log("4")
// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//聲明數據庫
const db = cloud.database()
console.log("3")
// 雲函數入口函數
exports.main = async (event, context) => {
  console.log("2")
  //取得傳過來的參數
  var voice = event.voice, openId = event.openId;
  //雲函數，更新
  try {
    return await db.collection('users').where({
      _openid: openId
    }).update({
      data: {
        voice: voice
      },
      success: res => {
        console.log('雲函數成功')
      },
      fail: e => {
        console.error(e)
      }
    })
  } catch (e) {
    console.error(e)
  }
}

在雲存儲中創建保存音頻文件的文件夾voice，用來保存上傳到雲端的音頻文件。

上傳文件時調用wx.cloud.callFunction文件上傳API，在上傳時雲存儲路cloudPath設置為雲端文件夾名+文件名，filePath設置為錄音停止回調函數中獲取的文件路徑tempFilePath。

完整的detonation.js代碼：

//錄音管理
const recorderManager = wx.getRecorderManager()
var tempFilePath;
Page({
  data: {
    navber: ['文字記錄', '語音記錄'],//導航數組
    currentTab: 0,//導航判斷
    wtext: '',//文本
    wmood: '紅色',//心情red,black
    ytempFilePath: '',
    ymood: '紅色',
    theplay: true,//監聽是否在錄音
  },
  //監聽頁面顯示,判斷是否登錄
  onShow: function () {
    //如果本地沒有用戶登錄時保存的openId則提示登錄且自動跳轉到user頁面
    let userOpenId = wx.getStorageSync('openId')
    if (!userOpenId) {
      wx.showToast({
        title: '請先登錄~'
      })
      setTimeout(() => {
        wx.switchTab({
          url: '../user/user',
        })
      }, 1500)
    } else {
      console.log(userOpenId,"登錄狀態")
    }
  },
  //文本記錄與語音記錄切換
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.index
    })
  },
  // 文字記錄，輸入文本事件
  textInput: function (e) {
    this.setData({
      wtext: e.detail.value
    })
  },
  //文字記錄，單選按鈕組
  changeMood: function (e) {
    this.setData({
      wmood: e.detail.value
    })
  },
  //文字記錄，點爆按鈕跳轉
  detonation: function (e) {
    let wtext = this.data.wtext
    let wmood = this.data.wmood
    var wy = 'w'
    if (this.data.currentTab == 0) {
      if (wtext == '') {
        wx.showToast({
          title: '請輸入點爆內容',
        })
      } else {
        //將數據保存到本地，保存文爆判斷
        wx.setStorageSync('wtext', wtext)
        wx.setStorageSync('wmood', wmood)
        wx.setStorageSync('wy', wy)
        //跳轉頁面
        wx.navigateTo({
          url: '../selectbao/selectbao'
        })
      }
    }
  },
  //音爆，單選按鈕組
  changeMoody: function (e) {
    this.setData({
      ymood: e.detail.value
    })
  },
  //按鈕點下開始錄音
  touchdown: function () {
    const options = {
      duration: 300000,//指定錄音的時長，單位 ms
      sampleRate: 16000,//采樣率
      numberOfChannels: 1,//錄音通道數
      encodeBitRate: 96000,//編碼碼率
      format: 'mp3',//音頻格式，有效值 aac/mp3
      frameSize: 50,//指定幀大小，單位 KB
    }
    //開始錄音
    recorderManager.start(options);
    recorderManager.onStart(() => {
      console.log('recorder start')
    })
    //錯誤回調
    recorderManager.onError((res) => {
      console.log(res)
    })
  },
  //停止錄音
  touchup: function () {
    //顯示加載
    wx.showLoading({
      title: '',
      mask: true
    })
    recorderManager.stop();
    recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath
      //使用解構，獲取音頻文件
      const { tempFilePath } = res
      //查詢用戶已有語音，記錄，並為文件賦值
      //獲取數據庫引用
      const db = wx.cloud.database()
      const _ = db.command
      //查找數據庫,獲得用戶語音數量
      db.collection('users').where({
        _openid: wx.getStorageSync('openId')
      }).get({
        success(res) {
          // res.data 是包含以上定義的記錄的數組
          //將名字定為id號+個數號+.mp3
          var newvoice = res.data[0].voice + 1
          var filename = wx.getStorageSync('openId') + newvoice + '.mp3'
          console.log(wx.getStorageSync('openId'),res)
          //調用雲函數，修改語音數量，向雲函數傳值
          wx.cloud.callFunction({
            name: 'updateVoice',
            data: {
              openId: wx.getStorageSync('openId'),
              voice: newvoice
            },
            success: res => {
              console.log("1",res)
              //上傳錄制的音頻到雲
              wx.cloud.uploadFile({
                cloudPath: 'voice/' + filename,
                filePath: tempFilePath, // 文件路徑
                success: res => {
                  console.log("5")
                  //保存fileID用於播放雲文件語音
                  wx.setStorageSync('fileIDy', res.fileID)
                  //將數據保存到本地
                  wx.setStorageSync('filename', filename)
                  wx.setStorageSync('ytempFilePath', tempFilePath)
                  //關閉加載
                  wx.hideLoading()
                  //跳轉到聽語音的頁面
                  wx.navigateTo({
                    url: '../voicebao/voicebao'
                  })
                },
                fail: err => {
                  // handle error
                  console.error(err)
                }
              })
            }
          })
        },
        fail: err => {

        }
      })
    })
    setTimeout((() => {
      //關閉加載
      wx.hideLoading()
    }), 4000)
  },
  //音爆，點爆按鈕跳轉
  ydetonation: function (e) {
    wx.showToast({
      title: '請輸入點爆語音',
    })
  }
})

運行效果圖：

語音試聽頁面制作

在文本記錄方式下的點爆按鈕點擊后直接進入點爆方式選擇界面，而語音記錄方式中，為了讓用戶能試聽自己的錄音，我們多加一個試聽頁面。語音試聽頁面與語音記錄頁面幾乎相同，只是改變錄音按鈕為語音播放按鈕。

配置app.json新建vicebao頁面

為語音播放按鈕增加一個點擊事件play方法

<view class="the_header">
  <text>點爆-抑制不住的心情</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="the_nav">
  <text class="item">文字記錄</text>
  <text class="item active">語音記錄</text>
</view>
<form class="show">
  <view class="the_main">
    <text space="ensp">  我們在路上，點爆，讓時間忘不掉你的腳步！</text>
    <view class="yuyin">
      <image src="/images/yuyin.png" bindtap="play"></image>
    </view>
  </view>
  <view class="the_check">
    <radio-group bindchange="changeMood">
      <radio checked="checked" value='紅色'>紅色心情</radio>
      <radio value='黑色'>黑色心情</radio>
    </radio-group>
  </view>
  <view class="the_button">
    <button bindtap="detonation">點爆</button>
  </view>
</form>

在vicebao.js中實現音頻播放，創建一個內部audio上下文InnerAudioContext對象，用於播放音頻，設置音頻自動播放與音頻路徑。通過onUnload和onHide對音頻播放進行控制，進入點爆方式選擇界面時將爆文信息保存到本地。

//音頻組件控制
const innerAudioContext = wx.createInnerAudioContext()
Page({
  data: {
    navber: ['文字記錄', '語音記錄'],
    currentTab: 2,
    ymood: '紅色',
    theplay: true
  },
  //播放聲音
  play: function () {
    if (this.data.theplay) {
      this.setData({
        theplay: false
      })
      innerAudioContext.autoplay = true
      innerAudioContext.src = wx.getStorageSync('ytempFilePath'),
        innerAudioContext.onPlay(() => {
          console.log('開始播放')
        }),
        innerAudioContext.onEnded(() => {
          this.setData({
            theplay: true
          })
        })
      innerAudioContext.onError((res) => {
        console.log(res.errMsg)
      })
    }
  },
  //頁面被卸載時執行
  onUnload: function () {
    innerAudioContext.stop()
  },
  //當點擊下一步后如果語音在播放則關閉
  onHide: function () {
    innerAudioContext.stop()
  },
  //音爆，單選按鈕組
  changeMood: function (e) {
    this.setData({
      ymood: e.detail.value
    })
  },
  //音爆，點爆按鈕跳轉
  detonation: function (e) {
    let ymood = this.data.ymood
    var wy = 'y'
    //將數據保存到本地,保存語音判斷
    wx.setStorageSync('ymood', ymood)
    wx.setStorageSync('wy', wy)
    //跳轉頁面
    wx.navigateTo({
      url: '../selectbao/selectbao'
    })
  },
})

完成語音試聽頁面的制作后，我們現在可以進行錄音功能的測試，在語音記錄界面中對錄音進行授權后，按住錄音按鈕開始錄音，當松開錄音按鈕后頁面會自動跳轉到錄音試聽頁面。我們打開雲開發控制台查看雲存儲中的voice文件，可以發現成功保存了一條語音文件，說明錄音功能已成功。

項目源碼：https://github.com/xiedong2016/dbx