uniapp文件下載，支持docx、pdf等通用office格式
可以預覽並下載如下格式：doc, xls, ppt, pdf, docx, xlsx, pptx 其實過程很簡單，可以實現預覽和下載兩個功能 1、拿到一個可以下載的url連接 2、uni.downloadFile獲取文件的臨時路徑 3、uni.openDocument打開文件，進入打開文件的界面後就可以另存為了 let url = `https://test//fi
兔子先森 Blog
Stories
List
移動端emoji輸入組件
主要流程 前端emoji組件一般用在聊天輸入界面，點擊表情，整個輸入框被彈起，顯示emoji界面，點擊其它位置，emoji界面自動關閉，這其中有一些注意點： 1、點擊emoji，emoji界面從底部彈起，輸入框也要同步顯示 2、二次點擊emoji圖標，emoji界面關閉(你也可以切換鍵盤輸入) 3、點擊輸入框，鍵盤彈起，emoji界面關閉 4、點擊emoji界面的其它位置（
axios雙Token無痛刷新，解決隊列請求、歷史請求問題
雙token無痛刷新機制主要是由一個accessToken和一個refreshToken實現的，請求接口的時候使用accessToken，一旦accessToken過期，立刻用refreshToken請求刷新token接口，拿到accessToken、refreshToken存起來，然後使用accessToken請求接口。 這其中有幾個點需要注意： 當前過期的token如何處理？ 過期
css滾動條不佔位-鼠標移入顯示，移出隱藏
鼠標移入顯示滾動條，移出隱藏 css滾動條一般是會佔位的 .container { overflow: hidden auto; ::-webkit-scrollbar { width: 0px; /* 控制滾動條整體寬度 */ } :hover { ::-webkit-scrollbar { width: 6px; /* 控制滾動條
uniapp微信小程序圖片上傳-預覽-刪除
貼幾個可在線訪問的圖片數據，圖片數據最好包含id、url、loading、success的狀態 分別對應： id === key url === url loading === 上傳中 success === 上傳成功的狀態 const imgList = ref([ { id:1, url: 'https://fastly.jsdelivr.net/npm/@van
原生electron起步-從零到一完成構建和打包
官網：https://www.electronjs.org/zh/ 安裝依賴 初始化package.json pnpm init 安裝依賴 pnpm add -D electron 安裝報錯解決方案：https://blog.csdn.net/qq_38463737/article/details/140277803 1、打開npm的配置文件 # cmd 運行打開配置文件 npm confi
electron-builder打包配置説明
我們一般使用electron-builder對electron項目進行打包，在package.json中配置打包的詳細操作 pnpm install electron-builder -D package.json中的詳細字段解釋： "build": { "appId": "your.id", // 應用的唯一ID "productName": "YourProductName"
vue項目打包electron-將已有web項目打包為桌面端
當你需要將一個vue項目打包成electron時，只需要正常的安裝electron依賴、electron-builder依賴，正常的配置好主進程、預加載腳本、渲染進程即可。 依賴安裝 這裏默認你已經寫好了一個vue項目，腳手架為vite，然後需要打包成electron。 安裝electron pnpm add -D electron 安裝electron打包依賴 pnpm install e
electron打包報錯-image格式問題(.ico報錯)
這種報錯是ico資源文件出錯導致的，可以看看gitHub對此問題的解釋：https://github.com/electron-userland/electron-builder/issues/3889 上圖中打包的logo.ico資源文件格式不對，看起來資源文件後綴是.ico實際上是png格式，你有可能是在一些網站將png轉換為ico，它沒有被正常的轉換為ico，只是將資源文件的後
electron打包報錯errorOut=ERROR: Cannot create symbolic link
這種打包報錯實際上是缺少對應文件，由於electron在打包時會下載資源，有些資源需要科學上網，所以正常打包網速過慢會導致資源丟失。 像上圖報錯，很明顯是丟失winCodeSign-2.6.0資源，所以我們需要去下載對應資源 資源下載鏈接：https://github.com/electron-userland/electron-builder-binaries/release
微信小程序獲取和修改用户頭像信息
這裏主要用到button的open-type功能，官網已有説明： 給button設置open-type="chooseAvatar"，來使bindchooseavatar方法生效，在bindchooseavatar指定的函數中獲取用户的頭像信息 button open-type="chooseAvatar" bindchooseavatar="chooseavatar"/b
動態tabbar後的tabbar高度獲取
用於做底部懸浮定位，懸浮在tabbar上 在設置tabbar的組件中獲取，利用組件生命週期，獲取tabbar高度，將高度存到本地，用於全局獲取 attached() { let query = wx.createSelectorQuery().in(this); query.select('.custom-tab-bar').bound
原生微信小程序響應式數據
原生微信小程序提供兩種響應式數據處理方式 1、module:value="{{ xxx }}" 2、setData module:value 第一種方式為簡易雙向綁定，這種雙向綁定只能對應data中的簡單數據類型，例如：string、number、boolean、null，例如： data: { keyword: '' // data中直接定義 }, 頁面用module:va
css元素高度佔滿餘下空間
div class="box" div class="box1"/div div class="box2" div style="height: 500px;border: 1px solid gold;" /div /div /div 在css中，div的寬度默認獨佔一行，而高度需要手動設置。 上面的佈局，box 高度 300 box1的高度未
解決移動端設備hover樣式不消失問題
下面是一段scss示例： .btn-text { border: 1px solid #cfd5de; transition: all 0.3s; @media (hover: hover) { :hover { color: #006eff; border-color: #006eff; } } :active { col
前端頁面單詞、網址溢出換行
效果： 在css中，對文字可以使用：flex-wrap: wrap; 來實現文字溢出換行。 但如果文字是英文、網址，該屬性則無效。 我們需要對英文、網址進行斷字，然後使其換行，下面是mdn的解釋： .company_detail_webaddress{ max-width: 55%; margin-right: 10rpx;
《vue.js設計與實現》——嵌套的 effect 與 effect 棧
effect 是可以發生嵌套的 vue.js的下渲染函數其實就是在一個effect中執行的 當組件發生嵌套時，例如Foo組件渲染了Bar組件 // Bar組件 const Bar = { render() { } } // Foo組件嵌套渲染了Bar組件 const Foo = { render() { return Bar / } } 此時就發
前端wavesurfer.js錄音+波形功能
vue3項目，主要通過wavesurfer.js實現前端錄音+實時波形渲染 template div class="audio-container" @click="onStop" div class="flex-between audio-box" v-if="!transform" div你可以開始説話/div div class="audio" id="w
uniapp一個透明佔位的nav-bar組件
該組件是一個透明佔位的頭部nav-bar組件，組件的大小位於最頂部一直到膠囊底部的位置，如下： 內部提供一個插槽，這個插槽的高度跟膠囊的高度一致，你可以自定義一些按鈕，跟膠囊對齊 template view :style="{ height: navBar.totalHeight + 'px', back
vue3基於vant封裝loading組件
觸底加載的方式 長列表需要觸底加載，觸底顯示loading，加載後loading小時 若長列表為空，則顯示空狀態 加載到底，沒有更多分頁，則顯示“沒有更多了” 這裏我基於vant封裝了一個組件，可直接使用 script setup lang='ts' const props = defineProps({ text: { type: String,
vue3封裝一個頁面級的滾動條觸底加載函數
主要參數： ● loading 是否加載中 ● hasMore 是否有更多，根據分頁總數跟total判斷 ● pageInfo 分頁參數信息{ pageNo: number, pageSize: number, total: number } ● loadMore 加載列表的函數，比如getList，該函數是一個async的Promise函數 ● threshold
vue3封裝一個容器級的滾頂條觸底加載函數
代碼可直接複製使用，主要用於頁面容器內的滾動觸底加載 主要參數： ● element 滾動容器dom ● loading 是否加載中 ● hasMore 是否有更多，根據分頁總數跟total判斷 ● pageInfo 分頁參數信息{ pageNo: number, pageSize: number, total: number } ● loadMore 加載列表
js根據傳入的時間字符串按照格式轉換並返回
/** * 根據傳入的時間字符串按照格式轉換並返回 * @param { string } dateString 傳入的時間字符串 * @param { string } format 需要轉換的格式 * @param { object } options 配置項 * @returns { string } 轉換後的時間 */ function formatDate(dateStrin
vite全局自動導入函數，全局函數
globalProperties全局函數掛載 在vue3項目中，一般使用globalProperties實現全局函數掛載 import { createApp } from "vue"; import "@/style.css"; import App from "@/App.vue"; const app = createApp(App); // 這裏掛載 app.config.globa