1.window api
- window.atob() 用于解碼使用 base-64 編碼的字符串
- window.btoa() 用于創(chuàng)建一個(gè) base-64 編碼的字符串翘地。該方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符來編碼字符串。
2.mate http-equiv
- http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"
讓瀏覽器把一個(gè)網(wǎng)站所有的不安全 URL（通過 HTTP 訪問）當(dāng)做已經(jīng)被安全的 URL 鏈接（通過 HTTPS 訪問）替代债朵。這個(gè)指令是為了哪些有量大不安全的傳統(tǒng) URL 需要被重寫時(shí)候準(zhǔn)備的子眶。
- 詳情參考MDN
3.滾動(dòng)到指定位置
在vue項(xiàng)目中可以使用下面的方法
this.$refs[name].scrollIntoView()
4. ifram播放視頻有黑邊問題
需要將ifram的高度設(shè)置為寬度的52.5%，視頻才不會(huì)有黑邊
5.圖片鏈接加一個(gè)隨機(jī)數(shù)可以解決都緩存問題
6.小程序圖片高度不能自適應(yīng)問題
在image標(biāo)簽添加 mode="widthFix"
<image class="explain__imgText" src="圖片地址" alt="" mode="widthFix" />
7. 阻止ios活動(dòng)回彈
13ad8463af71294d00e4a0c07de1fb2.png
51d9f86f035ea095314b19368cce7a6.png
9. nuxt代理請(qǐng)求https問題
- 'UNABLE_TO_VERIFY_LEAF_SIGNATURE '
出現(xiàn)這個(gè)報(bào)錯(cuò)說明https證書配置有問題序芦，找后端處理
- 'UNABLE_TO_VERIFY_LEAF_SIGNATURE '
10. cookie問題
cookie同一個(gè)字段臭杰，但path不相同在控制臺(tái)看到的會(huì)是兩個(gè)字段。如下
document.cookie = "name=張三; path=/;"
document.cookie = "name=張三"
微信圖片_20220712151721.png
這種情況下谚中，如果要?jiǎng)h除cookie渴杆，需要把對(duì)應(yīng)的path也一起設(shè)置。
11.媒體查詢
max 與min的區(qū)別
/* min-height 表示高度大于等于500px時(shí)宪塔，顯示紅色 */
@media screen and (min-height: 500px) {
.child {
background-color: red;
}
}
/* max-height 表示 高度 >= 0px && 高度 <= 499px時(shí)磁奖，顯示綠色 */
@media screen and (max-height: 499px) {
.child {
background-color: green;
}
}
12. postMessage的一些理解
- A頁(yè)面調(diào)用B頁(yè)面的postMessage方法，給B頁(yè)面發(fā)送消息某筐。反過來比搭，B頁(yè)面給A頁(yè)面，則需要在B頁(yè)面調(diào)用A頁(yè)面的postMessage方法
13. 關(guān)于Date對(duì)象在 IOS上獲取時(shí)間戳的兼容性問題
// 這種方式在IOS上無法獲取時(shí)間戳 返回一個(gè)NaN
+new Date('2022.8.29 18:00') // NaN
IOS上需要換成斜杠格式
new Date('2023/3/27 14:00')
14. http-proxy代理配置問題
多個(gè)代理需要明確使用^開頭南誊，否則會(huì)默認(rèn)匹配身诺。
例如'/api' 蜜托、 '/test-api'，如果不用開頭匹配規(guī)則霉赡，'/test-api'將會(huì)被'/api'代理
// 錯(cuò)誤的寫法
"proxy": {
"/api": {
"target": "http://localhost:8080",
"changeOrigin": true
},
"/test-api": {
"pathRewrite": { "^/test-api": "" },
"target": "https://s-api.teefactech.com",
"changeOrigin": true,
"logLevel": "debug"
}
}
// 正確的寫法
"proxy": {
"^/api": {
"target": "http://localhost:8080",
"changeOrigin": true
},
"^/test-api": {
"pathRewrite": { "^/test-api": "" },
"target": "https://s-api.teefactech.com",
"changeOrigin": true,
"logLevel": "debug"
}
}
15. vite項(xiàng)目開啟https后無法訪問問題
安裝官方推薦的插件 @vitejs/plugin-basic-ssl
npm i -D @vitejs/plugin-basic-ssl
// vite.config.js
import { defineConfig } from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
export default defineConfig({
plugins: [basicSsl()]
})
16. html2canvas生成圖片空白與清晰度問題
- 空白問題橄务，width不可以超出窗口寬度。
- 如果想要生成分辨率比較高的圖片穴亏，可以將windowWidth設(shè)置大一點(diǎn)蜂挪，然后再將scale設(shè)置大一點(diǎn)
17. 清空service worker緩存的方法
微信截圖_20230616091448.png
18. uni-app開發(fā)小程序，input輸入框v-model真機(jī)調(diào)試無法輸入問題
可以嘗試將真機(jī)調(diào)試在1.0嗓化、 2.0版本之間切換
19. vue-cli打包時(shí)添加版本號(hào)
// vue.config.js
const pages = {
index: {
// page 的入口
entry: 'src/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 在這個(gè)頁(yè)面中包含的塊棠涮，默認(rèn)情況下會(huì)包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
// 添加一個(gè)meta標(biāo)簽蟆湖，添加版本屬性
meta: { revised: `項(xiàng)目:v1.0.0` }
}
}
module.exports = {
pages
}
20. js中引入scss export變量為空對(duì)象的解決辦法
將var.scss 改為 var.module.scss
21. uni-app 中使用qs包的問題
微信小程序只支持"qs": "^5.0.0",
22. uniapp項(xiàng)目中故爵，魅族手機(jī)video標(biāo)簽浮動(dòng)錯(cuò)亂的BUG解決方案
<view class="video-wrapper">
<video class="video" src="http://example.com/test.video"></video>
</view>
<style>
.video-wrapper {
display: flex;
flex-direction: column;
.video {
width: 686rpx;
height: 338rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
-webkit-box-pack:center;
-webkit-box-align:center;
box-pack:center;
box-align:center;
display:-webkit-box;
display:box;
}
}
</style>
23 uniapp項(xiàng)目中，IOS鍵盤不會(huì)自動(dòng)彈起的解決方案隅津。
動(dòng)態(tài)改變input 的 focus 屬性诬垂，代碼如下：
<template>
<input :focus="isFocus"/>
</template>
<script>
export default {
data() {
return {
isFocus: false
}
},
onShow() {
this.$nextTick(() => {
this.isFoucs = true
})
},
onHide() {
this.isFoucs = false
}
}
</script>
24 uniapp中使用vue-tinymce插件，在ios中的兼容問題
- ios軟件盤彈起后伦仍，選擇預(yù)設(shè)候選字不會(huì)觸發(fā)tiymce的change结窘，因此placholder不會(huì)自動(dòng)隱藏，但文字是正常輸入的充蓝。
解決辦法：監(jiān)聽content字段的變化利用tiymce的insertContent方法配合異步隧枫，清除placeholder
'form.content.text': {
handler(val, old) {
if (old === '' && val) {
// 觸發(fā)insertContent事件可隱藏placeholder，目的是兼容蘋果手機(jī) placeholder 不會(huì)自動(dòng)隱藏的的情況
setTimeout(() => {
this.editorCtx.insertContent('');
});
}
}
}
- 在ios中失去焦點(diǎn)后tinymce的光標(biāo)會(huì)默認(rèn)回到首位谓苟，這樣會(huì)導(dǎo)致官脓，通過insertContent插入內(nèi)容位置不正確。
解決辦法涝焙，分別在下面的時(shí)機(jī)獲取光標(biāo)位置卑笨，在使用insertContent前設(shè)置光標(biāo)位置
- 監(jiān)聽內(nèi)容變化時(shí)獲取。原因仑撞，ios鍵盤選擇聯(lián)想字不會(huì)觸發(fā)tinymce的change事件赤兴。
- 在tiymce的click、focus隧哮、keyup事件觸發(fā)時(shí)獲取桶良，原因，移動(dòng)光標(biāo)不會(huì)記錄光標(biāo)位置沮翔，這樣就無法在目標(biāo)位置insertContent
- 在tinymce的change事件中獲取陨帆，原因，收起鍵盤不會(huì)觸發(fā)blur事件，但是會(huì)觸發(fā)change歧譬，目的是代替blur時(shí)獲取光標(biāo)位置岸浑。
25 vue-cli5 中 使用 webpack5 module-federation 模塊聯(lián)邦注意事項(xiàng)
- 入口文件需要在寫在src/index.js （提供方和使用方都需要這樣寫）
// 提供方exposes/src/index.js
// 通過 import 將 main 引入
import('./main)
// 使用方general/src/index.js
// 通過 import 將 main 引入
import('./main)
- 提供組件的項(xiàng)目vue.config.js配置
const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");
module.exports = defineConfig({
pages: {
index: {
entry: "./src/index.js",
},
},
devServer: {
port: 8083, // 設(shè)置端口號(hào)為8083
},
publicPath: "auto",
configureWebpack: {
optimization: {
splitChunks: false,
},
plugins: [
new webpack.container.ModuleFederationPlugin({
// 必填：指定輸出的模塊容器名稱為app_exposes
name: "app_exposes",
// 指定打包后的文件名為remoteEntry.js
filename: "remoteEntry.js",
// 導(dǎo)出本容器暴露給其他容器遠(yuǎn)程連接的模塊
exposes: {
// 導(dǎo)出對(duì)應(yīng)文件搏存，
// 鍵名對(duì)應(yīng)該文件相對(duì)于打包后文件名為remoteEntry.js的相對(duì)路徑瑰步，
// 鍵值對(duì)應(yīng)到從vue.config.js到該模塊的相對(duì)路徑地址
'./utils': './src/exposes/utils.js',
},
// 主要是用來避免項(xiàng)目出現(xiàn)多個(gè)公共依賴，若是配置了這個(gè)屬性璧眠，webpack
// 在加載的時(shí)候會(huì)先判斷本地應(yīng)用是否存在對(duì)應(yīng)的包缩焦，若是不存在，則加載遠(yuǎn)程應(yīng)用的依賴包
shared: {
vue: {
singleton: true,
},
},
}),
],
},
transpileDependencies: true,
});
其中责静，optimization 配置很關(guān)鍵袁滥，需要設(shè)置 splitChunks: false，否者使用方引入的時(shí)候會(huì)報(bào)錯(cuò)
- 使用方的vue.config.js配置
const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");
module.exports = defineConfig({
pages: {
index: {
entry: "./src/index.ts",
},
},
devServer: {
port: 8081, // 指定端口號(hào)為8081
},
configureWebpack: {
plugins: [
new webpack.container.ModuleFederationPlugin({
// 必填：指定輸出的模塊容器名稱為app_general
name: "app_general",
// 指定打包后的文件名為remoteEntry.js
filename: "remoteEntry.js",
// 表示當(dāng)前應(yīng)用是一個(gè) Host灾螃，可以引用 Remote 中 expose 的模塊
remotes: {
// app_exposes為之前我們r(jià)emote出來的容器名稱题翻，映射其對(duì)應(yīng)的遠(yuǎn)程地址。
// 這里我手動(dòng)指定了項(xiàng)目的端口號(hào)為8083
// 又因?yàn)槠浯虬髮?dǎo)出的文件名為remoteEntry腰鬼，所以地址如下
// 引入完畢之后即可使用其暴露出來的/SpecialItem.vue嵌赠，/SearchItem.vue，/AboutView.vue
app_exposes: "app_exposes@http://localhost:8083/remoteEntry.js",
},
shared: {
vue: {
singleton: true,
},
},
}),
],
},
transpileDependencies: true,
});
26. uniapp video組件在ios12 wkwebview 下播放自動(dòng)全屏退出后不能再次播放問題熄赡？
- h5 video標(biāo)簽添加 webkit-playsinline="true" playsinline="true" 屬性
<video src="" webkit-playsinline="true" playsinline="true"></video>
- 同時(shí)需要給 wkwebview 添加如下配置(allowsInlineMediaPlayback)
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.allowsInlineMediaPlayback = YES;
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:config];
27. vue-cli4 升級(jí)vue-cli5 后 postcss-px2rem-exclude 報(bào)錯(cuò)姜挺。
- 卸載
postcss-px2rem-exclude
npm uninstall postcss-px2rem-exclude
- 安裝
postcss-pxtorem與autoprefixer
npm install postcss-pxtorem@^6.1.0 autoprefixer@^10.4.17 -D
- 修改根目錄下 postcss.config.js 配置文件
// postcss.config.js
const autoprefixer = require('autoprefixer')
const px2rem = require('postcss-pxtorem')
module.exports = {
ident: 'postcss',
plugins: [
autoprefixer(),
px2rem({ rootValue: 100, propList: ['*'], exclude: /node_modules/ })
]
}
28. 安卓手機(jī)移動(dòng)端無法調(diào)用視頻錄像問題。
- 需要將accept設(shè)置為'video/*'才可以直接調(diào)用手機(jī)錄像功能彼硫。
<input type="file" accept="video/*">
- 蘋果手機(jī)只需要設(shè)置為指定的視頻格式即可
<input type="file" accept=".mp4,.m4v,.mov">
