点爆页面主要提供文字记录和语音记录两种爆文记录方式，在本页面内输入文字或录入语音后选择心情点击点爆按钮，跳转到点爆方式选择界面。
首先，我们来实现页面布局，将文字记录和语音记录使用导航切换的方式放在一个页面内。
导航中在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
