0506
1.Window localStorage 属性
使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上:
// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
// 删除数据
localStorage.removeItem("key");
定义和使用
- localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
- localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
- localStorage 属性是只读的。
localStorage 的局限
- 1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
- 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
- 3、localStorage在浏览器的隐私模式下面是不可读取的。
- 4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
- 5、localStorage不能被爬虫抓取到。
提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
2.在vue内，使用vant组件样式覆盖失效的问题
解决方法一：
对于模板中引入第三方UI框架的样式如何改写, 正确方式是写一个优先级高于原组件的全局样式来覆盖默认样式
// 需要去掉scoped
<style lang="stylus">
.repair-loading.van-toast {
width: 130px;
}
</style>
解决方法二：
- 如果使用的是stylus预处理器
<style scoped>
.evaluation-swipe >>> .van-swipe__indicator {
background-color: black;
}
</style>
以上的代码会编译成：
.evaluation-swipe[data-v-0e092fdb] .van-swipe__indicator {
background-color: #000;
}
- 如果使用的是Less或Sass等预处理器
无法>>>正确解析，在这些情况下，您可以使用组合/deep/或::v-deep组合 ，两者都是别名，和>>>工作完全相同
.van-radio {
/deep/ .van-radio__label {
width: 500px;
}
}
关于CSS的Scoped私有作用域和深度选择器
style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了：
// 编译前
<style scoped>
.example {
color: red;
}
</style>
// 编译后
<style>
.example[data-v-f3f3eg9] {
color: red;
}
看完你肯定就会明白了，其实是在你写的组件的样式，添加了一个属性而已，这样就实现了所谓的私有作用域。但是也会有弊端，考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。所以，在你的样式里，进来避免直接使用标签，取而代之的你可以给标签起个class名。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>
<style scoped>
.parent >>> .child { /* ... */ }
</style>
// 编译后
.parent[data-v-f3f3eg9] .child {
/* ... */
}
而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：.parent /deep/ .child { /* … */ }
3.父调子组件方法
父：
<child ref="childMethod"></child>// 在父组件中给子组件指定ref
子：
method: {
test() {
alert(1)
}
}
// 在父组件里调用test即 this.$refs.childMethod.test()
4.vue 监听客户端物理返回键
https://www.jianshu.com/p/2ac9e40292ff
0512
微信网页授权之后，导致jssdk 的wx.config 签名错误
vue项目在进行微信公众号授权和jssdk配置的时候，在没有获取网页授权登录的时候，wx.config配置可以正常通过，但是当获取网页授权之后再去进行wx.config配置之后就会显示签名错误。多次测试发现，根据官方文档，发现有一个地方有点奇怪
奇怪点
正常情况下，如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
事实上，在vue项目中授权之后的跳转页面是这样的
http://xxx.xxx.mobi/?code=CODE&state=STATE#/aihome
// 这种情况下，再次刷新URL会导致wx.config的签名错误
我设置的redirect_uri是下面这样的
redirect_uri = http://xxx.xxx.mobi/#/aihome
按照官方文档应该在我设置的redirect_uri后面加上?code=CODE&state=STATE才对，也就是下面这样的
http://xxx.xxx.mobi/#/aihome?code=CODE&state=STATE
// 这种情况下，再次刷新wx.config签名可以顺利通过
为什么#号后面的路由会跑到url的最后面呢？也有位仁兄和我遇到一样的问题，点击查看
官方的解释是：将**#放到后面才是符合对应的url规则的**
解决方法
根据这位前辈提供的解决方法，可行的
微信把#号后面的参数混淆了（位置错乱了，这在vue项目中是严重的，因为vue项目把#号后面的参数当做是路由，现在微信返回的路由错乱，肯定会出问题）
最后我决定静默把这个地址修复成我想要的url地址，并且页面不发生刷新（利用window.history.pushState方法，和vue的hash路由原理一样）
//把微信打乱的url地址静默修复
var changeUrl=`${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.hash}${window.location.search}`;
window.history.pushState({},0, changeUrl);
// 这样地址就会变成我们想要的地址了
http://xxx.xxx.mobi/#/aihome?code=CODE&state=STATE
这样还有一个好处，是不会增加一次页面的刷新
0513
vue中computed计算属性无法直接进行传参
如果有传参数的需求，比如循环里想动态设置图片的名称可以使用闭包实现
<div v-once class="case_item" v-for="(item, index) in 3" :key="index">
<van-button class="tag_item" color="#394065" size="mini" mark type="primary">AI修复</van-button>
<div class="case_item_tag">
<van-image height="100%" radius="4" :src="smallImageBefore(index+1)" />
<van-image radius="4" height="100%" :src="smallImageAfter(index + 1)" />
</div>
</div>
。。。
computed: {
smallImageBefore() {
return function(index) {
return `../../../static/icon_small_before_${index}.png`
}
},
smallImageAfter() {
return function(index) {
return `../../../static/icon_small_after_${index}.png`
}
}
}
0518
1.iOS新版微信底部工具栏遮挡问题完美解决
2.关于在微信浏览器里点击按钮保存图片的可行性
0520
1.Chrome DevTools中的这些骚操作，你都知道吗？
- 文档
- 重新发起xhr请求
- 编辑页面上的任何文本：在控制台输入document.body.contentEditable="true"或者document.designMode = 'on’就可以实现对网页的编辑了。
- 在低端设备和弱网情况下进行测试：轻松调节CPU功能和网络速度
2.axios拦截器判断401 / 全局给header添加token
3.微信网页分享，用户通过分享链接进入，wx.config 签名失败的问题
微信分享出去之后会在url后面加上下面参数
对于IOS系统会自动增加如下参数：
- 朋友圈 from=timeline&isappinstalled=0
- 微信群 from=groupmessage&isappinstalled=0
- 好友分享 from=singlemessage&isappinstalled=0
对于安卓系统会自动添加如下参数：
- 朋友圈 from=timeline
- 微信群 from=groupmessage
- 好友分享 from=singlemessage
解决办法：就是前端传给后端用来签名的URL需要加上encodeURIComponent
0522
vue单页面之友盟代码统计
在入口App.vue中添加代码
export default {
name: 'app',
mounted () {
const script = document.createElement('script')
script.src = 'https://s95.cnzz.com/z_stat.php?id=1111111111&web_id=1111111111'
script.language = 'JavaScript'
document.body.appendChild(script)
},
watch: {
'$route' () {
if (window._czc) {
let location = window.location
let contentUrl = location.pathname + location.hash
let refererUrl = '/'
window._czc.push(['_trackPageview', contentUrl, refererUrl])
}
}
}
}
0525
Vue项目中出现Loading chunk {n} failed问题的解决方法
0528
前端获取文件夹下所有图片集合
const requireContext = require.context('./image', true, /^\.\/.*\.png$/);
let iconImages = {};
requireContext.keys().map(req => {
let iconName = req.split('./')[1];
iconName = iconName.split('.')[0];
const iconNameObj = {};
iconNameObj[iconName] = require(`./image/${iconName}.png`);
iconImages = {
...iconImages,
...iconNameObj,
};
return {
iconName: require(`./image/${iconName}.png`),
};
});
console.log('requireContext', requireContext, requireContext.keys(), iconImages);
浅谈 require.context方法
此方法有三个参数,
- 参数一:要查询的目录,上述代码指的是当前目录
- 参数二: 是否要查询子孙目录,方法默认的值为false
- 参数三:要匹配的文件的后缀,是一个正则表达式
0529
IOS 13.4版本长按二维码，无法识别二维码而是放大图片
加上
-webkit-touch-callout: none;
- -webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示
- 当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。
- default：此值表示显示默认的callout
- none：此值表示禁用callout
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
