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预处理器

以上的代码会编译成：

.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 只作用于当前组件中的元素。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了：

// 编译前

// 编译后


// 编译后
.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.关于在微信浏览器里点击按钮保存图片的可行性

资料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 = '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问题的解决方法

• 参考
• 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);

浅谈 require.context方法

此方法有三个参数,

• 参数一:要查询的目录,上述代码指的是当前目录
• 参数二: 是否要查询子孙目录,方法默认的值为false
• 参数三:要匹配的文件的后缀,是一个正则表达式

0529

IOS 13.4版本长按二维码，无法识别二维码而是放大图片

加上

-webkit-touch-callout: none;

关于-webkit-touch-callout

• -webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示
• 当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。
• default：此值表示显示默认的callout
• none：此值表示禁用callout