Jensonhui's Blog

关于Input【type=number】可以输入e问题及解决方案

网页授权快照bug 网页授权如何判单是否进入了快照模式？微信授权快照问题？微信端链接加了游客访问页，弹授权，依然会进入快照页？ vue + H5 + history 拉取微信用户授权

Vue项目如何为全局添加页面水印

vue2.x + better-scroll2.x 封装列表上滑，下滑行为操作，安装即用，功能可以扩展，附API地址

JS实现树形结构数据的模糊搜索查询

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。

策略模式 （Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法，Js表单多规则校验，多规则表单校验优化

Vue中使用v-for循环input时，出现输入一个字符，自动失去光标（一次只能输如一个字符）

使用vue3.0，想通过 useRoute, useRouter来获取路由参数报错undefined； vue3.0获取query、params报错undefined;

JavaScript中Date对象在IOS中的问题；[Vue warn]: Invalid prop: custom validator check failed for prop "minDate"；Error in mounted hook: "RangeError: Array size is not a small enough positive integer."

浏览器报wisentPlatformWeb错误

Vue-h5调用jssdk, 安卓的微信中h5分享没问题，ios中分享报错the permission value is offline verifying

H5微信授权登录后 IOS物理返回键，左滑会回退到微信重定向页面

Vuex 刷新数据丢失解决方案，重置 Vuex-state数据

H5前端实现移动端手写Canvas签名(横竖屏)；canvas画布旋转精度丢失；通过window.resize或window.orientation判断横屏竖屏状态；​Signature_Pad实现手写签名；javaScript旋转Base64图片并得到新的base64数据；

Vue搭建项目时候使用的node-sass(5.0.0) 和 sass-loader(10.1.0)，同事服务器安装部署打包时出现上述错误，目测为版本不兼容导致，于是在node-sass Issues中找到了答案： 由于我本地使用node版本为12.0.1，服务器为较新的16.0.1，所以出现了兼容问题解决方案：一：升级node-sass到最新版本即可（在用方案）npm uninstall node-sassnpm install node-sass@6.0.1二：

题目一面试中，我经常会考察如何实现原型继承，再下一步才是考察原型链，一般我会写出下面的代码，然后让大家绘制原型链class A {}class B extends A {}const b = new B();面对这个题，我们先来绘制b和B的原型链，这里面涉及到三个对象分别是b,B和B.prototype，相信大部分同学能够画清楚这几个的关系，由于是面试中只有笔和纸，又要清晰快速，所以我们可以像下面这样画，箭头代表关系，箭头上面的字代表属性名字上面包...

vue开发直接@focus，html页面需动态绑定focus事件vue为例：<input type="text" @focus="scrollViewPosition" />scrollViewPosition () { try { if (document.activeElement.tagName === "INPUT") { // 安卓下可能有延迟 setTimeout(() => { document.activ...

查看组件里引用的变量是否正确：由于是用的 export const emitter，其他组件里import 时候没有加 { }, 导致报错import emitter from '@/components/xxxxxxx.vue'改成import { emitter } from '@/components/xxxxxxx.vue'...

场景： 【ios内嵌加载h5页面】A页面加载数据 ---> 跳转B页面后返回 --> A页面重新请求加载问题：上述场景步骤后，返回A页面会显示一部分白屏，随意滑动页面后，页面显示完整（android下没事）分析：可能跟ios回弹效果有关系，iOS WebView加载网页触摸白屏bug排查解决：方案一：（未使用）html, body { width: 100%; height: 100%; margin: 0; padding: 0; position:

Android: 1) window.WebViewJavascriptBridge[methodName](params) 2) window.android.methodNameIOS: 1) window.webkit.messageHandlers[methodName].postMessage(params) // 无法获取原生返回值 2) window.prompt(message, default) // 可以获取到返回值...

最近平台接结构，通过版本号+机构号判断跳转相应的页面，于是乎踩坑了.....一番搜索后发现，强制装换string类型用 ‘===’ 比对会返回false，原因移步：JS字符串比较区别1. 关于js字符串比较：”== “ “===”，列：Var a=”abc”;Var b=”abc”;Var c=new String(“abc”);Var d=new String(“abc”);（1） a=== b => true，没有创建实列对象，应该是指向默认创建的对象，只要值相...

## 1. 项目背景(需求)为了保证数据传输的安全性，利用AES+RSA混合加密，配合后端实现数据交互加密项目环境：vue + axios## 2. 加密过程(流程） ## 3. 实现过程(代码）AES对称加密我们采用CryptoJS，AES加密支持AES-128、AES-192和AES-256(AES传送门)RSA非对称加密我们采用JSEncrypt，(RSA传送门​​​​​​​)第一步：npm安装两个库npm i crypto-js jsencr...

配置参考 | Vue CLI// vue.config.jsconst path = require('path')const resolve = (dir) = >path.join(__dirname, dir)const CompressionWebpackPlugin = require("compression-webpack-plugin") // 开启gzip压缩， 按需引用const productionGzipExtensions = /\.(js|css|js..

需求背景：A页面通过query: { sno: xxxx } 跳转到B页面B页面通过接收sno参数，请求获取数据：// 查询商品详情, 在created生命周期调用async getGoodsInfo () { const res = await this.$post(this.$url.goods.gooddetail, { sno: this.$route.query.sno })}B页面底部有相关产品列表，点击产品动态改变当前query中的sno值：//

需求背景： 用户访问网站路径为 [ 首页 → 商品详情页 → 首页]， 此时需要缓存首页，再次返回到首页，需要展示到上次浏览的锚点位置解决方案：1：router + keep-alive缺陷：一旦缓存后，无法销毁，占用内存大致步骤：1 路由meta中添加一个标识： meta: { title: ''， isKeepAlive: true }2 app.vue中使用keep-alive <keep-alive :max="10"> <rou..

Vue执行npm run build打包，提示warning “couldn't fulfill desired order of chunk group(s) pages_user_index”执行环境：@vue/cli 4.3.1nodev12.16.2提示原因：无法完成所需的块组顺序，也就是组件引入时候的先后顺序不一致解决方案：查看报错信息，找到提示的.vue组件名，全局搜索，把引入的先后顺序调整为一致即可...

动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。......

@vue/cli 4.3.1vue-router: ^3.3.1使用路由重定向做了登录验证后, 报错Error: Redirected from “/login” to “/index” via a navigation guard.解决方案:1. 将 vue-router 版本降到 3.0.7 (没有测试)2. 在 route.js 下粘贴一下代码// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard..

懒人专属 , 没找到合适的, 就自己花时间写了一个, 性能待测试使用场景 : H5APP开发, 需要有版本更新, 此时需要对比版本显示下载状态备注 : 暂时不支持带有ab形式, 如: 1.8.2a, 1.8.3bconst olds = '1.8.1'const news = '1.8.3'let getVersion = { splitVersion : function (oldval, newval) { // 校验是否传入参数 if (!oldval || !newv..

​​​​骨架屏简洁简介:骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案插件简介:vue-skeleton-webpack-plugin一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏...

使用vue3后没有了build文件夹, 所以想用vue2.x的命令初始化webpack, 这里就需要用到vue/cli的桥接工具:安装桥接工具 : ( 此时你的vue版本应该是最新3.x )npm install -g @vue/cli-init奇怪的问题发生了 .....Error: EPERM: operation not permitted, mkdir 'C:\Pr...

微信IOS公众号JSSDK，第一次签名失败，刷新后签名成功（99%的原因是签名URL不一致）；H5使用History模式调用微信分享；报错invalid url domain, 检查公众号是否配置域名正确；报错invalid signature, 大部分是路径的问题, 检查下传值路径是否和配置的域名对应

效果跟头条的Tab跟随差不多,暂时没有实现tab始终固定在中间显示 ! 后期优化吧 ~没有找到合适的插件, 采用了VUE的 Transition + v-touch 以及 Animate.css 手写实现 !( 图片是借的, 效果类似)传送门-Gighub =>使用注意:移动端滑动, v-touch 需要进行脚手架依赖安装才可以使用1 . cnpm install...

实现背景，table没有分页，这是前提！！1 . 如果后台有接口，直接改动完把列表list提交给后端2 . 如果没有后台，增加权重字段，提交到后端3 . 上下移动，实际就是操作数组list的顺序index基于element-ui框架：================ data =================== HotTableList:[] =====...

Taro - 由京东凹凸实验室维护的一款基于React语法的多端框架，传送门=>https://taro.aotu.io/踩坑系列：1 . 编译报错 TypeError: Cannot read property 'isWatch' of undefined解决方案：taro update selftaro update project// 相当于更新节点 和...

// oldArry{ "modelist": [ { "parentid": 1, // 父级id "menuItem": [ { "id": 12, "name": "测试数据一" } ] }, { "parentid": 1, // 父级id...