axios多個baseURL封裝+vite跨域代理多個baseURL連接
公共封裝 import axios from 'axios'; import { MessagePlugin } from 'tdesign-vue-next'; import { getStorageToken } from '@/utils/index'; const api1 = axios.create({ baseURL: '/api1' }); const api2 = axio
兔子先森 動態日志
動態
列表
vue3-onMounted和onActivated觸發問題
在Vue3中，當頁面第一次進入時，onMounted和onActivated這兩個生命週期鈎子都會觸發，導致初始化函數init()被執行兩次，我們希望只在初次進入時執行一次，而不是兩次。 其實最簡單的方法就是僅使用onActivated生命週期 如果同時使用兩個生命週期，就要在onMounted的時候做一個標記，然後在onActivated的時候改變這個標記 在keep
vue3路由跳轉，普通路由和動態路由
vue3路由跳轉分兩種： 1、普通路由 2、動態路由 普通路由 無需在路由配置中聲明，可以隨意添加任意參數 參數以鍵值對的形式出現在 URL 的 ? 之後，用 分隔 例如：/user?id=123name=John，其中 id=123 和 name=John 是 query 參數 參數是可選的非必填項，可以自由傳遞 跳轉方式 const router = useRoute
《vue.js設計與實現》——調度執行
調度性的定義：當我們執行trigger動作觸發副作用函數重新執行時，有能力決定副作用函數的時機、次數以及方式 控制執行時機 先來看看如何決定副作用函數的執行方式 const data = { foo: 1 } const obj = new Proxy(data, {}); // 為了演示，省略代理配置 effect(() = { console.log(obj.foo); }) obj.
《vue.js設計與實現》——計算屬性computed與lazy
在深入瞭解計算屬性之前，我們需要先知道懶執行的effect，也就是lazy的effect 我們現在實現的effect函數會立即執行傳遞給它的副作用函數，例如： effect( // 這個函數會立即執行 () = { console.log('執行了'); } ) 但有的時候我們不需要他立即執行，而是在需要的時候才執行，這個特性就跟計算屬性很像 我們可以在option
《vue.js設計與實現》——watch的實現原理
簡易watch監聽 watch其實就是監聽給定的響應式數據變化，當數據變化時執行的回調函數 watch(obj, () = { console.log("數據變化了"); }) // 修改obj數據，watch自動觸發 obj.foo++ 實際上，watch就是利用了effect以及options.scheduler選項 effect( () = { console
《vue.js設計與實現》——立即執行的 watch 與回調執行時機
watch的本質其實是對effect的二次封裝 watch的兩個特性： 1、立即執行的回調函數 2、回調函數的執行時機 立即執行的回調函數 在vue.js中，watch通過immediate屬性來實現立即執行，如下 watch(obj, () = { console.log('變化'); }, { immediate: true }) 當immediate存在並且為tr
《vue.js設計與實現》——過期的副作用
我們平時可能不太關注"競態"的問題，但是你在日常的工作中可能或多少遇到過"競態" let finalData; watch(obj, async () = { // 發送一個請求 let res = await fetch('/api/request'); // 將數據保存到finalData finalData = res; }) 這段代碼看起來沒問題，實際上會發
uniapp微信小程序請求麥克風授權
首先找到manifest.json文件，開啓微信小程序授權請求 "permission": { "scope.record": { "desc": "需要使用麥克風進行語音錄製" // 此處描述需符合微信規範 } } 然後通過uni.getSetting查詢麥克風授權狀態 麥克風的scope值為scope.record，如果已授權則直接返回，若
uniapp微信小程序長按功能
現在要實現一個按鈕長按的功能，大概有如下幾個要點： 1、長按按鈕，按鈕覆蓋整個輸入框 2、長按的過程中移動手指，判斷手指移動的位置是否在按鈕內 3、長按鬆開，按鈕還原 按鈕結構如下： view id="audio-full" :class="[ 'audio-full', isLongpress 'touch-longpress'
流式輸出-建立SSE連接-01
什麼是流式輸出 流式輸出，也稱為流式傳輸，指的是服務器持續地將數據推送到客户端，而不是一次性發送完畢。這種模式下，連接一旦建立，服務器就能實時地發送更新給客户端。 人話講就是跟接口建立連接，只要接口不斷開，服務器就能實時的把信息發送給前端，AI流式輸出中，接口每次返回一小段話，前端拿到後流式渲染即可。 有點類似websocket，但SSE是單向的 fetch-event-source
流式輸出-流式渲染-02
現在有很多框架實現了流式渲染，我在這裏例舉幾個： React框架 ● Ant-Design-X Vue框架 ● Element-Plus-X ● MateChat （PC/H5雙端兼容） H5移動端 ● ChatUI-React 這裏以MateChat框架做示例，MateChat是一個獨立的AI對話組件，不與其它UI框架關聯，可直接引入項目使用。 一般的流式渲染分兩種
一個手寫的vue3錄音組件，支持錄音波紋、外觀自定義調節
該組件有兼容問題，MAC上不可用，需注意，這裏僅用來做記錄，如需音頻功能，可使用Recorder.js，方案很成熟。 組件如下： template div class="container" ref="container" canvas id="visualizer" ref="canvas"/canvas /div /template script setup lang=
前端Audio常用API
1、實例化new AudioContext(); 2、AudioContext.decodeAudioData解析音頻 3、創建AudioBufferSourceNode接口source 4、給AudioBufferSourceNode接口提供Buffer用以播放：source.buffer = buffer 5、播放結束後開啓下一輪播放： source.onended =
前端recorder-core實時錄音並繪製波形，blob常規數據格式
npm：https://www.npmjs.com/package/recorder-core npm install recorder-core 這裏是常規錄音，每次結束後返回完整音頻blob，中間返回，並且結束後關閉音頻錄製並清空緩存 下面是一個vue3+ts+arco.design的案例，直接複製到項目中運行即可 template div class="snow-page"
前端H5錄音實時幀回調-波形配置- Recorder.js
在H5端我們必須使用canvas作為容器來顯示波紋效果，這在官網上有詳細説明 這裏我定義了一個waveConfig變量用作波形的配置，具體的參數下文寫的很詳細，需要注意一點，compatibleCanvas參數綁定的是canvas容器，而且得是在canvas掛載後才能綁定。 // 創建音頻可視化圖形繪製對象 waveConfig.compatibleCanvas = recw
PC瀏覽器端-PCM錄音+實時幀回調+流式上傳-Recorderjs
看到這裏的時候一定要理解並運行上文的《前端H5錄音實時幀回調-波形配置- Recorder.js》，這樣對Recorder有個概念。 1、通過onProcess回調可實現錄音的實時處理，onProcess的buffers參數內容為pcm數組（16位 LE小端模式 Little Endian），能直接流式的將數據進行上傳； 2、onProcess內的buffers參數為所有的PCM集合，
PC瀏覽器端-MP3錄音+實時幀回調+流式上傳-Recorderjs
看到這裏的時候一定要理解並運行上文的《前端recorder-core實時錄音並繪製波形，blob常規數據格式》，這樣對Recorder有個概念。 在創建錄音對象的時候有一個takeoffEncodeChunk回調，該回調為實時編碼環境，會接管編碼器輸出。 當編碼器實時編碼出一塊有效的二進制音頻數據時實時回調此方法，也就是説每次獲取到有效的二進制音頻數據takeoffEncodeChun
unaipp內使用pinia以及持久化緩存
vue3版本的uniapp內置pinia，無需額外引入，有了pinia後就不需要App.vue內的globalData了，pinia還是響應式的，更好、更強大 main.js內配置 import App from './App' // #ifndef VUE3 import Vue from 'vue' import './uni.promisify.adaptor' Vue.co
uniapp微信小程序AI對話SSE流式輸出
微信小程序版本，主要針對AI對話的流式輸出，這裏主要有兩個要點 **1、如何流式渲染 2、如何建立SSE連接** 我們先從看得見的渲染開始着手，能渲染出來後再建立SSE做流式輸出 流式渲染 這裏使用uniapp插件市場的：zero-markdown-view 插件市場搜索直接下載導入到項目裏就可以用了 頁面使用： zero-markdown-view :theme-c
uniapp自動滾動到底，上滑取消置底-錨點滾動
主要通過scroll-view組件來實現，比手動js獲取高度、判斷啥的更方便，而且官方支持 滾動到底 實現思路，通過錨點滾動實現，官方支持 view id="chat-main" scroll-view class="chat-main-inner" :lower-threshold="15" :scroll-into-view="targetId" scroll-y="t
uniapp微信小程序流式錄音-PCM
uniapp在微信小程序中使用Record.js 先安裝核心依賴 npm install recorder-core 然後插件市場下載插件 頁面結構，我們需要一個canvas元素來承載波形的繪製，canvas需要設置大小，下面的代碼可以直接複製使用 template view class="recorder-box" canvas type
VueZone-H5開發模板的一些常用功能
官網：https://vue-zone.github.io/docs/ github：https://github.com/vue-zone/vue3-vant-mobile 這是一個開源的vue3+vite的H5模板，多端設備兼容方式為 px - vw 和 rem 已接入過項目，親測好用，沒有過多配置，拉代碼啓動就能用了。 你可以把它當成一個已經搭好的架子，你只需要往裏面
uni.connectSocket與@microsoft/signalr連接
之前做web頁面的時候，前後端用的@microsoft/signalr庫做長連接，現在微信小程序不支持signalr庫的直接使用，uniapp微信小程序的websocket長連接只能用uni.connectSocket，所以我們要用uni.connectSocket實現與signalr庫的長連接。 頁面結構 view button @click="onLink"啓動連接/bu