2020年4月工作整理

题外：本月开始应公司项目的需求，陆续进入到前端开发，作为一个小白开始成长

0402

史上最强Android保活思路：深入剖析腾讯TIM的进程永生技术

0407

• App 黑白化实现探索，有一行代码实现的方案吗？
• App 黑白化实现探索2， 发现了一种更方便的方案，我被锤了！

js从input里面获取到的value一直是字符串类型

js取出来的就是字符类型,如果需要当成数值型处理的话,就用parseInt() parseFloat()这类转换函数转一下

0408

跨域

是指浏览器不允许当前页面的所在的源去请求另一个源的数据。源 指协议，端口，域名。只要这3个中有一个不同就是跨域。

#协议跨域
http://a.baidu.com访问https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
#域名跨域
http://a.baidu.com访问http://b.baidu.com；

为什么会存在跨域？是浏览器对javascript施加的安全限制

0413

使用axios发送json后台接收不到的问题
按照axios官网例子发起请求传递json，后台接受到的数据为空，后台不接受json对象的参数形式
解决办法：利用qs模块转换参数。axios中的qs介绍

0414

Cannot read property ‘matched’ of undefined

在vue项目中，在配置路由的时候，引入路由文件后的命名上出现了问题，router 才是Vue实例化的配置字段名称，写成了Router，Vue不认识了

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Router from './router/index.js'
Vue.use(VueRouter)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  Router,//这是错误的写法 应该是router或者router:Router
  template: '<App/>',
  components: { App }
})

0415

flex竖布局下。左边是一个设置了宽度的div，右边是一个自动占用全部空间的div。当这个时候右边的宽度超出剩余空间的时候会占用其它空间将左边的div挤小。
解决办法是：给左边的div设置最小宽度min-width

0424

CSS样式中文字的换行

css中强制换行有下面三个属性word-break、word-wrap、white-space

• word-break

normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。
            该值适合包含一些非亚洲文本的亚洲文本。
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。
           适合包含少量亚洲文本的非亚洲文本。

• word-wrap

normal：控制连续文本换行。
break-word：内容将在边界内换行。

• white-space

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

关于Vue中子组件的prop值更新的问题

Avoid mutating a prop directly since the value will be overwritten 
whenever the parent component re-renders. 
Instead, use a data or computed property based on the prop's value. 
Prop being mutated: "grants" (found in component )

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（父组件更新，子组件中的prop值也会更新，但子组件不能修改由父组件传递过来的值）
解决办法：

• 利用计算属性的get方法拿到prop值
• 在利用set方法将这个值传给父组件

// 子组件
<van-dialog
  class="qr_code"
  v-model="showDialog_"
  width="274px"
  :show-confirm-button="false"
  :show-cancel-button="false"
  :close-on-click-overlay="true"
>
// ...js
props:{
  showDialog:Boolean
}
computed:{
  showDialog_:{
    get(){
      return this.showDialog
    },
    set(val) {
      this.$emit("on-show-change", val)
    }
  }
}

// 父组件
<QRCodeDialog :showDialog="show" @on-show-change="changeShow"></QRCodeDialog>

methods: {
    。。。
    changeShow(val) {
      this.show = val
    }
  }

vue-clipboard2

复制内容至剪切板 文档

0428

vue 路由 按需 keep-alive

https://blog.csdn.net/namechenfl/article/details/90370596

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

 <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

0429

‘wx’ is not defined no-undefine

eslintrc检查出的报错，解决办法，在.eslintrc.js文件中加入以下内容

globals: { wx: true }

再重启服务