- 博客(46)
- 收藏
- 关注
RSS订阅原创 iframe跨域内嵌帆软web集成页面 -- 坑
集成界面在本地环境iframe 引入效果 --- 界面内容被挤在 iframe 设定范围，内部无法滚动条展示： 内容被遮挡 内容显示正常 解决方法一：...
2021-07-07 14:07:26
1559
原创 小程序 -- 坑
1、跳转webview携带路径参数消失// 举例const src = 'https://www.baidu.com/' + '?aa=1'wx.navigateTo({ url: `/pages/webview/webview?src=${src}`})跳转到 webview页面后会发现 onload 获取到的 src = https://www.baidu.com/，参数无法获取解决：使用encodeURIComponent 转码后再传 ，webview页面使用处理解码 d..
2021-06-29 15:31:14
78
原创 vscode 格式化缩进空格数
1、文件 - 首选项 - 设置2、搜索tabsize注：Editor:Detect Indentation不勾选：旧文件不会更改；
2021-05-18 11:35:29
641
原创 坑 -- h5获取用户当前定位
小程序webview获取当前定位，第一想法就是微信jssdk，但是项目没有接入过微信授权，后台也没有相应接口，本着前端能解决就不麻烦后台的初心，开启的爬坑之路：获取浏览器定位getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( res=>{ const lat = res.coords.latitude; const
2021-04-29 13:43:12
874
原创 px转换rem给宽高设值 -- 坑（js）
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的；rem是CSS3新增的一个相对单位，是以根元素的字体大小为基准计算的。通常情况下px转换rem时都以1:100的比例来方便计算（UI图：750 举例）// 根元素fsconst w = document.documentElement.clientWidth;document.documentElement.style.fontSize = w / (750 / 100) + 'px'/* 元素: f..
2021-04-13 18:33:04
475
原创 vue 使用scss报错
在vue项目中使用scss页面代码：<stylelang="scss"scoped>执行：npm install sass-loader node-sass报错:解决方案（指定版本号）：运行：npm uninstall sass-loader node-sass npm install sass-loader@8.0.2 node-sass@4.14.1...
2021-04-08 18:27:43
224
原创 localStorage、sessionStorage 和 cookie 区别
localStorage：存储用量可达5M或者更大；在所有同源窗口中共享，永久有效，除非手动清除；仅在客户端本地中保存，不会自动发送给服务器；适用场景：长期保存本地数据localStorage.getItem(name); // 获取localStorage.setItem(name,value); // 设置localStorage.removeItem(name); // 移除localStorage.clear(); // 清空所有信息sessionStorag..
2021-04-07 11:26:17
128
原创 ES6中 let 和 var 区别（作用域）
var — 定义变量具有函数级作用于【子域可访问父域，而父域不能访问子域】let — 定义的变量巨油块级作用域【外界无法访问】典型实例：for(var i = 0; i < 5; i++) { setTimeout(function() { console.log(i) // 输出值：5 }, 1000)}for(let i = 0; i < 5; i++) { setTimeout(function() { console.log(i) /.
2021-04-07 11:17:00
127
原创 字符串倒序
方法一：反转数组var str = "abcdefg"var newStr = str.split("").reverse().join("")方法二：遍历var str = "abcdefg"var newStr = ""str = str.spllit("")for(var i = str.length - 1; i >= 0; i--) { newStr = newStr + str[i]}...
2021-04-07 11:04:59
102
原创 Vue -- 二级路由params传参
内嵌二级路由 // router.jsimport Vue from 'vue'import Router from 'vue-router'const Home = () => import('@/views/Home.vue')const My = () => import('@/views/My.vue')Vue.use(Router)export default new Router({ routes: [{ path: '/home', ..
2021-03-11 18:29:34
449
原创 vue 修改网页
方法一：根据路由变化// router/index.jsconst routes = [...{ path: '/test', name: 'test', meta: { title: '测试标题' }, component: _import('test'),}...]router.beforeEach((to, from, next) => { if (to.meta.title) { document.t
2021-03-01 15:16:49
387
原创 查询数组字符串公共
function fn(obj) { let arr = obj[0] let str, newStr = '' for(let i = arr.length; i > 0; i--) { if(!str) { str = arr.slice(0, i-1) obj.forEach((item,index) => { if(str && index) { if(item.search(str) &l.
2021-02-24 11:14:34
85
原创 css 绘制爱心图形
<style>.heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate(-45deg);}.heart:after { background-color: pink; content: ""; bo.
2021-02-20 14:24:59
174
原创 nuxt 使用 rem
方法一： 安装：npm installamfe-flexiblepostcss-pxtorem -S// nuxt.config.jsexport default {...plugins: [ { src: './node_modules/amfe-flexible/index.js', ssr: false }, ...],build: { postcss: { plugins: { 'po...
2021-01-23 18:25:27
866
原创 图片转换为base64格式
/** * 路径转base64 * @param url 转换路径 * @returns {Promise<any>} */export function getUrlBase64(url) { return new Promise((resolve, reject) => { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr....
2021-01-22 11:01:31
203
原创 vue-cli创建项目后无法启动解决
vue-cli创建项目后运行npm install 无法生成node_modules文件，导致无法启动项目解决方案：执行：npm cache clean --force npm install执行完上述命令后发现node_modules终于生成拉~运行npm run dev即可启动...
2021-01-16 17:15:14
1163
原创 location.replace 替代路径兼容
当在ios中直接食用 location.replace 替代路径是完全可以的，但在安卓中却起不到替代的作用而变成了跳转，那么考虑到兼容性问题使用以下兼容：function replace() { if (history.replaceState) { // 安卓兼容 history.replaceState({}, document.title, url); location.reload(); //刷新 } else { locati.
2021-01-16 09:49:45
1279
原创 自定义css变量
自定义格式：-- 自定义名称.box { --change-color: pink;}.box p { color: var(--change-color);}
2020-11-27 15:37:44
62
原创 学习 -- day1（html5新特性）
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}语义化标签头部：<hader> 侧边栏：<aside> 底部：<footer> 内容：<article> 导航：<nav> 定义文档区域：<section>多媒体标签音频：<audio>支持mp3、wav、ogg三种音频格式，推荐mp.
2020-11-27 14:26:57
73
原创 App嵌套h5 -- 坑
1、绑定点击事件，子元素触发不生效； 解决方案：为绑定事件的原生添加cursor: pointer;把click事件替换为touchstart事件，或者click和touchstart两个事件并存2、苹果手机滑动卡顿问题；在滑动的页面上加上该样式：-webkit-overflow-scrolling:touch;...
2020-11-24 15:03:59
294
原创 小程序页面之间参数传递
第一种（在 onLoad 或 onShow接收参数）：<navigator url="../logs/logs?name={{name}}">跳转</navigator>或<view bindtap="toLogs">跳转</view>利用wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack方法进行跳转toLogs() { wx.red...
2020-08-01 17:52:57
346
原创 小程序、页面、组件 分别的生命周期
小程序全局：onLaunch：当小程序初始化完成时，会触发onLaunch（全局只触发一次）；onShow：当小程序启动，或从后台进入前台显示，会触发onShow；onHide：当小程序从前台进入后台，会触发onHide；onError：当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息。页面：onLoad：监听页面加载；onReady：监听页面初次渲染完成；onShow：监听页面显示；onHide：监听页面隐藏；o...
2020-08-01 16:51:29
347
原创 小程序授权登录
$checkAuthSetting 在全局检测授权情况：已授权 -->$getUserInfo 获取用户信息 —— 检测 seesion_key 状态（未过期） $getUserInfo 获取用户信息 —— 检测 seesion_key 状态（已过期）—— 调用微信$wxLogin 登录未授权 --> $getCurrentPageUrlWithArgsPromise 获取当前页面带参数的url —— 判断是否白名单（是） ...
2020-08-01 15:34:47
284
1
原创 学习：构造函数和普通函数
构造函数（用于新建实例对象）和普通函数区别：构造函数和普通函数创建方法是一样的，但一般构造函数首字母为大写；构造函数调用方式： 使用new关键字来调用，例 -- new Person()；普通函数调用方式：直接调用 person()；函数名与类名相同：例 Person() 构造函数，Person 既是函数名，又是这个对象的类名；内部用 this 构造属性和方法：function Person(name,job,age){ this.name=name;.
2020-08-01 14:28:04
194
原创 原型、原型链、原型链继承 理解
原型概念： 所有对象都有一个私有的 _proto_属性，而这个属性所对应的就是自身的原型；原型链概念： 所有对像都有一个私有的 _proto_属性，而这个属性所指向的就是原型对象，它的原型对象又会有自身的原型对象，层层向上直至原型对象为null，那么这一过程就形成原型链；我们通常比较容易混淆 prototype 和_proto_，那么他们有什么区别呢？prototype 属性：是函数所特有的，它是从一个函数指向一个对象，属于函数的原型对象，也就是这个函...
2020-08-01 14:02:47
263
原创 知识总结：大数据下性能优化
1、数据冻结：当数组或Object，并且数据无需修改的情况下，可使用 Object.freeze() 让性能大幅提升。在实际开发中，这种提升大约有5~10倍，倍数随着数据量递增；2、虚拟滚动：页面数据较多情况下，首次加载速度会非常慢，虚拟滚动就可以先渲染可视范围内的 dom，通过复用超出可视范围的 dom 来提高性能；创建虚拟盒子显示滚动条（虚拟盒子 高度 / 宽度 根据总数据长度和每条子元素的大小来确定）； 虚拟盒子根据可视区的盒子进行定位，以防把实际渲染内容挤出可视区； 实际渲...
2020-07-29 16:40:08
787
2
原创 开发总结：NuxtJs
安装：（使用 nuxt 提供的 starter 模板）npx create-nuxt-app demo-nuxt文件结构nuxt.config.js 配置： 引入css、js、首屏加载载入模块及配置：请求：npm install @nuxtjs/axios --save轻量转化时间插件：npm install @nuxtjs/dayjs --saveproxy代理，解决跨域：npm install @nuxtjs/proxy --save...
2020-07-28 11:31:37
1261
原创 变量提升
例一：console.log(str); // undefinedvar str = "123"变量提升即是将当前作用域的变量声明提升，当 "123" 赋值给 str 前就输出，浏览器默认把 var str 提取到 console 前但不赋值，即会输出 undefined。相当于：var strconsole.log(str); // undefinedstr = "123"例二：console.log(str); // undefinedvar str = "1...
2020-07-24 15:56:53
109
原创 css 水平、垂直居中简述
水平居中：text-align: center; 针对内联、内联块样式标签元素margin: auto; 针对不定宽度块标签元素// 绝对定位.parent { position: relative;}.child { position: absolute; left: 50%; transform: translateX(-50%);}// flex 弹性盒布局.parent { display: flex; justify-content:.
2020-07-23 11:32:11
66
原创 nuxt 使用 dayjs
npm install @nuxtjs/dayjs --save// nuxt.config.jsexport default {... modules: [ '@nuxtjs/dayjs', ... ], dayjs: { locales: ['en', 'ja'], defaultLocale: 'en' },...}使用：this.$dayjs().format('YYYY-MM-DD')...
2020-07-22 17:34:13
1268
原创 面试题总结一
http 状态码及作用 ？ 常用状态码： 101：切换协议，服务器根据客户端请求切换协议，只能切换到更高级的协议； 200：请求成功状态，一般用于GET与POST请求； 301：永久重定向，请求的资源被永久重定向到新的url中，浏览器也会自动定向到新url页面； 302：临时重定向，请求资源临时被重定向，客户端使用原有url； 304：未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日
2020-07-22 15:45:10
156
原创 https 请求慢的解决办法
不通过DNS解析，直接访问IP 解决连接无法复用 解决head of line blocking 队列的第一个数据包（队头）受阻而导致整列数据包受阻，使用http pipelining，确保几乎在同一时间把request发向了服务器。 详解：https://juejin.im/post/5e5b50eb6fb9a07cae136773#heading-10...
2020-07-21 16:44:41
1977
原创 undefined 和 null 区别及用法
1、undefined 和 null 有什么区别？ null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaNvar a = nullNumber(a) // 0var b = undefinedNumber(b) // NaN 典型用法：
2020-07-21 12:20:08
250
原创 面试题总结二
一、数组去重 Set去重 返回新数组，无法去重 {} var arr = [0, 0, 1, 1, true, true, false, false, undefined, undefined, null, null, NaN, NaN, 'a', 'a', {}, {}]// 方法一：Array.from(new Set(arr)) //[0, 1, true, false, undefined, null, NaN, "a", {}, {}]// 方法二：console...
2020-07-17 11:50:24
187
原创 多种数组去重方式
Set去重 返回新数组，无法去重 {} var arr = [0, 0, 1, 1, true, true, false, false, undefined, undefined, null, null, NaN, NaN, 'a', 'a', {}, {}]// 方法一：Array.from(new Set(arr)) //[0, 1, true, false, undefined, null, NaN, "a", {}, {}]// 方法二：console.log([......
2020-07-14 14:53:28
162
原创 Vue px转rem
常用：px2rem-loader、postcss-px2rem那么他们有什么区别呢？px2rem-loader可以把所有文件的px转换位rem 包括框架 postcss-px2rem 默认只转换内部css文件，可设置转换外部px2rem-loader 使用// build/utils.jsconst px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } }...
2020-07-14 10:12:38
240
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人