第三章 “我要點爆”微信小程序云開發(fā)之點爆方式頁面和爆炸之音頁面制作

點爆方式選擇頁面制作

在app.json中配置頁面路徑增加selectbao點爆方式選擇，編譯創(chuàng)建頁面文件照藻，點爆方式選擇頁面通過單選按鈕組選擇跳轉(zhuǎn)到相應(yīng)的點爆頁面。

<view class="the_header">
  <text>選擇點爆方式</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="select_check">
  <radio-group bindchange="selectway">
    <radio checked='true' value='爆炸之音'>爆炸之音</radio>
    <radio value='瘋狂點擊'>瘋狂點擊</radio>
    <radio value='糖果點爆'>糖果點爆</radio>
  </radio-group>
</view>
<view class="select_button">
  <button bindtap="next">下一步</button>
</view>

給單選按鈕組增加bindchange屬性的方法汗侵，控制獲取所選項幸缕，當點擊下一步時觸發(fā)點擊事件，通過next方法判斷跳轉(zhuǎn)不同的頁面晰韵。

Page({
  data: {
    wway: '爆炸之音'
  },
  selectway: function (e) {
    this.setData({
      wway: e.detail.value
    })
  },
  next: function () {
    let wway = this.data.wway
    wx.setStorageSync('wway', wway)
    if (wway == '爆炸之音') {
      wx.navigateTo({
        url: '../selecty/selecty'
      })
    } else if (wway == '瘋狂點擊') {
      wx.navigateTo({
        url: '../selectd/selectd'
      })
    } else {
      wx.navigateTo({
        url: '../selectt/selectt'
      })
    }
  },
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '點爆方式'
    })
  }
})

運行效果圖：

爆炸之音方式制作

在app.json中增加爆炸之音錄音頁面selecty和爆炸之音確認頁面selectyok发乔，在selecty中我們進行錄音操作，在selectyok中我們進行語音試聽和爆文發(fā)布操作雪猪。

selecty.wxml中設(shè)置一個button錄音按鈕栏尚，并使用bindtouchstart和bindtouchend屬性進行錄音控制，與語音記錄相同浪蹂。

<view class="the_header">
  <text>爆炸之音</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="button1">
  <button bindtouchstart="touchdown" bindtouchend="touchup"><image src="/images/yuyin5.png"></image></button>
</view>

在錄音過程中調(diào)用幀文件監(jiān)聽的回調(diào)事件RecorderManager.onFramRecorded(function callback)對幀文件進行監(jiān)聽,用sum記錄幀文件的大小和抵栈，用sumt記錄幀文件的個數(shù)告材。

    //監(jiān)聽幀文件
    recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      sum += frameBuffer.byteLength
      sumt++
    })

在停止錄音后，使用下方算法對熱度值進行簡單計算古劲。

    if (sumt > 10) {
      var wn = (sum - 1500) / (sumt - 1) - 2300
    } else {
      var wn = (sum - 1500) / (sumt - 1) - 3000
    }

在云開發(fā)控制臺存儲中新建baovoice文件夾用于保存爆炸之音所錄的語音斥赋，同時新建云函數(shù)updateBaovoice，云函數(shù)用于修改用戶users表中baovoice的數(shù)量值产艾，用于記錄用戶所錄入爆炸之音的個數(shù)和對語音文件進行命名疤剑。云函數(shù)創(chuàng)建并完成配置與編寫后，上傳并部署闷堡。

updateBaovoice/index.js

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

js中對語音進行操作，完成錄音后跳轉(zhuǎn)到爆炸之音確認頁面selectyok

//錄音管理
const recorderManager = wx.getRecorderManager()
var tempFilePath
var sum = 0
var sumt = 0;
Page({
  data: {

  },
  //按鈕點下開始錄音
  touchdown: function () {
    const options = {
      duration: 300000,//指定錄音的時長杠览，單位 ms
      sampleRate: 16000,//采樣率
      numberOfChannels: 1,//錄音通道數(shù)
      encodeBitRate: 96000,//編碼碼率
      format: 'mp3',//音頻格式弯菊，有效值 aac/mp3
      frameSize: 5 //指定幀大小，單位 KB
    }
    //監(jiān)聽幀文件
   recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      sum += frameBuffer.byteLength
      sumt++
    })
    //開始錄音
    recorderManager.start(options);
    recorderManager.onStart(() => {
      console.log('recorder start')
    })
    //錯誤回調(diào)
    recorderManager.onError((res) => {
      console.log(res);
    })
  },
  //停止錄音
  touchup: function () {
    wx.showLoading({
      title: '',
      mask: true
    })
    recorderManager.stop();
    if (sumt > 10) {
      var wn = (sum - 1500) / (sumt - 1) - 2300
    } else {
      var wn = (sum - 1500) / (sumt - 1) - 3000
    }
    wx.setStorageSync('wnum', parseInt(wn))
    sum = 0
    sumt = 0
    recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath
      console.log('停止錄音', res.tempFilePath)
      const { tempFilePath } = res
      //查詢用戶已有語音踱阿，記錄管钳，并為文件賦值
      //獲取數(shù)據(jù)庫引用
      const db = wx.cloud.database()
      const _ = db.command
      //查找數(shù)據(jù)庫,獲得用戶語音數(shù)量
      db.collection('users').where({
        _openid: wx.getStorageSync('openId')
      }).get({
        success(res) {
          // res.data 是包含以上定義的記錄的數(shù)組
          console.log('查詢用戶:', res)
          //將名字定為id號+個數(shù)號+.mp3
          var newbaovoice = res.data[0].baovoice + 1
          var baofilename = wx.getStorageSync('openId') + newbaovoice + '.mp3'
          //調(diào)用云函數(shù)，修改爆語音數(shù)量软舌，向云函數(shù)傳值
          wx.cloud.callFunction({
            name: 'updateBaovoice',
            data: {
              openId: wx.getStorageSync('openId'),
              baovoice: newbaovoice
            },
            success: res => {
              //上傳錄制的音頻到云
              wx.cloud.uploadFile({
                cloudPath: 'baovoice/' + baofilename,
                filePath: tempFilePath, // 文件路徑
                success: res => {
                  console.log(res.fileID)
                  //保存點爆語音fileID才漆，方便后面播放
                  wx.setStorageSync('fileIDd', res.fileID)
                  //將數(shù)據(jù)保存到本地
                  wx.setStorageSync('baofilename', baofilename)
                  wx.setStorageSync('ybaotempFilePath', tempFilePath)
                  //關(guān)閉加載
                  wx.hideLoading()
                  //跳轉(zhuǎn)到聽語音的頁面
                  wx.navigateTo({
                    url: '../selectyok/selectyok'
                  })
                },
                fail: err => {
                  // handle error
                  console.error(err)
                }
              })
            }
          })
        },
        fail: err => {

        }
      })
    })
    setTimeout((() => {
      //關(guān)閉加載
      wx.hideLoading()
    }), 4000)
  },
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '爆炸之音'
    })
  }
})

爆炸之音確認頁面

<view class="the_header">
  <text>爆炸之音</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="button1">
  <image src="/images/yuyin6.png" bindtap="play"></image>
  <text>爆炸熱度：{{wtemperature}}</text>
</view>
<view class="selectd_button">
  <button bindtap="add">確定</button>
</view>
<view class="the_btn">
    <button bindtap="seal">封存</button>
</view>

新建爆文信息集合bao和封存信息集合seal，兩個集合的結(jié)構(gòu)相同佛点，如下：

字段名	數(shù)據(jù)類型	主鍵	非空	描述
_id	String	是	是	ID
_openid	String		是	用戶唯一標識
avaterUrl	String
gender	String			性別
province	String			地區(qū)
temperature	number			熱度值
userId	String			ID
username	String			用戶名
wmood	String			心情顏色(文本)
text	String			爆文文本
time	String			操作時間
wway	String			點爆方式(文本)
ymood	String			心情顏色(語音)
yway	String			點爆方式(語音)
filename	String			語音文件名
filelDd	String			爆炸之音地址
baofilename	String			爆炸之音文件名

js模塊加載醇滥，在miniprogram下新建utils文件，同時在utils文件下新建一個utils.js文件超营，用于創(chuàng)建事件函數(shù)

utils.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formaDate = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')
}
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatTime: formatTime,
  formaDate: formaDate
}

js模塊加載require方法鸳玩，引用utils.js文件，獲取一個util對象演闭，調(diào)用對象中的formatTime方法來獲取當前時間怀喉。

var util = require('../../utils/utils.js');

selectyok.js中我們完成錄音的試聽，同時通過爆文記錄頁面保存在本地的wy變量值船响，判斷是文本記錄還是語音記錄躬拢，從而設(shè)置不同的data屬性列表，完整的selectyok.js代碼如下：

var util = require('../../utils/utils.js');
//音頻組件控制
const innerAudioContext = wx.createInnerAudioContext()
const db = wx.cloud.database()
const _ = db.command;
Page({
  data: {
    wtemperature: 0,
    theplay: true
  },
  //播放聲音
  play: function () {
    if (this.data.theplay) {
      this.setData({
        theplay: false
      })
      innerAudioContext.autoplay = true
      innerAudioContext.src = wx.getStorageSync('ybaotempFilePath'),
        innerAudioContext.onPlay(() => {
          console.log('開始播放')
        }),
        innerAudioContext.onEnded(() => {
          this.setData({
            theplay: true
          })
        })
      innerAudioContext.onError((res) => {
        console.log(res.errMsg)
        console.log(res.errCode)
      })
    }
  },
  //頁面被卸載時被執(zhí)行
  onUnload: function () {
    innerAudioContext.stop();
  },
  //當點擊確認后如果語音在播放則關(guān)閉
  onHide: function () {
    innerAudioContext.stop()
  },
  //將數(shù)據(jù)寫入數(shù)據(jù)庫
  add: function () {
    wx.showLoading({
      title: '',
      mask: true
    })
    var wy = wx.getStorageSync("wy")
    if(wy == "w"){
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        text: wx.getStorageSync('wtext'),
        wmood: wx.getStorageSync('wmood'),
        wway: wx.getStorageSync('wway'),
        baofilename: wx.getStorageSync('baofilename'),
        fileIDd: wx.getStorageSync('fileIDd'),
        temperature: wx.getStorageSync('wnum'),
        time: util.formatTime(new Date())
      }
    }else{
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        filename: wx.getStorageSync('filename'),
        fileIDy: wx.getStorageSync('fileIDy'),
        ymood: wx.getStorageSync('ymood'),
        yway: wx.getStorageSync('wway'),
        baofilename: wx.getStorageSync('baofilename'),
        fileIDd: wx.getStorageSync('fileIDd'),
        temperature: wx.getStorageSync('wnum'),
        time: util.formatTime(new Date())
      }
    }
    db.collection('bao').add({
      data: data,
      success: res => {
        console.log('bao存入成功')
        wx.showToast({
          title: '點爆成功',
        })
        setTimeout(() => {
          wx.navigateTo({
            url: '../success/success'
          })
        }, 1000)
        wx.hideLoading()
      }
    })

  },
  //封存
  seal: function () {
    wx.showLoading({
      title: '',
      mask: true
    })
    var wy = wx.getStorageSync("wy")
    if (wy == "w") {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        text: wx.getStorageSync('wtext'),
        wmood: wx.getStorageSync('wmood'),
        wway: wx.getStorageSync('wway'),
        baofilename: wx.getStorageSync('baofilename'),
        fileIDd: wx.getStorageSync('fileIDd'),
        temperature: wx.getStorageSync('wnum'),
        time: util.formatTime(new Date())
      }
    } else {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        filename: wx.getStorageSync('filename'),
        fileIDy: wx.getStorageSync('fileIDy'),
        ymood: wx.getStorageSync('ymood'),
        yway: wx.getStorageSync('wway'),
        baofilename: wx.getStorageSync('baofilename'),
        fileIDd: wx.getStorageSync('fileIDd'),
        temperature: wx.getStorageSync('wnum'),
        time: util.formatTime(new Date())
      }
    }
    db.collection('seal').add({
      data: data,
      success: res => {
        console.log('seal存入成功')
        wx.showToast({
          title: '封存成功',
        })
        setTimeout(() => {
          wx.navigateTo({
            url: '../success/success'
          })
        }, 1000)
        wx.hideLoading()
      }
    })
  },
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '爆炸之音'
    })
    let temperature = wx.getStorageSync('wnum')
    this.setData({
      wtemperature: temperature
    })
  }
})

效果圖：（可以看到爆炸熱度為-1500见间，原因是在開發(fā)者工具的模擬器中所進行的錄音功能對于錄音文件與移動端格式不同聊闯，所以熱度值無法計算）

創(chuàng)建爆文操作成功后提示頁success，success頁面只顯示一個成功的提示文字米诉，然后通過延時定時器自動或手動點擊跳轉(zhuǎn)到首頁世界頁面菱蔬。

success.wxml

<view class="the_header">
  <text>點爆成功</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="button1" bindtap="goindex">
  <image src="/images/baook.png"></image>
</view>

讓導(dǎo)航頁面重新加載，跳轉(zhuǎn)導(dǎo)航的頁面可以通過switchTab，但默認情況是不會重新加載數(shù)據(jù)的拴泌，通過這三行代碼魏身，當進入首頁index時，讓頁面重新加載調(diào)用頁面的onLoad方法蚪腐，達到刷新數(shù)據(jù)的作用箭昵。
var page = getCurrentPages().pop();
if (page == undefined || page==null) return;
page.onLoad();

success.js完整代碼：

Page({
  data: {

  },
  goindex: function () {
    wx.switchTab({
      url: '../index/index',
    })
  },
  //監(jiān)聽頁面自動跳轉(zhuǎn)
  onShow: function () {
    setTimeout(() => {
      wx.reLaunch({
        url: '../index/index',
        success: function (e) {
          var page = getCurrentPages().pop();
          if (page == undefined || page == null) return;
          page.onLoad();
        }
      })
    }, 2000)
  },
  onLoad: function () {
    wx.setStorageSync('wtext', '')
    wx.setStorageSync('wmood', 'red')
    wx.setStorageSync('wway', '1')
    wx.setStorageSync('wnum', 0)
  }
})

現(xiàn)在我們可以進行一次完整的爆炸之音點爆方式的演示：

數(shù)據(jù)庫中成功增加數(shù)據(jù)，說明點爆與發(fā)布成功回季。

第三章 “我要點爆”微信小程序云開發(fā)之點爆方式頁面和爆炸之音頁面制作

點爆方式選擇頁面制作

爆炸之音方式制作

爆炸之音確認頁面

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