【WEB前端开发】日常项目问题记录

1.window api

  1. window.atob() 用于解码使用 base-64 编码的字符串
  2. window.btoa() 用于创建一个 base-64 编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。

2.mate http-equiv

  1. 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问题

    1. 'UNABLE_TO_VERIFY_LEAF_SIGNATURE '
      出现这个报错说明https证书配置有问题，找后端处理

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的一些理解

  1. 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生成图片空白与清晰度问题

  1. 空白问题，width不可以超出窗口宽度。
  2. 如果想要生成分辨率比较高的图片，可以将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中的兼容问题

  1. ios软件盘弹起后，选择预设候选字不会触发tiymce的change，因此placholder不会自动隐藏，但文字是正常输入的。
    解决办法：监听content字段的变化利用tiymce的insertContent方法配合异步，清除placeholder
 'form.content.text': {
      handler(val, old) {
        if (old === '' && val) {
          // 触发insertContent事件可隐藏placeholder，目的是兼容苹果手机 placeholder 不会自动隐藏的的情况
          setTimeout(() => {
            this.editorCtx.insertContent('');
          });
        }
      }
    }
  1. 在ios中失去焦点后tinymce的光标会默认回到首位，这样会导致，通过insertContent插入内容位置不正确。
    解决办法，分别在下面的时机获取光标位置，在使用insertContent前设置光标位置
  • 监听内容变化时获取。原因，ios键盘选择联想字不会触发tinymce的change事件。
  • 在tiymce的click、focus、keyup事件触发时获取，原因，移动光标不会记录光标位置，这样就无法在目标位置insertContent
  • 在tinymce的change事件中获取，原因，收起键盘不会触发blur事件，但是会触发change，目的是代替blur时获取光标位置。

25 vue-cli5 中 使用 webpack5 module-federation 模块联邦注意事项

  1. 入口文件需要在写在src/index.js （提供方和使用方都需要这样写）

// 提供方exposes/src/index.js
// 通过 import 将 main 引入
import('./main)

// 使用方general/src/index.js
// 通过 import 将 main 引入
import('./main)
  1. 提供组件的项目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，否者使用方引入的时候会报错

  1. 使用方的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,
});

详情：参考github上的开源项目

26. uniapp video组件在ios12 wkwebview 下播放自动全屏退出后不能再次播放问题？

  1. h5 video标签添加 webkit-playsinline="true" playsinline="true" 属性
<video  src="" webkit-playsinline="true" playsinline="true"></video>
  1. 同时需要给 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. 安卓手机移动端无法调用视频录像问题。

  1. 需要将accept设置为'video/*'才可以直接调用手机录像功能。
<input type="file" accept="video/*">
  1. 苹果手机只需要设置为指定的视频格式即可
<input type="file" accept=".mp4,.m4v,.mov">
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容