前端 – 「马马虎虎」 https://www.gek6.cn 极客蜗牛-开发效率很慢的... Thu, 03 Aug 2023 01:43:56 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.6.2 https://www.gek6.cn/wp-content/uploads/2021/12/20211205200322145-32x32.png 前端 – 「马马虎虎」 https://www.gek6.cn 32 32 解决微信公众平台素材库图片防盗链的问题 https://www.gek6.cn/%e8%a7%a3%e5%86%b3%e5%be%ae%e4%bf%a1%e5%85%ac%e4%bc%97%e5%b9%b3%e5%8f%b0%e7%b4%a0%e6%9d%90%e5%ba%93%e5%9b%be%e7%89%87%e9%98%b2%e7%9b%97%e9%93%be%e7%9a%84%e9%97%ae%e9%a2%98/ https://www.gek6.cn/%e8%a7%a3%e5%86%b3%e5%be%ae%e4%bf%a1%e5%85%ac%e4%bc%97%e5%b9%b3%e5%8f%b0%e7%b4%a0%e6%9d%90%e5%ba%93%e5%9b%be%e7%89%87%e9%98%b2%e7%9b%97%e9%93%be%e7%9a%84%e9%97%ae%e9%a2%98/#respond Thu, 03 Aug 2023 01:43:48 +0000 https://www.gek6.cn/?p=163 微信公众号素材引用时提示：此图片来自微信公众平台未经允许不可引用
html模板加上这个属性即可 简单粗暴！

<meta name="referrer" content="no-referrer"/>

Referer 头部是一个 HTTP 头部，用于标识请求是从哪个页面发出的。例如，如果你从页面 A 点击一个链接到页面 B，那么在请求页面 B 时，浏览器会发送一个 Referer 头部，值为页面 A 的 URL。

设置了 referrer 策略为 "no-referrer"。这表示浏览器在请求资源时，不会发送 Referer 头部。这意味着目标服务器无法知道请求是从哪个页面发出的。

这个策略在一些情况下可能很有用，例如，当你不希望其他人知道你的页面从哪里链接过来时，或者你不希望把你的页面的 URL 暴露给其他人时。然而，它也可能导致一些问题，因为一些服务可能依赖 Referer 头部来进行防盗链或者跟踪用户行为。

]]> https://www.gek6.cn/%e8%a7%a3%e5%86%b3%e5%be%ae%e4%bf%a1%e5%85%ac%e4%bc%97%e5%b9%b3%e5%8f%b0%e7%b4%a0%e6%9d%90%e5%ba%93%e5%9b%be%e7%89%87%e9%98%b2%e7%9b%97%e9%93%be%e7%9a%84%e9%97%ae%e9%a2%98/feed/ 0 Electron打包采坑 https://www.gek6.cn/electron%e6%89%93%e5%8c%85%e9%87%87%e5%9d%91/ https://www.gek6.cn/electron%e6%89%93%e5%8c%85%e9%87%87%e5%9d%91/#respond Tue, 04 Jul 2023 07:13:18 +0000 https://www.gek6.cn/?p=155 安装过程中 会需要 python2.7 等待自动安装即可

安装 windows-build-tools

npm install windows-build-tools
安装 windows-build-tools 后 再次打包 会下载对应操作系统的打包插件

0.SHASUMS256.txt-2.0.18
1.electron-v2.0.18-win32-x64.zip 淘宝镜像下载地址https://npm.taobao.org/mirrors/electron/
2.winCodeSign-2.4.0.7z
3.nsis-3.0.1.13.7z
4.nsis-resources-3.0.7z
5.app-builder-v0.6.1-x64.7z

最终文件夹如下：
--electron  
    C:\Users\windows用户\AppData\Local\electron\
    --Cache
        electron-v2.0.18-win32-x64.zip
        SHASUMS256.txt-2.0.18
--electron-builder
    C:\Users\windows用户\AppData\Local\electron-builder\cache\
    --cache
        --app-builder
            --app-builder-v0.6.1-x64
                解压app-builder-v0.6.1-x64.7z所得文件
        --nsis
            --nsis-3.0.1.13
                解压nsis-3.0.1.13.7z所得文件
        --nsis-resources
            --nsis-resources-3.3.0
                解压nsis-resources-3.3.0.7z所得文件
        --winCodeSign
            --winCodeSign-2.4.0
                解压winCodeSign-2.4.0.7z所得文件

目录截图

]]> https://www.gek6.cn/electron%e6%89%93%e5%8c%85%e9%87%87%e5%9d%91/feed/ 0 CSS实现单行、多行文本溢出显示省略号 https://www.gek6.cn/css%e5%ae%9e%e7%8e%b0%e5%8d%95%e8%a1%8c%e3%80%81%e5%a4%9a%e8%a1%8c%e6%96%87%e6%9c%ac%e6%ba%a2%e5%87%ba%e6%98%be%e7%a4%ba%e7%9c%81%e7%95%a5%e5%8f%b7/ https://www.gek6.cn/css%e5%ae%9e%e7%8e%b0%e5%8d%95%e8%a1%8c%e3%80%81%e5%a4%9a%e8%a1%8c%e6%96%87%e6%9c%ac%e6%ba%a2%e5%87%ba%e6%98%be%e7%a4%ba%e7%9c%81%e7%95%a5%e5%8f%b7/#respond Tue, 04 Jul 2023 07:12:08 +0000 https://www.gek6.cn/?p=153 单行 
overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;
多行
display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;
适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

]]> https://www.gek6.cn/css%e5%ae%9e%e7%8e%b0%e5%8d%95%e8%a1%8c%e3%80%81%e5%a4%9a%e8%a1%8c%e6%96%87%e6%9c%ac%e6%ba%a2%e5%87%ba%e6%98%be%e7%a4%ba%e7%9c%81%e7%95%a5%e5%8f%b7/feed/ 0 IOS12.X 微信小程序样式错乱问题 https://www.gek6.cn/ios12-x-%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%a0%b7%e5%bc%8f%e9%94%99%e4%b9%b1%e9%97%ae%e9%a2%98/ https://www.gek6.cn/ios12-x-%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%a0%b7%e5%bc%8f%e9%94%99%e4%b9%b1%e9%97%ae%e9%a2%98/#respond Wed, 03 Aug 2022 06:45:19 +0000 https://www.gek6.cn/?p=123 嵌套flex布局引起 ]]> https://www.gek6.cn/ios12-x-%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%a0%b7%e5%bc%8f%e9%94%99%e4%b9%b1%e9%97%ae%e9%a2%98/feed/ 0 vue3+vite自动加载路由 https://www.gek6.cn/vue3vite%e8%87%aa%e5%8a%a8%e5%8a%a0%e8%bd%bd%e8%b7%af%e7%94%b1/ https://www.gek6.cn/vue3vite%e8%87%aa%e5%8a%a8%e5%8a%a0%e8%bd%bd%e8%b7%af%e7%94%b1/#respond Fri, 29 Jul 2022 02:54:52 +0000 https://www.gek6.cn/?p=108 1、使用 import.meta.glob加载所有vue文件 
const modules = import.meta.glob("../views/**/*.vue");
let autoRoutes: Route[] = [];
for (let key in modules) {
  console.log(key);
  autoRoutes.push({
    filePath: key,
    path: key.replace("../views/", "/").replace(".vue", ""),
    component: modules[key]
  });
}

2、使用addRoute挂载动态路由

const mountRoutes = async () => {
  for (const item of autoRoutes) {
    if (item.path) {
      const route = {
        path: item.path,
        component: () => import(item.filePath)
      };
      console.log(route);
      router.addRoute(route);
    }
  }
};

3、路由配置

import { createRouter, createWebHashHistory } from "vue-router";
import indexPage from "../views/index/index.vue";
import { mountRoutes } from "./auto-load";
import { getToken } from "../utils/token";

const routes = [
  { path: "/", component: indexPage },
  { path: "/login", component: () => import("../views-common/account/login/index.vue") }
];
export const router = createRouter({
  history: createWebHashHistory(),
  routes
});

const authWhiteList = [
  "/login"
];
// 是否已经挂载动态路由标识
let routeHasMounted = false;
router.beforeEach(async (to, from, next) => {
  // 是否为免登录白名单 是的话直接放行
  if (authWhiteList.includes(to.path)) {
    next();
  } else {
    // 需要免登录的页面 判断是否已经登录
    if (!getToken()) {
      // 未登录的直接跳转到登录页面
      next({ path: "/login", replace: true });
    } else {
      // 已经登录的 判断是否挂载动态路由
      if (!routeHasMounted) {
        // 未挂载状态 挂载动态路由
        await mountRoutes();
        // 将挂载状态设置为true
        routeHasMounted = true;
        // 重新路由到当前页面 因为此页面在第一次打开的时候是 匹配不到路由的
        // 这里replace: true 是为了让网页不能返回上一页
        next({ ...to, replace: true });
      } else {
        // 已经挂载状态 直接放行
        next();
      }
    }
  }
});
]]> https://www.gek6.cn/vue3vite%e8%87%aa%e5%8a%a8%e5%8a%a0%e8%bd%bd%e8%b7%af%e7%94%b1/feed/ 0 webstorm开发uniapp时rpx单位问题 https://www.gek6.cn/webstorm%e5%bc%80%e5%8f%91uniapp%e6%97%b6rpx%e5%8d%95%e4%bd%8d%e9%97%ae%e9%a2%98/ https://www.gek6.cn/webstorm%e5%bc%80%e5%8f%91uniapp%e6%97%b6rpx%e5%8d%95%e4%bd%8d%e9%97%ae%e9%a2%98/#respond Thu, 28 Jul 2022 07:13:56 +0000 https://www.gek6.cn/?p=101 痛点：使用webstorm开发小程序或者uniapp时，无法识别rpx单位报红，格式化后会在数值与单位之间添加空格

下载插件

配置插件

配置后rpx就不飘红了

  • 使用webstorm自带格式化 OK
  • 使用es-lint格式化 OK
]]> https://www.gek6.cn/webstorm%e5%bc%80%e5%8f%91uniapp%e6%97%b6rpx%e5%8d%95%e4%bd%8d%e9%97%ae%e9%a2%98/feed/ 0 video标签自动播放无效？ https://www.gek6.cn/video%e6%a0%87%e7%ad%be%e8%87%aa%e5%8a%a8%e6%92%ad%e6%94%be%e6%97%a0%e6%95%88%ef%bc%9f/ https://www.gek6.cn/video%e6%a0%87%e7%ad%be%e8%87%aa%e5%8a%a8%e6%92%ad%e6%94%be%e6%97%a0%e6%95%88%ef%bc%9f/#respond Thu, 21 Jul 2022 06:04:40 +0000 https://www.gek6.cn/?p=96 自动播放无效 
<video src="./test.mp4" autoplay loop />

加上 muted 属性

<video src="./test.mp4" autoplay loop muted />

muted 属性用来表示网页中的音频是否静音，如果设置，音频将被初始化为静音

]]> https://www.gek6.cn/video%e6%a0%87%e7%ad%be%e8%87%aa%e5%8a%a8%e6%92%ad%e6%94%be%e6%97%a0%e6%95%88%ef%bc%9f/feed/ 0 CSS-MP4背景透明化 https://www.gek6.cn/css-mp4%e8%83%8c%e6%99%af%e9%80%8f%e6%98%8e%e5%8c%96/ https://www.gek6.cn/css-mp4%e8%83%8c%e6%99%af%e9%80%8f%e6%98%8e%e5%8c%96/#respond Thu, 21 Jul 2022 06:02:24 +0000 https://www.gek6.cn/?p=94 mix-blend-mode

该属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合

用法：

video {
  mix-blend-mode: screen;
}

MDN传送门

]]> https://www.gek6.cn/css-mp4%e8%83%8c%e6%99%af%e9%80%8f%e6%98%8e%e5%8c%96/feed/ 0 vue-quill-editor 添加自定义上传图片功能（上传至服务器或七牛云） https://www.gek6.cn/vue-quill-editor-%e6%b7%bb%e5%8a%a0%e8%87%aa%e5%ae%9a%e4%b9%89%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e5%8a%9f%e8%83%bd%ef%bc%88%e4%b8%8a%e4%bc%a0%e8%87%b3%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%88%96%e4%b8%83/ https://www.gek6.cn/vue-quill-editor-%e6%b7%bb%e5%8a%a0%e8%87%aa%e5%ae%9a%e4%b9%89%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e5%8a%9f%e8%83%bd%ef%bc%88%e4%b8%8a%e4%bc%a0%e8%87%b3%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%88%96%e4%b8%83/#respond Sun, 05 Dec 2021 11:36:23 +0000 https://www.gek6.cn/?p=53

vue-quill-editor 默认的是以base64保存图片，会直接把图片base64和内容文本一同以字符串的形式提交到后端。 现在这样不科学

安装 vue-quill-editor
npm i vue-quill-editor --save

富文本示例代码
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/views/rich_text/rich_text.vue
图片直传七牛云
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/api/upload.js

思路
  • 用自定义的方法代替quill-editor中的图片点击事件
  • 点击上传图片的icon后，去触发file类型 input 的点击事件，选择图片。（我这用的是饿了么的上传组件，上传到七牛云我已经写好了）
  • 监听input的 onchange 拿到选择的文件数据，然后是要上传到自己服务器呢 还是上传到七牛云 就随意了。
  • 上传完成以后 将图片的远程路径 添加到富文本内容区域
    页面内引入
    import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
//注册组件
components: {
quillEditor
},
<div class="rich_box">
    <!--富文本组件-->
    <quill-editor v-model="content" ref="myQuillEditor" :options="options"></quill-editor>
</div>
<!--饿了么上传组件，也可以用input代替，都是隐藏起来-->
<el-upload
    class="avatar-uploader"
    action=""
    :http-request="to_upload_img"
    :show-file-list="false"
    style="display: none"
    >
    <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
</el-upload>
添加自定义方法
//mounted钩子中 替换插件图标点击事件
// 为图片ICON绑定事件  getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
// 点击图片ICON触发事件
imgHandler(state) {
  console.log(state)
  this.addRange = this.$refs.myQuillEditor.quill.getSelection()
  if (state) {
    // let fileInput = document.getElementById('imgInput')
    // fileInput.click() // 加一个触发事件
    // 选择并上传一张图片
    let fileInput = document.getElementById('imgInput')
    fileInput.click() // 加一个触发事件
  }
},
to_upload_img(formdata){
  return new Promise((resolve,reject)=>{
    upload_img(formdata).then(res=>{
      // 图片的远程路径
      let value = res.key;
      // 将图片添加到富文本内容区域
      this.addRange = this.$refs.myQuillEditor.quill.getSelection();
      // 调用编辑器的 insertEmbed 方法，插入URL
      this.$refs.myQuillEditor.quill.insertEmbed(this.addRange !== null ? this.addRange.index : 0, 'image', value, Quill.sources.USER)   

    })
  })
}
]]> https://www.gek6.cn/vue-quill-editor-%e6%b7%bb%e5%8a%a0%e8%87%aa%e5%ae%9a%e4%b9%89%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e5%8a%9f%e8%83%bd%ef%bc%88%e4%b8%8a%e4%bc%a0%e8%87%b3%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%88%96%e4%b8%83/feed/ 0 小程序解决轮播图倒角（圆角），IOS无法生效的问题 https://www.gek6.cn/%e5%b0%8f%e7%a8%8b%e5%ba%8f%e8%a7%a3%e5%86%b3%e8%bd%ae%e6%92%ad%e5%9b%be%e5%80%92%e8%a7%92%ef%bc%88%e5%9c%86%e8%a7%92%ef%bc%89%ef%bc%8cios%e6%97%a0%e6%b3%95%e7%94%9f%e6%95%88%e7%9a%84%e9%97%ae/ https://www.gek6.cn/%e5%b0%8f%e7%a8%8b%e5%ba%8f%e8%a7%a3%e5%86%b3%e8%bd%ae%e6%92%ad%e5%9b%be%e5%80%92%e8%a7%92%ef%bc%88%e5%9c%86%e8%a7%92%ef%bc%89%ef%bc%8cios%e6%97%a0%e6%b3%95%e7%94%9f%e6%95%88%e7%9a%84%e9%97%ae/#respond Sun, 05 Dec 2021 11:31:48 +0000 https://www.gek6.cn/?p=49 小程序解决轮播图倒角（圆角），IOS无法生效的问题

HTML


<!-- 轮播图 -->
<swiper class="screen-swiper"     :circular="true"
:autoplay="true" interval="5000" duration="500" :indicator-color="bannerDotColor" :indicator-active-color="bannerDotActiveColor">
    <swiper-item v-for="(item,index) in swiperList" :key="index">
        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
    </swiper-item>
</swiper>

CSS

.screen-swiper{
    box-shadow:0px 20upx 14upx -20upx #000; border-radius:10px; 
     -webkit-backface-visibility: hidden;
     -webkit-transform: translate3d(0, 0, 0);
}
]]> https://www.gek6.cn/%e5%b0%8f%e7%a8%8b%e5%ba%8f%e8%a7%a3%e5%86%b3%e8%bd%ae%e6%92%ad%e5%9b%be%e5%80%92%e8%a7%92%ef%bc%88%e5%9c%86%e8%a7%92%ef%bc%89%ef%bc%8cios%e6%97%a0%e6%b3%95%e7%94%9f%e6%95%88%e7%9a%84%e9%97%ae/feed/ 0