- 博客(97)
- 收藏
- 关注
RSS订阅原创 git 提交符号
emojiemoji代码commit说明🎨 (调色板):art:改进代码结构/代码格式⚡️ (闪电):zap:提升性能🐎 (赛马):racehorse:提升性能🔥 (火焰):fire:移除代码或文件🐛 (bug):bug:修复 bug🚑 (急救车):ambulance:重要补丁✨ (火花):sparkles:引入新功能📝 (铅笔):pencil:撰写文档🚀 (火箭):rocket:部署功能💄 (口红
2024-01-12 13:46:18
1766
原创 快速开启node反向代理请求
新建目录 blocks初始化 npm init -y新建文件serve.js相关依赖expresshttp-proxy-middlewareconst express = require('express')const app = express()const { createProxyMiddleware } = require('http-proxy-middleware')const host = 'localhost'const port = '3000'app.u.
2021-11-30 14:43:05
3930
原创 typescript keyof 和 typeof 用法
typeof操作符可以用来获取一个变量或对象的类型const states = { name: 1, block: () => { return '123' },}同一个类型的数据,直接获取它的类型给其他数据用const blocks: typeof states = { name: 2, block: () => { return '123' },}keyof 检查键是否存在 获取某种类型的所...
2021-11-30 14:34:21
1547
原创 小程序rich-text多行省略
返回数据为HTML字符串,需要在rich-text渲染,如果直接给rich-text设定宽高,给多行省略的css样式,并不会起效果,需要单独添加一个html字符<rich-text nodes="<div style='overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'>{{html}}</div>" bindtap="tap"></rich-text>...
2021-11-25 13:28:34
822
2
原创 Uniapp已有项目添加typescript
纯js,么有任何提示,感觉很不爽,希望在老项目上加上tscli创建的项目vue add typescript 使用cli内置的方式,添加ts//解决uni字段不存在的问题 增强uni的提示npm i @dcloudio/types @types/uni-app @types/wechat-miniprogram --save-devtsconfig.js"compilerOptions": { "types": [ ...
2021-11-25 13:24:02
6679
原创 vuecli3以上配置可选操作符写法
效果const firstName = message?.body?.user?.firstName || 'default';//避免用&&方式规避属性不存在时的问题下载babel插件npm i @babel/plugin-proposal-optional-chaining --save-dev.babel.config.js文件,没有就建一个,如果你搭建项目时没有选bebel,那这个文件可能就没有自动生成,需要先安装babel,在新建配置文件 "plu.
2021-07-27 13:27:56
480
原创 antd-vue vue3.0 form表单同时检测多个输入框
<a-form-item label="企业名称"> <a-form-item name="cnname" required style="margin-bottom: 10px;"> <a-input v-model:value="formState.cnname" placeholder="请输入企业中文名称" readonly /> </a-form-item> <a-form-item name="cnname" required st.
2021-07-27 13:24:07
1219
原创 Nuxt 状态保持
业务需求在Nuxt的SSR状态下,需要记录用户的登录状态.状态保持有两种方案1 使用vuex-persistedstate将本地缓存的数据和vuex的数据合并,只能在客户端内拿到token状态2 使用cookie在vuexnuxtServerInit方法再服务端就将数据合并,可以在服务端渲染之前就拿到token状态方法一存在的问题:无法在服务端初始化渲染就拿到登录状态,如果你的业务逻辑,在asyncData内就要使用用户的token,这时候是拿不到浏览器的token,只能通过cookie.
2021-05-20 10:04:56
500
原创 Nuxt SSR数据缓存优化
axios数据缓存场景纯数据列表展示,不对列表某些值进行手动修改,比如新闻列表等数据流 1. 安装axios-extensions扩展 https://github.com/kuitos/axios-extensions axios-extensions 3.1.3左右 该插件将提供axios数据缓存功能 npm i axios-extensions -S //都安装在生产中npm i LRUCache -S //v:4.1.5左右2. 在自定义的axios.js插件里面.
2021-05-13 11:02:46
2362
原创 video.js播放m3u8或者flv格式的推流直播
//asyncAddTool 动态的将外部js插入到body底部,并且返回Promise,js下载完成返回trueexport default url => { //页面上是否已经有了一样的文件,如果有则不再引入 const AllscriptTags = document.querySelectorAll("script"); for (let index = 0; index < AllscriptTags.length; index++) { const eleme.
2021-05-13 09:54:22
3142
原创 H5 移动端拖拽进度条
最近业务需要移动移动端可拖拽的进度条,用来做音乐播放器,简单研究了一下<div class="bar_wrap" id="wrap"></div>css.bar_wrap{ // width: 100%; background-color: aliceblue; // height: 20px; margin-top: 20px;}/** * name 元素选择器 string * w.
2021-02-19 15:45:38
809
原创 react-umi-dva的使用
用这个玩意,最起码了解react-redux 和 redux相关的东西,不然有点懵逼开启@umijs/plugin-dva引入相关配置信息报错,需要新件models / index 并且暴露出去export default {namespace:'MINGCHENG'} //通过验证后,才会开启,创建模块import { Effect, Reducer, Subscription } from 'umi';import { getHome } from '../server/.
2021-01-13 18:11:20
849
1
原创 proxy拦截请求,添加loading
效果 每个请求都有自己独立loading1 request文件夹内放了所有的请求模块,将除了index和serveProxy文件内的请求全部拿出来,给他们做拦截,并且在vuex内配置loading状态request /index// 集成所有请求import serviceProxy from './serveProxy.js'// 一次引入所有函数const requireAll = requireContext => requireContext.keys()..
2020-12-30 14:45:04
580
1
原创 scss less 变量混入
1.通过使用vue-cli-plugin-style-resources-loader前提：导入sass-loader以及node-sass依赖npm install -D sass-loader node-sassvue add style-resources-loader //安装失败多来几次 换源都试试2.配置相关文件（vue.config.js）const path = require('path')module.exports = { pluginOpt
2020-12-23 14:03:04
460
原创 小程序 底部fixed输入框
keyboardheightchange 主要用这个事件,实施获取键盘的高度和过渡的时间,其他的事件去获取,都没有这个好输入框每次都需要销毁再创建出来,这样才能聚焦<template> <view class="module" @click="modelHandel" v-show="showModel"> <view @click.stop v-if="showModel" class="inputBox" :style="{ bottom: keyboar.
2020-12-23 13:32:19
702
原创 元素滚动到底部加载
export const useScroll = (el, callback) => { //默认文档对象, delay 距离底部多远提前触发加载,callback执行加载函数 const checkScrollToBottom = (container = document.documentElement, delay = 100) => { let viewH = container.offsetHeight let boxH = container.scrollHeig.
2020-12-23 13:22:31
217
原创 uniapp 音乐播放器 可拖动进度
<template> <view class="imt-audio"> <view class="rotateBox rotatebox" :style="{animationPlayState:paused?'paused':'running'}"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=535467763,2481826314&fm=26&am.
2020-12-23 13:18:01
6352
5
原创 vuecli3 无法启动项目 报错：core-js/modules/es.object.to-string in......
按照提示：npm install --save core-js 安装或者 安装 npm install core-js@3 -save-dev
2020-12-17 10:05:08
3056
原创 微信小程序scroll-view去除滚动条
copyless or scss.father{ //父元素width: 100vw;height: 100vh;overflow-x: hidden;overflow-y: auto; //隐藏滚动条 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; color: transparent; display: none; }}
2020-12-09 11:21:30
441
原创 IOS14 微信小程序 scroll-view 不滚动的问题
找找你的样式里面的包含z-index=’-1’或者小于0的情况，需要改成0,或者不给层级，注意scroll-view 外部的父级div也包括。
2020-12-09 11:14:29
671
原创 小程序 超大json数据处理(省市区数据等等)
在做小程序时候用的uniapp,遇到一个严重的问题.一个省市区数据300k左右,但是多个页面都用了这个数据,被多次打包的主包的运行文件内,造成总体积过大JSON数据要求键全部是双引号字符串不允许有空格 (在线压缩工具,站长工具等)不允许有注释,App.vue 中发请求获取json, 可以用datatype:json 进行转化一次<script>import { getPosition } from "@/api/my/resume";import { pro..
2020-12-05 15:55:52
1571
原创 小程序上传文件到七牛云
微信小程序七牛云插件下载import { uploadCompanyFilePolicy, uploadFilePolicy} from "@/api/common";import { getToken} from "@/tool/auth.js";const qiniuUploader = require("./qiniu-wxapp-sdk.js");function initQiniu(uptoken) { var options = { // bucket所在区域，这里.
2020-12-05 14:16:21
1108
原创 微信卡券
$(function () { function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) .
2020-12-01 17:31:29
109
2
原创 React setState的同步获取最新数据
同步第一种this.setState({ num }, () => { let num1 = this.state.num; //如果想在修改后,获取修改后的数据 if (num1 === 10) { alert("123") } }); 同步第二种class Home extends React.Component { constructor(props) { super(props) .
2020-10-29 17:18:49
1969
原创 React 多种方式跨域
第一种package.json文件{"proxy":"www.123456.com" //新添加一项跨域 最末尾}pswww.123456.com/getAllSatte请求只需要/getAllSatte 前半段不用在写了，如果是axios baseUrl也不要配置了第二种npm install http-proxy-middleware --savesrc/setupProxy.js 新建该文件const { createProxyMiddleware.
2020-10-29 17:15:27
299
原创 图片懒加载 触底加载 IntersectionObserver
优点:防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等懒加载函数function lazyAll(options = { lazybox: [], showOffset: 150, throttleTime: 100, imgtruestr: 'lazyimg' }) { //lazybox //所有图片元素。必须有高度,可以用加载图,不给高度也可以，但是会有停顿 // showOffset 图片底部距离底部多高就开始加载， 越大越早加载 //
2020-10-28 14:19:21
413
原创 stylus 直转 css
npm install -g stylus下载转义工具包stylus -w demo.styl -o dist-w 是自动监视文件 -o 是将编译后的CSS文件输出到指定文件中 一半在new.styl开终端运行,同级有个dist目录在demo.styl里面写内容，保存即可stylus -w new.styl -o distrem方式rem(px) return unit(px / 32, 'rem') //根字体大小:写的时候将窗口调整到当前设计稿的...
2020-10-23 15:39:32
1665
原创 less 直转 rem
.rem(@name,@px){ @{name}:unit(@px/75,rem) //请配置好根字体大小:调整窗口宽度至设计稿宽度后,查看根字体大小}body{ position: absolute; .warrper{ .rem(width,300) }}vscode 需要下载less插件,编译后自动会生成同名css...
2020-10-23 15:35:26
602
原创 vue3 SFC新的深度选择器
vue3.0的项目 再次变更了css深度选择器写法.> footer { height: 1rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; width: 100%; ::v-deep(.van-icon) { //注意这里括号和选择器不要有空格,编辑器会报错 &::before { background-clip:
2020-10-15 21:47:25
1401
2
原创 匹配字母数字下划线的正则和不是字母数字下划线的正则
1.由数字、26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$2，匹配不是字母数字下划线的字符'$a$a$'.replace(/[^0-9a-zA-Z_]$/g, '') //这种如果用户输着输着在往回输就不生效了'$a$a$'.replace(/[^0-9a-zA-Z_]+/g, '') //这种就不会出现上面这种情况 //例如 $('.number-word-_').keyup(function(){ le.
2020-09-06 20:54:33
1641
原创 javascript监听pageshow事件阻止页面进入bfcache
window.addEventListener('pageshow',function(e){ if(e.persisted){ window.location.reload(); }})
2020-09-06 20:52:59
2127
原创 分享页面后添加新的路由栈
假如该页面是别人分享过来的而不是通过其他页面进入的呢？那么点击该按钮将不会有任何反应，因为此时history对象中不存在历史记录，也就是说这是你浏览器窗口打开时浏览的第一个页面,现在希望分享出去后,可以点击返回按钮,返回到指定的页面history.replaceState(null, null, 'https://home') //替换掉当前页面history.pushState(null, null, currentUrl)//使用history.pushState添加历史，让用户可以点.
2020-09-06 20:46:07
238
原创 图片懒加载 在可视区域才加载
npm install vue-lazyload --save-dev //安装懒加载包入口文件main中引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)可配置自定义属性Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})在 vue 文件中将 img 标签的 src 属性.
2020-09-06 20:41:24
628
原创 history 路由原理
history模式如果不希望看到丑陋的#可以使用history模式，其原理依赖于 history.pushState函数 a标签点击以后，如果没有#必然会页面跳转发起请求 使用pushState函数可以改变url比如 /abc而不会发起请求 js通过location.pathname获取该值 /abc做页面局部的替换实现方式history.pushState(url带的参数,标题,修改的路由) a标签获取herf属性的路由,增加点击事件，去除a标签的默认行为，...
2020-09-06 20:37:33
1864
原创 vant移动端组件按需加载引入方法
先按vant文档,给他配置好babel除了下载npm i babel-plugin-import -D还需要在.babel.config中配置// 对于使用 babel7 的用户，可以在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, '.
2020-09-02 13:41:43
1520
原创 SSR 配置postcss 自动将px转化为rem
build: { //在构建时后编译引入的插件 babel按需引入,但是没用 babel: { plugins: [ [ 'import', { libraryName: 'vant', // 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式 style: false, }, 'vant',.
2020-09-02 13:38:39
447
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人