博客 / 列表

兔子先森 - 項目啓動報錯node:events:485 的解決方法以及報錯問題排查思路

錯誤分析 1、報錯結果 Error: spawn E:\xxx\xxx\node_modules\.pnpm\esbuild@0.11.3\node_modules\esbuild\esbuild.exe ENOENT 路徑中明確顯示了 esbuild@0.11.3,這告訴我們系統試圖訪問的是這個特定版本。 2、spawnargs 參數中的版本信息 spawnargs: [ '--service

react , vue.js , vite , 前端 , html5

兔子先森 - Fetch+stream實現流式輸出

Fetch API 允許你跨網絡獲取資源,真正好的是,瀏覽器最近增加了將 fetch 響應作為可讀流使用的能力。 這是一個簡單明瞭的fetch+stream輸出的示例: try { // 定義手動停止接口 abortController.value = new AbortController(); // 發送請求 let response = await fetch(u

react , vue.js , HTML , 前端 , Javascript

兔子先森 - 前端兼容阿拉伯頁面佈局RTL

在做國際化項目中可能會碰到阿拉伯語,阿拉伯語的文字排列方式是從右向左的,所以我們要將整體的佈局做調整。 很多css樣式都要調整,比如:margin-right、text-align、right、padding-right等帶方向的,以及 文字的默認排列方式。 方法一:direction調整文字排列方向 css中有一個很有用的屬性:direction direction CSS 屬

react , vue.js , HTML , 前端 , Javascript

兔子先森 - 取消uni-tooltip組件點擊出現的藍色陰影

陰影如下: 在網上各種查找都沒找到答案,最後通過改源碼解決在源碼裏找到最外層的class名,新增tap-highlight-color: transparent;即可 .uni-tooltip { position: relative; cursor: pointer; display: inline-block; -webkit-tap-highlight-color:

react , vue.js , css3 , 前端 , Javascript

兔子先森 - uniapp網絡圖片資源動態引入

用法 首先去小程序後台添加網絡圖片資源的域名 然後在項目的utils文件夾下新建resource.js,在裏面寫入網絡圖片資源路徑,如下: import { ref } from "vue"; const base = 'https://xxx.xxx.com/test/image/' const path = ref({ logo: base + 'logo.png',

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp微信小程序文件下載-自定義文件名

在微信小程序端是無法直接下載文件的,對於docx、excel、pdf等文件都是通過臨時緩存+打開的方式保存到本地 默認下載 const openFile = (url,fileType) = { uni.downloadFile({ url: url, success: function (res) { let filePath =

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp自定義uni-easyinput樣式

官網示例: uni-forms-item uni-easyinput trim="all" v-model="form.address" placeholder="請輸入地址" / /uni-forms-item 自定義顏色 uni-forms-item uni-easyinput trim="all" primaryColor="#FCB334" v

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp自定義checkbox樣式以及checkbox的使用

自定義樣式 默認的樣式如下: checkbox-group @change="onChange" label checkbox class="round" value="cb" :checked="isCheckbox" style="transform: scale(0.6)" / text style="margin-left: -10rpx"這

react , vue.js , HTML , 前端 , Javascript

兔子先森 - vue3一個簡單好用的複製到剪貼板插件

npm: https://www.npmjs.com/package/vue-clipboard2 開始 npm i vue-clipboard2 在main.ts中引入 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 引入後就可以直接在頁面中使用了 script setu

vue.js , HTML , 前端 , html5 , Javascript

兔子先森 - 前端AI流式輸出深度思考<think>標籤分割

假如我們有這麼一段ai回覆的內容 let text = "think\n好的,用户想了解如何判斷手機攝像頭是否是湊數的,希望我用直白易懂的語言來解釋。這個問題需要從實用角度出發,幫助用户識別那些功能冗餘或性能低下的攝像頭。\n我看到的搜索結果提供了很多有價值的信息。根據,湊數攝像頭通常是指那些功能可以被其他攝像頭或算法替代的鏡頭,比如低像素的景深或微距鏡頭。進一步解釋瞭如何通過反證法來判斷:如果去

react , vue.js , HTML , 前端 , Javascript

兔子先森 - 企業微信關聯微信小程序

綁定 入口:企業微信管理後台 需要企業微信管理員賬號登錄 1、進入企業微信管理後台,找到應用管理,創建應用 2、選擇已有的小程序創建 3、此時會跳轉到公眾平台授權登錄,需要小程序管理員掃碼登錄 4、登錄完成後會彈出一個界面,該界面就是關聯的小程序界面,在該界面選擇可見範圍:部門/成員 之後點擊創建即可 5、創建之後就可以在工作台看

react , vue.js , HTML , 前端 , Javascript

兔子先森 - js精準的時間處理成範圍時間

例如:3小時,處理為 2~3.5小時 遇到範圍時間(2~3.5小時)則不處理,僅處理精準時間 並且可以多次處理,適用與流式對話以及普通文本處理 /** * 精準的時間處理成範圍時間,規則:下限 = 原數 - 1,上限 = 原數 + 0.5 * @param text 文本 * @returns 處理後的文本 */ export const processHoursText =

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp微信小程序分包異步化,跨包組件引入

微信小程序中,不同的分包對應不同的下載單元;因此,除了非獨立分包可以依賴主包外,分包之間不能互相使用自定義組件或進行 require。「分包異步化」特性將允許通過一些配置和新的接口,使部分跨分包的內容可以等待下載後異步使用,從而一定程度上解決這個限制。 口述表達就是,如果想要在一個分包內使用另一個分包的組件或資源,可以通過分包異步化實現。 通過分包異步化,可以節省包大小,當你的主包或子包的大

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp微信小程序登錄以及獲取手機號

登錄流程如下 登錄,wx.login拿到code,調用後端接口 後端通過appId、appsecret、code獲取session_key和openid 後端自定義登錄態,與openid、sessiong_key關聯,返回自定義登錄態給前端 前端拿到登錄態(token),後續拿token請求接口即可。 登錄的同時要加手機號驗證,流程如下: 前端點擊一鍵登錄按鈕,按鈕綁定open-

react , vue.js , HTML , 前端 , Javascript

兔子先森 - vue3使用mitt事件管理

註冊mitt main.ts註冊 import { createApp } from 'vue'; import App from './App.vue'; // 導入mitt import mitt from 'mitt'; const app = createApp(App); app.config.globalProperties.$mitt = mitt(); app.mount('

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp微信小程序分包以及分包優化

分包限制説明 微信小程序上傳項目時會有分包大小限制,官方文檔介紹: 目前小程序分包大小有以下限制: 整個小程序所有分包大小不超過 30M(服務商代開發的小程序不超過 20M) 單個分包/主包大小不能超過 2M 主包就是Tabbar頁面,所有的Tabbar頁面加起來的文件大小不能超過2M 在小程序啓動時,默認會下載主包並啓動主包內頁面,當用户進入分包內某個頁面時,客户端會把對應分

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp獲取微信小程序頂部NavBar的信息

我在這裏封裝了一個類,可以直接使用 export default class NavBarInfo { constructor() { this.statusBarHeight = 0; //狀態欄的高度 this.navigatorHeight = 0; //導航欄高度 this.menuHeight = 0; //膠囊高度

react , vue.js , HTML , 前端 , Javascript

兔子先森 - 微信AI小程序認證基本流程:認證、完善類目、微信認證

認證類型 認證層面的: 1、申請小程序賬號 2、完善小程序基本信息 名稱 簡介 頭像 介紹 3、完善類目 4、微信認證,認證需要公司主體信息、300塊錢認證費 可能你在開發中還無需微信認證這一步,但上架是需要的,到這裏基本的認證就結束了,然後是開發層面的。 開發層面的: 1、服務器域名配置,如果沒有配置則體驗版本接口無法調用,線上版同理

react , vue.js , HTML , 前端 , Javascript

兔子先森 - 微信小程序用户隱私保護指引設置

協議完善 我們在小程序開發過程中或多或少會使用帶用户隱私API,比如獲取用户頭像、暱稱,用户手機號等等,這些API必須完善用户隱私指引才能正常調用,否者正式版本使用會報錯或者無法過審。 僅有在指引中聲明所處理的用户信息,才可以調用平台提供的對應接口或組件。若未聲明,對應接口或組件將直接禁用 完善的入口如下: 根據實際情況,勾選對應的選項,勾選完後進入界面完

react , vue.js , HTML , 前端 , Javascript

兔子先森 - uniapp微信小程序pinia持久化緩存

HBuilder X自帶pinia,無需我們手動安裝。 我們通過pinia-plugin-persistedstate插件來實現pinia的持久化緩存 npm i pinia-plugin-persistedstate 本身 pinia-plugin-persistedstate 是不支持 uniapp 的,但是 pinia-plugin-persistedstate 提供了修改 s

react , vue.js , HTML , 前端 , Javascript

兔子先森 - vue3前端pdf直接預覽

安裝依賴 npm i vue-pdf-embed 頁面結構 vue-pdf-embed :source="state.source" :style="scaleFun" :page="state.pageNum" @rendered="pdfRendered" @rendering-failed="pdfRendered" / 使用 script setup lang="t

react , vue.js , typescript , 前端 , Javascript

兔子先森 - uniapp文件下載,支持docx、pdf等通用office格式

可以預覽並下載如下格式:doc, xls, ppt, pdf, docx, xlsx, pptx 其實過程很簡單,可以實現預覽和下載兩個功能 1、拿到一個可以下載的url連接 2、uni.downloadFile獲取文件的臨時路徑 3、uni.openDocument打開文件,進入打開文件的界面後就可以另存為了 let url = `https://test//fi

react , vue.js , HTML , 前端 , Javascript

兔子先森 - 移動端emoji輸入組件

主要流程 前端emoji組件一般用在聊天輸入界面,點擊表情,整個輸入框被彈起,顯示emoji界面,點擊其它位置,emoji界面自動關閉,這其中有一些注意點: 1、點擊emoji,emoji界面從底部彈起,輸入框也要同步顯示 2、二次點擊emoji圖標,emoji界面關閉(你也可以切換鍵盤輸入) 3、點擊輸入框,鍵盤彈起,emoji界面關閉 4、點擊emoji界面的其它位置(

react , vue.js , HTML , 前端 , Javascript

兔子先森 - axios雙Token無痛刷新,解決隊列請求、歷史請求問題

雙token無痛刷新機制主要是由一個accessToken和一個refreshToken實現的,請求接口的時候使用accessToken,一旦accessToken過期,立刻用refreshToken請求刷新token接口,拿到accessToken、refreshToken存起來,然後使用accessToken請求接口。 這其中有幾個點需要注意: 當前過期的token如何處理? 過期

react , vue.js , HTML , 前端 , Javascript