“乡音回响”微信小程序技术总结
##此文由于原服务器过期，原稿丢失，故在此尽量回忆。原稿大概发布于22年9月，故将本回忆版发布时间也调整为22年9月，实际该版写于23年9月。
小程序码
录音页面
scroll-view
<scroll-view class="container1" scroll-y="true">
<view class="text">
<text class="text2">{{lizi}}</text>
</view>
</scroll-view>
<scroll-view>标签创建了一个可滚动的视图容器，设置了class属性为container1，并启用了垂直滚动功能（scroll-y="true"）。在
<scroll-view>内部，使用了<view>标签创建了一个文本容器，用于包含要显示的文本。在文本容器内部，使用了
<text>标签，其中的class属性为text2，并通过双花括号插值语法{{lizi}}将lizi变量的内容动态渲染到文本标签中。
通过以上设置，实现了在小程序页面上显示具有垂直滚动功能的文本内容，允许用户在录音文本内容过长时进行垂直滚动，文本内容由lizi变量动态提供
通过wx:if显示或隐藏<button>
<button wx:if="{{condition===1}}" disabled="{{btnstart}}" class="btn1" bindtap="start" hover-class="hoverstyle">开始录音</button>
<button wx:if="{{condition===2}}" class="btn1" bindtap="stop" hover-class="hoverstyle">停止录音</button>
<button wx:if="{{condition2===1}}" class="btn1" bindtap="play" disabled='{{btn3_disabled}}' hover-class="hoverstyle">播放录音</button>
<button class="btn1" wx:if="{{condition2===2}}" bindtap="replay" disabled='{{btn3_disabled}}' hover-class="hoverstyle">再次播放</button>
<button class="btn1" bindtap="stopplay" wx:if="{{condition3===2}}" disabled='{{btn3_disabled}}' hover-class="hoverstyle">停止播放</button>
data: {
// ...
condition: 1,
condition2: 1,
condition3: 1,
// ...
btnstart: false,
btn3_disabled: true,
// ...
},
// ...
start: function () {
// ...
this.setData({
condition: 2,
btn3_disabled: true
});
},
stop: function () {
// ...
this.setData({
condition: 1,
btn3_disabled: false,
condition2: 1
});
},
play: function () {
// ...
this.setData({
condition2: 3,
condition3: 2,
btnstart: true
});
},
replay() {
// ...
this.setData({
condition2: 3,
condition3: 2,
btnstart: true,
btn2_disabled: true,
btn_disabled: true
});
},
stopplay() {
// ...
this.setData({
btn_disabled: false,
btn2_disabled: false,
condition2: 2,
condition3: 1,
btnstart: false
});
},
// ...
小程序中使用了多个按钮，并且根据不同的状态变量来决定按钮的显示和可用性。以下是这些状态变量以及它们的含义：
condition：控制录音的状态，1表示可以开始录音，2表示正在录音中。condition2：控制录音播放的状态，1表示可以播放录音，2表示停止播放录音，3表示正在播放录音。condition3：控制录音停止播放的状态，1表示可以停止播放录音，2表示正在停止播放录音。btnstart：控制"开始录音"按钮的可用性，当录音进行中时，禁用该按钮。btn3_disabled：控制"播放录音"按钮的可用性，当录音未完成或播放录音时，禁用该按钮。
在不同的事件处理函数中，根据按钮的功能和状态，使用了
this.setData方法来更新相关的状态变量。例如，在start函数中，将condition设置为2，表示录音开始，将btn3_disabled设置为true，禁用"播放录音"按钮。在WXML中，使用了
wx:if条件渲染，根据condition、condition2和condition3的值来显示或隐藏不同的按钮。用户在不同的操作状态下只会看到与其相关的按钮，提高了界面的友好性和清晰度。通过合理控制按钮的显示和可用性，确保了用户在不同操作步骤下的界面反馈是一致的，同时防止用户在不合适的时间点击不相关的按钮。
页面跳转继承
onLoad: function (options) {
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
console.log(prevPage.options);
console.log(prevPage.route);
console.log(prevPage.data.name);
this.setData({
name: prevPage.data.name,
t: prevPage.data.t,
region: prevPage.data.region
});
console.log(this.data.name);
// ...
},
onLoad生命周期函数是小程序页面加载时会自动执行的函数，它接收一个参数options，用于接收上一个页面传递的参数。在这段代码中，首先通过
getCurrentPages()获取了当前页面栈的信息，将其保存在pages变量中。通过pages[pages.length - 2]获取了上一个页面的信息，存储在prevPage变量中。这样可以访问上一个页面的数据和路由信息。使用
console.log输出了上一个页面的参数信息，包括options、route和data.name等。这有助于在开发和调试过程中查看传递的参数和页面信息。使用
this.setData方法将上一个页面传递的数据（name、t、region等）初始化到当前页面的数据中，以便在页面中使用。通过
console.log(this.data.name)再次输出了当前页面的name数据，以确认数据已经成功初始化。
这段代码的主要作用是在页面加载时获取上一个页面传递的参数，并将这些参数初始化到当前页面的数据中，以便后续在页面中使用。这是在不同页面之间传递数据的常见做法。
音频录制与播放
start: function () {
wx.showToast({
title: '请开始发音',
icon: 'success',
duration: 3000
});
this.setData({
condition: 2,
btn3_disabled: true,
dh: true
});
this.recorderManager.start({
duration: 600000,
sampleRate: 16000, // 采样率，有效值 8000/16000/44100
numberOfChannels: 1, // 录音通道数，有效值 1/2
encodeBitRate: 96000, // 编码码率
format: 'mp3', // 音频格式，有效值 aac/mp3
frameSize: 50, // 指定帧大小
audioSource: 'auto' // 指定录音的音频输入源，可通过 wx.getAvailableAudioSources() 获取
});
this.setData({
btn_disabled: true,
btn2_disabled: true,
condition: 2,
condition2: 1,
condition3: 1
});
}
在
start函数中，首先使用wx.showToast方法向用户展示提示信息，提示用户开始录音操作。通过
setData方法，更新页面的状态和数据，包括将condition设置为2，表示录音开始；将btn3_disabled设置为true，禁用"播放录音"按钮；将dh设置为true，显示加载动画。使用
this.recorderManager.start方法启动录音操作，配置了一系列录音参数，包括录音时长、采样率、录音通道数、编码码率、音频格式等。这些参数决定了录音的质量和格式。再次使用
setData方法更新页面的状态，禁用了多个按钮，包括"开始录音"按钮、"停止录音"按钮、"播放录音"按钮，以及相应的状态变量。
play: function () {
wx.showToast({
title: '已开始播放，不需完全听完\n若有误请重新“开始录音”',
icon: 'none',
duration: 5000
});
innerAudioContext.autoplay = true;
innerAudioContext.src = this.data.tempFilePath;
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
this.setData({
condition2: 3,
condition3: 2,
btnstart: true
});
wx.cloud.uploadFile({
cloudPath: "方言语音收集/" + this.data.region[0] + "/" + this.data.region[1] + "/" + this.data.region[2] + "/" + this.data.t + "-" + this.data.region[2] + "-" + this.data.name + "/" + "1-" + this.data.name + '-' + this.data.region[2] + '-声调.mp3',
filePath: this.data.tempFilePath,
success: res => {
console.log('上传成功', res);
},
});
}
在
play函数中，使用wx.showToast方法向用户展示播放录音的提示信息，提醒用户不必完全听完录音，如果有问题可以重新开始录音。创建了音频播放实例
innerAudioContext，并设置自动播放为true，以便开始播放录音。通过
innerAudioContext.src属性设置音频文件的路径为this.data.tempFilePath，即录制的音频文件的临时路径。使用
innerAudioContext.onPlay方法监听音频开始播放事件，以便在播放开始时执行相应操作，这里使用console.log输出信息。使用
innerAudioContext.onError方法监听音频播放错误事件，以便在播放出错时进行处理。再次使用
setData方法更新页面的状态，将condition2设置为3，表示正在播放录音，将condition3设置为2，表示可以停止播放录音，同时将btnstart设置为true，用于禁用"开始录音"按钮。使用
wx.cloud.uploadFile方法将录音文件上传到云存储中，实现了录音文件的存储和备份。
发音人信息栏
以收集发音人常用方言这段代码示例，其余内容大同小异。
<view class="">发音人常用方言：</view>
<input name="fy1" type="text" confirm-type="done" placeholder="" />1. <view class="">发音人常用方言：</view>：这是一个`<view>`标签，用于在小程序页面中创建一个视图容器。在这个容器内部放置了文本内容"发音人常用方言："。`class`属性为空，表示没有为这个视图容器指定任何CSS类，所以它将采用默认的样式。
2. <input name="fy1" type="text" confirm-type="done" placeholder="" />：这是一个`<input>`标签，用于创建一个文本输入框。以下是各属性的解释：
name="fy1"：设置输入框的名称为"fy1"，这个名称通常用于标识和处理表单数据。
type="text"：指定输入框的类型为文本输入，允许用户输入文本信息。
confirm-type="done"：指定了用户完成输入后的操作。在这种情况下，当用户点击键盘上的"完成"按钮时，将触发相关事件。
placeholder=""：用于设置输入框的占位符文本，通常用于提示用户输入内容的预期格式或内容示例。在这里，占位符文本为空，所以不会显示任何占位符文本。