2020年5月工作整理

编程入门行业动态更新时间:2024-10-16 02:29:05

2020年5月<a href=https://www.elefans.com/category/jswz/34/1771444.html style= 工作整理"/>

2020年5月工作整理

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 监听客户端物理返回键

0512

微信网页授权之后，导致jssdk 的wx.config 签名错误

vue项目在进行微信公众号授权和jssdk配置的时候，在没有获取网页授权登录的时候，wx.config配置可以正常通过，但是当获取网页授权之后再去进行wx.config配置之后就会显示签名错误。多次测试发现，根据官方文档，发现有一个地方有点奇怪

奇怪点

正常情况下，如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
事实上，在vue项目中授权之后的跳转页面是这样的

/?code=CODE&state=STATE#/aihome
// 这种情况下，再次刷新URL会导致wx.config的签名错误

我设置的redirect_uri是下面这样的

redirect_uri = /#/aihome

按照官方文档应该在我设置的redirect_uri后面加上?code=CODE&state=STATE才对，也就是下面这样的

/#/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);// 这样地址就会变成我们想要的地址了
/#/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.关于在微信浏览器里点击按钮保存图片的可行性

资料1

资料2

资料3

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 = '.php?id=1111111111&web_id=1111111111'script.language = 'JavaScript'document.body.appendChild(script)},watch: {'$route' () {if (window._czc) {let location = window.locationlet contentUrl = location.pathname + location.hashlet refererUrl = '/'window._czc.push(['_trackPageview', contentUrl, refererUrl])}}}
}

0525

Vue项目中出现Loading chunk {n} failed问题的解决方法

参考
SPA Loading chunk xxx 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);