Handada_fan-优快云博客

原创前端性能优化之font-spider(字蛛)

正常开发中，UI设计稿经常会出现一整张设计稿，某一个标题使用了特殊的字体。这种情况下，如果前端直接把UI给的字体文件整个引入时，文件大小可能在1-100M之间。这样子如果用户加载这个文件过久，加载成功后会导致页面因为字体文件的原因，发生抖动（重绘）。（网上很多人说字体文件会阻塞现成，博主通过F12，把网络改成低速3G后发现并没有阻塞页面的渲染，只是渲染出来的页面刚开始没有字体样式，等到把字体文件下载下来的时候，对应使用字体的节点会发生重绘现象）

2023-03-28 10:35:19 3235

原创 Eslint详细配置

module.exports = {“env”: {“browser”: true,“es6”: true,“node”: true},“extends”: [// 使用"extends": "eslint:recommended"来启用推荐的规则，报告一些常见的问题“eslint:recommended”, // 继承了eslint的一些默认配置规则“plugin:vue/recommended” // eslint是用来检测js和jsx，并不具备检测.vue文件的能力，所以需要装上以上的

2022-08-03 13:38:18 3512 1

原创使用svg并改变其颜色

svg直接作用在页面上重点：设置svg的path属性<html> <head> <style> body { background-color: #e2e2e2; } .svg-img { width: 100px; height: 100px; } svg path:hover { fill: skyblue; } /* ho

2022-05-12 10:05:48 22567 1

原创搭建node服务器

const express = require("express")const app = express()const port = 5000let count = 0app.all("*",function(req,res,next){ // //设置允许跨域的域名，*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin",req.header.origin||"*") //允许的header类型 res.header("Ac

2022-04-21 14:39:13 530

原创 Vue打包重命名js、css文件名以及目录

'use strict'const path = require('path')function getNowDate() { const date = new Date() const year = String(date.getFullYear()) const month = String(date.getMonth() + 1) const day = String(date.getDate()) return year + month + day}const nowDa

2022-04-21 14:31:50 4660

原创 webpack和Vue.config.js中配置url-loader

url-loader:一个用于将文件转换为 base64 URI 的 webpack 加载器。作用：项目打包时，可以将符合条件的图片打包成base64 URL，减少http资源请求。webpack配置：const {resolve} = require("path")module.exports = { mode:"development", entry:"./index.js", //resolve(__dirname,"src","index.js") output:{ p

2022-04-19 14:04:43 6688

原创 Vue使用@import 引入样式文件全局污染、使用scoped失效问题

scoped在组件中的style使用@import方式引入外部css，发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。<style lang="scss" scoped> @import url("/style/index.scss") <style>上面这种情况即时加入了scoped也无效，样式一样会污染到其他地方。所以改写成src的方式引入。<style lang="scss" src="/style/index.sc

2021-12-15 10:14:04 14554 4

原创 yarn配置淘宝镜像

一、Yarn 设置淘宝镜像1.查询当前配置的镜像yarn config get registry // 默认：https://registry.yarnpkg.com2.设置成淘宝镜像yarn config set registry http://registry.npm.taobao.org/3.换成原来的yarn config set registry http://registry.npmjs.org/二、NPM设置淘宝镜像1.查询当前配置的镜像npm get registr

2021-11-24 15:45:11 10422

原创 Vue中使用proxy解决开发环境跨域

在网上看了很多了写的proxy,也尝试了很多文档的示例。都没有讲解得很详细。经过坚持不懈的踩坑，终于解决了开发环境跨域的问题。毕竟不是每个后端都懂什么是跨域、怎么解决跨域。时间不等人。前端直接开干。免得被接口拖了开发时间。话不多说，进入主题。第一步：配置proxy//Vue.config.js devServer: { proxy: { '/api': { //这里的写api的原因是因为后端的接口是这样子的： http://aaa.bbbb.com/api/user/getU

2021-11-02 16:12:27 517

原创原生JS获取元素距离顶部的高度

1.获取节点距离顶部的高度let t =document.querySelector('.last_box').offsetTop2.滚动到当前元素的位置window.scroll({ top: t, left: 0, behavior: 'smooth' })

2021-04-29 16:11:16 5513

原创 vue.config.js详解

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。这个文件应该导出一个包含了选项的对象：// vue.config.jsmodule.exports = { //默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://w

2021-01-05 16:17:19 5224

原创小程序知识点

获取用户信息 getUserInfo(e){ if(e.detail.rawData){ console.log("授权成功") return { getUserInfo:true , Info:JSON.parse(e.detail.rawData) } }else{ console.log("拒绝授权或授权失败") return {

2020-12-31 14:49:25 347

原创小程序开发之事件系统

1.bindtap和catchtap的区别普通事件绑定<view bindtap="handleTap"> Click here!</view>如果用户点击这个 view ，则页面的 handleTap 会被调用。除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle vi

2020-12-29 15:51:13 184

原创小程序之页面路由（页面栈）

页面栈是以栈的形式维护页面与页面之间的关系，遵循栈的原则，先进后出，在微信小程序中有getCurrentPages()函数获取页面栈。在开发的时候吗，可以通过getCurrentPages()函数获取页面栈let pages = getCurrentPages()let currPage = pages[pages.length - 1]; //当前页面let prevPage = pages[pages.length - 2]; //上一个页面也可以通过这个函数判断是否有上一个页面栈，

2020-12-29 14:29:35 1305

原创微信小程序页面是否允许微信索引之sitemap.json

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。sitemap 配置小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。//1.所有页面都会被微信索引（默认情况）{ "rules":[{ "action": "allow"

2020-12-29 14:18:15 1278

原创 Vue全局过滤器和局部过滤器的使用及注意点

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：{{ message | capitalize }}<div v-bind:id="rawId | forma

2020-12-07 14:50:12 968

原创 google拓展程序实现自动更新

在开发拓展程序的时候，因为是给公司内部使用的，所有压根没有打算发布到google拓展商店去使用。网上搜了很多教程都没有一个肯定的答案是否可以放在自己服务器上实现自动更新。后来自己就一步步来尝试了。注意：目前这个方法只有极速浏览器能够使用试了qq、google、搜狗等很多都不能够使用1.xml文件首先要写一个xml文件，结构很简单<gupdate xmlns="http://www.google.com/update2/response" protocol="2.0"> <ap

2020-12-03 15:19:00 1499 8

原创 Vue开发适配移动端

1.下载依赖lib-flexible//移动端适配依赖npm install lib-flexiblepostcss-pxtorem//px转rem依赖npm install postcss-pxtorem2.配置postcss//package.json{....其他的 "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValu

2020-12-03 14:48:51 179

原创 JS封装的常用方法

1.获取当前H5在哪个载体上运行。export function getBrowser(){ const UA = navigator.userAgent || ''; const isAndroid = !!UA.match(/Android/i); const isQQ = /(iPad|iPhone|iPod).*? (IPad)?QQ\/([\d\.]+)/.t...

2020-12-03 14:48:28 169

原创 JQuery触发click和input赋值的几种方式

之前在做google拓展程序的时候，需要把程序嵌入到其他平台的页面。需求需要触发平台页面上某个按钮的click事件。1.直接触发//点击事件$(this).click()//input赋值$('input').val("123")当使用第一种方式触发触发不了的情况下，使用了第二种方式2.createEvent（）createEvent() 方法创建新的 Event 对象。//clicklet event = document.createEvent('HTMLEvents');ev

2020-12-03 14:44:24 1591

原创公众号H5页面分享带缩略图和title

在使用微信JS-SDK对应的JS接口前，需确保已获得使用对应JS接口的权限，可在下表中根据自己的帐号类型查看。企业号帐号类型分为注册号和认证号，其中认证号拥有更多的JS-SDK权限，具体详见下方表格：所有的JS接口只能在企业号应用的可信域名下调用(包括子域名)，可在企业号应用中心里设置应用可信域名。（在公众号设置–>功能设置，填写设置Js接口安全域名，Js安全域名是需要把微信提供的...

2020-03-16 14:24:10 1115

原创 Vue提升开发速度小结

1.将对象挂载在全局在开发过程中，如果没有将方法挂载在全局，在每个也就就出出现n个import的情况，不单看着烦，还累人。比如说我们自己封装了一个js，里面有各种快捷的方法。如果说长这样：comnon.js：let objFunction = {// 对象深度克隆cloneObj (obj) { if(obj === null) return null ...

2019-07-30 11:29:39 281

原创 H5图片上传在ios中遇到的坑点

今天在开发H5图片上传的时候，遇到一个问题。安卓手机的上传全部都是ok的，但偏偏卡在了ios这边。i6、i6s、IX三款机型都测出了bug，导致上传不了，卡在了调用接口的前一秒。真正的原因是在代码中输入了console.log(fd.get("ImgFile"))部分代码是这样的 for(let i =0 ;i<files.length;i++){ ...

2019-07-26 18:03:57 3947

原创前端JS与App交互

前端JS与App进行交互1.前端主动与app交互2.APP与前端交互在工作的时候，有时候会接到这样的需求：开发H5页面。内嵌到App里面。在这里，我们只需要写好前端代码，接好接口。将项目打包后丢给运营去部署就行了。但是往往我们写代码的时候，需要与app之间进行交互，例如app传值给前端，前端传值给app。这两种情况处理的方式都不同。1.前端主动与app交互（1）主动与ios进行交互在...

2019-07-26 17:45:31 2698

qq_39441438的博客