效果展示
注意：引入同聲傳譯組件請看這篇文章
1.search.wxml
<view class="search-page"><navigation-bar title="搜索" color="#000" background="#fff" bind:back="onNavigationBack"></navigation-bar><view class="search-bar"><input class="search-input" value="{{keyword}}" placeholder="請輸入搜索名稱" focus="{{true}}" bindinput="onInput" /><image wx:if="{{!isPressed}}" src="點擊前的圖標狀態" class="search-icon" style="width: 50rpx;height: 50rpx;" bindtap="onMicTap"/><image wx:else src="點擊后的圖標狀態" style="width: 40rpx;height: 40rpx;" bindtap="closeOnMicTap" class="search-icon" /></view><!-- 搜索結果區域 --><!-- <view class="search-result-placeholder" wx:if="{{productList.length==0}}">暫無數據</view> --><!-- 列表 --><view class="product-list" style="padding-bottom:230rpx;"><view class="product-card" wx:for="{{productList}}" wx:key="title" bind:tap="onsubCategoriesItemTap" data-type="{{item.type}}" data-id="{{item.id}}"><image class="product-img" src="{{item.image}}" mode="aspectFit"></image><view class="product-info"><view class="product-title">{{item.productName}}</view><image class="product-tag" src="{{item.label}}" mode="widthFix"></image><view class="product-desc">{{item.productInfo}}</view></view></view></view>
</view> ```
1.search.ts```javascript
import { get, post } from '../../api/request';
//import { share } from '../../utils/util';
//引入插件：微信同聲傳譯
const plugin = requirePlugin('WechatSI');
//獲取全局唯一的語音識別管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
// const shareData = wx.getStorageSync("shareData")
Page({data: {resultStr:null,keyword:"",//搜索詞msgText: 1, //1默認初始化 2對話進行中 3結束對話 4對話出現問題// recordState: false, //麥克風默認關閉狀態isFlag: false, //是否點擊錄音到獲取結果之間狀態islongPress: false, //是否長按isPressed: false,normalIcon: 'microphone.png', // 正常狀態圖標路徑pressedIcon: 'prohibit.png', // 按下狀態圖標路徑isplay: true,haveflag: false, //防止重復點擊// keyword: '',currentTab: 0, // 0:產品科普 1:科普圖文productList: [],},onLoad(){//識別語音this.initRecord();},cleanup() {if (manager) {// 停止錄音并移除所有監聽manager.stop();manager.onStart(null);manager.onStop(null);manager.onError(null);// manager = null;console.log('錄音管理器已銷毀');// 顯示Toast（3秒后自動關閉）this.setData({isPressed:false,islongPress:false,isFlag:false,msgText:1,keyword:"",resultStr:null,isplay:true,haveflag:false})}},//語音 點擊說話onMicTap() {// 判斷是否獲取錄音權限// console.log("是否關閉語音",this.data.haveflag)if (this.data.haveflag) { //true 請先結束語音wx.showToast({title: '請先關閉語音！',icon: 'none',duration: 2000})return false}// 當前正在識別語音，還沒結束上一次識別，請先關閉再進行錄音if (this.data.isFlag) { //true 請先結束語音wx.showToast({title: '請先關閉語音！',icon: 'none',duration: 2000})return false}this.setData({islongPress: true,isplay: true})// var flag = Number(e.currentTarget.dataset.flag);this.setData({// recordState: true, //錄音狀態// flag: true,// touchstart: true, //按下isPressed:true,msgText: 2, //初始化狀態})// 語音開始識別manager.start({lang: 'zh_CN', // 識別的語言})},//語音 --點擊結束closeOnMicTap() {if (!(this.data.islongPress)) { //如果是長按執行下面內容return false}wx.showLoading({title: '正在思考...',icon: 'none',})if (this.data.haveflag) { //true 請先結束語音wx.hideLoading();// wx.showToast({// title: '請先關閉語音111！',// icon: 'none',// duration: 2000// })return false}this.setData({// touchstart: false,isPressed:false,// recordState: false,islongPress: false, //長按初始狀態isFlag: true, //判斷從松手到識別錄音期間狀態haveflag: true})// 語音結束識別manager.stop();},//識別語音 -- 初始化initRecord() {const that = this;// 有新的識別內容返回，則會調用此事件manager.onRecognize = function (res:any) {console.log("有新的識別內容返回，則會調用此事件")}// 正常開始錄音識別時會調用此事件manager.onStart = function (res:any) {console.log("成功開始錄音識別", res)that.setData({// annimationFlag:true})}//識別結束事件manager.onStop = function (res:any) {that.setData({resultStr:res})if(!res){//證明可能已經銷毀return false}if (!that.data.isplay) {wx.showToast({title: "請說話",icon: 'none',// image: 'no_voice.png',duration: 1000,success: function (res) {that.setData({haveflag: false,})},fail: function (res) {console.log(res);}});return false}// console.log("過來？？？？")if (res.result == '') {wx.hideLoading();// wx.showToast({// title: '聽不清楚，請重新說一遍！',// icon: 'none',// duration: 2000// })that.showRecordEmptyTip()return;} else {that.setData({keyword: res.result,msgText: 2, //正在對話// resultobj: {// result: res.result,// annimationFlag: true// }})// console.log("調用·接口",that.data.keyword)// 調用接口that.onSearch();}}// 識別錯誤事件manager.onError = function (res:any) {console.log("error msg", res);if(!res){return false}wx.hideLoading();// wx.showToast({// icon: "none",// title: '請重新開始~'// })that.setData({haveflag: false,msgText: 1,isPressed:false,// annimationFlag: false,isFlag: false, //當前錄制語音識別狀態})}},showRecordEmptyTip: function () {this.setData({msgText: 1, //初始化haveflag: false,isFlag: false,})if(!this.data.resultStr){return false}// console.log("進來了，啊",this.data.resultStr)wx.showToast({title: "請說話",icon: 'none',// image: 'no_voice.png',duration: 1000,success: function (res) {},fail: function (res) {console.log(res);}});},// 根據wx.getSetting判斷用戶是否打開了錄音權限，如果沒有打開，則通過wx.authorize,向用戶打開授權請求，如果用戶拒絕了，就給用戶打開授權設置頁面。getSeeting(type:any) {// wx.showLoading({// title: '獲取錄音權限',// icon: 'none',// mask: true// })const _this = thiswx.getSetting({ //獲取用戶當前設置success: res => {// wx.hideLoading();// console.log('獲取權限', res);if (res.authSetting['scope.record']) { //查看是否授權了錄音設置// console.log('獲取權限1111');const authset = wx.setStorageSync('AUTHSETTING', true);_this.setData({authsetting: true})if (type == 2) {wx.showToast({title: '獲取錄音權限成功，點擊重新開始！',icon: 'none',duration: 2000})}} else {// 用戶還沒有授權，向 用戶發起授權請求wx.authorize({ //提前向用戶發起授權請求,調用后會立刻彈窗詢問用戶是否同意授權小程序使用某項功能或獲取用戶的某些數據，但不會實際調用對應接口scope: 'scope.record',success() { //用戶同意授權攝像頭// console.log("同意授權");// wx.showToast({// title: '獲取錄音權限成功',// icon: 'none',// duration: 2000// })},fail() { //用戶不同意授權攝像頭_this.openSetting()}})}},fail() {// console.log('獲取用戶授權信息失敗');wx.showToast({title: '獲取權限失敗',icon: 'none',duration: 2000})}})},openSetting() {wx.openSetting({success(res) {console.log(res);if (res.authSetting['scope.record']) {console.log('用戶已經同意錄音權限');// 在這里可以再次執行錄音操作或者其他邏輯} else {console.log('用戶依然拒絕錄音權限');// 可以提示用戶繼續操作的限制或者做其他處理}},fail() {console.log('打開設置頁面失敗');},});},onNavigationBack(e:any) {console.log('返回按鈕被點擊',e);this.cleanup();// 執行自定義邏輯wx.navigateBack({delta: e.detail})},//==========================================================================onInput(e:any) {this.setData({ keyword: e.detail.value });if(e.detail.value){this.onSearch()}else{this.setData({productList:[]})}// console.log("拿到值",this.data.keyword)},onSearch() {// TODO: 搜索邏輯let cleanedText =this.data.keyword;if(cleanedText){cleanedText = cleanedText.replace(/[.,\/#!?;:，。、；：？！]/g, '');}get(`product/search`, {productKeyword:cleanedText}, { intercept: true }).then((res: any) => {wx.hideLoading();// 語音重置if(this.data.isplay){this.setData({isFlag: false,msgText: 1,haveflag:false})}console.log("沒有分頁",res);this.setData({productList: res.content,})})},// 產品列表點擊onsubCategoriesItemTap(e: any) {wx.navigateTo({ url: `/pages/product-detail/product-detail?id=${e.currentTarget.dataset.id}` });},
});
3.search.wxss
.search-page { width: 100%; min-height: 100vh; }
.search-bar { display: flex; align-items: center; background: #fff; border-radius: 30rpx; padding: 16rpx 24rpx; box-shadow: 0 2rpx 8rpx #f5e9c7; }
.search-input { flex: 1; border: none; background: transparent; font-size: 28rpx; color: #222; outline: none; }
.search-icon { width: 36rpx; height: 36rpx; margin-left: 16rpx; }
.search-result-placeholder { height: 400rpx; background: #f5f5f5; border-radius: 20rpx; margin-top: 40rpx; text-align: center; line-height: 400rpx; color: #bbb; }
/* 搜索列表展示 */
.product-list { margin: 30rpx 10px; padding-bottom: 100rpx; }
.product-card { display: flex; align-items:center; border-top: 3px solid #fff; border-radius: 20rpx;/* margin-bottom: 32rpx; */padding: 24rpx 32rpx; background: #FAF6E4; }
.product-img { width: 160rpx; height: 160rpx; border-radius: 12rpx; margin-right: 32rpx; background: #fff; padding: 20rpx 10rpx; }
.product-info { flex: 1;display: flex;flex-direction: column;justify-content: center; }
.product-title { font-size: 36rpx; font-weight: bold; color: #222; margin-bottom: 12rpx; }
.product-tag { display: inline-block; width: 110rpx; margin-top: -5rpx; }
.product-desc { font-size: 20rpx; color: #222; line-height: 1.6; word-break: break-all; margin-top: 10rpx;}```
4.search.json```javascript
{"navigationBarTitleText": "搜索","navigationStyle": "custom"
} ```
)
