1.window api
- window.atob() 用于解码使用 base-64 编码的字符串
- window.btoa() 用于创建一个 base-64 编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。
2.mate http-equiv
- http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"
让浏览器把一个网站所有的不安全 URL（通过 HTTP 访问）当做已经被安全的 URL 链接（通过 HTTPS 访问）替代。这个指令是为了哪些有量大不安全的传统 URL 需要被重写时候准备的。
- 详情参考MDN
3.滚动到指定位置
在vue项目中可以使用下面的方法
this.$refs[name].scrollIntoView()
4. ifram播放视频有黑边问题
需要将ifram的高度设置为宽度的52.5%，视频才不会有黑边
5.图片链接加一个随机数可以解决都缓存问题
6.小程序图片高度不能自适应问题
在image标签添加 mode="widthFix"
<image class="explain__imgText" src="图片地址" alt="" mode="widthFix" />
7. 阻止ios活动回弹
13ad8463af71294d00e4a0c07de1fb2.png
51d9f86f035ea095314b19368cce7a6.png
9. nuxt代理请求https问题
- 'UNABLE_TO_VERIFY_LEAF_SIGNATURE '
出现这个报错说明https证书配置有问题，找后端处理
- 'UNABLE_TO_VERIFY_LEAF_SIGNATURE '
10. cookie问题
cookie同一个字段，但path不相同在控制台看到的会是两个字段。如下
document.cookie = "name=张三; path=/;"
document.cookie = "name=张三"
微信图片_20220712151721.png
这种情况下，如果要删除cookie，需要把对应的path也一起设置。
11.媒体查询
max 与min的区别
/* min-height 表示高度大于等于500px时，显示红色 */
@media screen and (min-height: 500px) {
.child {
background-color: red;
}
}
/* max-height 表示 高度 >= 0px && 高度 <= 499px时，显示绿色 */
@media screen and (max-height: 499px) {
.child {
background-color: green;
}
}
12. postMessage的一些理解
- A页面调用B页面的postMessage方法，给B页面发送消息。反过来，B页面给A页面，则需要在B页面调用A页面的postMessage方法
13. 关于Date对象在 IOS上获取时间戳的兼容性问题
// 这种方式在IOS上无法获取时间戳 返回一个NaN
+new Date('2022.8.29 18:00') // NaN
IOS上需要换成斜杠格式
new Date('2023/3/27 14:00')
14. http-proxy代理配置问题
多个代理需要明确使用^开头，否则会默认匹配。
例如'/api' 、 '/test-api'，如果不用开头匹配规则，'/test-api'将会被'/api'代理
// 错误的写法
"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项目开启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设置大一点，然后再将scale设置大一点
17. 清空service worker缓存的方法
微信截图_20230616091448.png
18. uni-app开发小程序，input输入框v-model真机调试无法输入问题
可以尝试将真机调试在1.0、 2.0版本之间切换
19. vue-cli打包时添加版本号
// vue.config.js
const pages = {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
// 添加一个meta标签，添加版本属性
meta: { revised: `项目:v1.0.0` }
}
}
module.exports = {
pages
}
20. js中引入scss export变量为空对象的解决办法
将var.scss 改为 var.module.scss
21. uni-app 中使用qs包的问题
微信小程序只支持"qs": "^5.0.0",
22. uniapp项目中，魅族手机video标签浮动错乱的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项目中，IOS键盘不会自动弹起的解决方案。
动态改变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软件盘弹起后，选择预设候选字不会触发tiymce的change，因此placholder不会自动隐藏，但文字是正常输入的。
解决办法：监听content字段的变化利用tiymce的insertContent方法配合异步，清除placeholder
'form.content.text': {
handler(val, old) {
if (old === '' && val) {
// 触发insertContent事件可隐藏placeholder，目的是兼容苹果手机 placeholder 不会自动隐藏的的情况
setTimeout(() => {
this.editorCtx.insertContent('');
});
}
}
}
- 在ios中失去焦点后tinymce的光标会默认回到首位，这样会导致，通过insertContent插入内容位置不正确。
解决办法，分别在下面的时机获取光标位置，在使用insertContent前设置光标位置
- 监听内容变化时获取。原因，ios键盘选择联想字不会触发tinymce的change事件。
- 在tiymce的click、focus、keyup事件触发时获取，原因，移动光标不会记录光标位置，这样就无法在目标位置insertContent
- 在tinymce的change事件中获取，原因，收起键盘不会触发blur事件，但是会触发change，目的是代替blur时获取光标位置。
25 vue-cli5 中 使用 webpack5 module-federation 模块联邦注意事项
- 入口文件需要在写在src/index.js （提供方和使用方都需要这样写）
// 提供方exposes/src/index.js
// 通过 import 将 main 引入
import('./main)
// 使用方general/src/index.js
// 通过 import 将 main 引入
import('./main)
- 提供组件的项目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, // 设置端口号为8083
},
publicPath: "auto",
configureWebpack: {
optimization: {
splitChunks: false,
},
plugins: [
new webpack.container.ModuleFederationPlugin({
// 必填：指定输出的模块容器名称为app_exposes
name: "app_exposes",
// 指定打包后的文件名为remoteEntry.js
filename: "remoteEntry.js",
// 导出本容器暴露给其他容器远程连接的模块
exposes: {
// 导出对应文件，
// 键名对应该文件相对于打包后文件名为remoteEntry.js的相对路径，
// 键值对应到从vue.config.js到该模块的相对路径地址
'./utils': './src/exposes/utils.js',
},
// 主要是用来避免项目出现多个公共依赖，若是配置了这个属性，webpack
// 在加载的时候会先判断本地应用是否存在对应的包，若是不存在，则加载远程应用的依赖包
shared: {
vue: {
singleton: true,
},
},
}),
],
},
transpileDependencies: true,
});
其中，optimization 配置很关键，需要设置 splitChunks: false，否者使用方引入的时候会报错
- 使用方的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, // 指定端口号为8081
},
configureWebpack: {
plugins: [
new webpack.container.ModuleFederationPlugin({
// 必填：指定输出的模块容器名称为app_general
name: "app_general",
// 指定打包后的文件名为remoteEntry.js
filename: "remoteEntry.js",
// 表示当前应用是一个 Host，可以引用 Remote 中 expose 的模块
remotes: {
// app_exposes为之前我们remote出来的容器名称，映射其对应的远程地址。
// 这里我手动指定了项目的端口号为8083
// 又因为其打包后导出的文件名为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 下播放自动全屏退出后不能再次播放问题？
- h5 video标签添加 webkit-playsinline="true" playsinline="true" 属性
<video src="" webkit-playsinline="true" playsinline="true"></video>
- 同时需要给 wkwebview 添加如下配置(allowsInlineMediaPlayback)
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.allowsInlineMediaPlayback = YES;
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:config];
27. vue-cli4 升级vue-cli5 后 postcss-px2rem-exclude 报错。
- 卸载
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. 安卓手机移动端无法调用视频录像问题。
- 需要将accept设置为'video/*'才可以直接调用手机录像功能。
<input type="file" accept="video/*">
- 苹果手机只需要设置为指定的视频格式即可
<input type="file" accept=".mp4,.m4v,.mov">
