"primary" size="default" plain="{{luStatu?'false':'true'}}">录音上传
2.jsPage({
data: {
luStatu: false,
voiceList: []
},
touchStart: function () {
this.setData({
luStatu: true })
wx.startRecord({
success: function (res) {
var tempFilePath = res.tempFilePath var voiceList = this.data.voiceList voiceList.push({ name: tempFilePath })
this.setData({
voiceList: voiceList })
}.bind(this),
fail: function () {
wx.showToast({
title: '录音失败',
icon: 'none'
})
}
})
},
touchEnd: function () {
this.setData({
luStatu: false })
wx.stopRecord()
},
deleteVoice: function (e) {
var index = e.currentTarget.dataset.index var voiceList = this.data.voiceList voiceList.splice(index,1)
this.setData({
voiceList: voiceList })
}
})
3.json{
"navigationBarTitleText": "语音录入与删除"
}
4.wxss.voice-list {
margin-top:2vh;
}
.voice-item {
display: flex;
align-items: center;
}
.delete-voice {
margin-left:10px;
}
以上是一个简单的微信小程序页面，实现了语音录入和删除功能。当用户点击“录音上传”按钮时，可以开始录音，并且在页面上显示录音文件的名称。用户还可以通过点击“删除”按钮来删除已经上传的录音文件。接下来，我们将详细介绍每个部分的代码。wxml部分主要包括了一个“录音上传”按钮和录音文件列表的展示，其中录音上传按钮的点击事件绑定了touchStart和touchEnd两个函数，用于开始和停止录音。录音文件列表使用wx:for指令来遍历voiceList数组，通过text和button标签来展示录音文件的名称和删除按钮。
js部分定义了页面的初始数据luStatu为false和voiceList为空数组。touchStart和touchEnd函数分别用于开始和停止录音，并且将录音文件的名称添加到voiceList数组中。deleteVoice函数用于删除特定的录音文件，通过splice方法来实现。
json部分只包含了页面的标题信息。
wxss部分主要定义了录音文件列表的样式，使其能够美观地展示在页面上。
通过以上代码示例，我们实现了一个简单的微信小程序页面，用户可以通过点击按钮来录入语音，并且可以在页面上看到已经录入的语音文件，并且可以删除不需要的录音文件。这个功能可以应用在很多场景中，比如语音留言、语音备忘录等。希望以上内容对您有所帮助。
