blog station

天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。

发表于 更新于 分类于 本文字数： 2.1k 阅读时长 ≈ 2 分钟

1.ios键盘唤起，键盘收起以后页面不归位解决

  • 现状：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
  • 原因：固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
  • 解决方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <input @blur.prevent="blur()"/>
    <script>
    blur(){
       let u = navigator.userAgent;
       let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
       if(isIOS){
         setTimeout(() => {
           const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
           window.scrollTo(0, Math.max(scrollHeight - 1, 0))
           }, 200)
       }
     }
    </script>

2.安卓弹出的键盘遮盖文本框

  • 现状：安卓微信H5弹出软键盘后挡住input输入框
  • 原因：因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了
  • 解决方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <input @focus="focus()"/>
    <script>
    focus(){
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      if(isAndroid){
        setTimeout(function() {
          document.activeElement.scrollIntoViewIfNeeded();
          document.activeElement.scrollIntoView();
        }, 500);
      }
    }
    </script>

    Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

阅读全文 »

发表于 更新于 分类于 本文字数： 2k 阅读时长 ≈ 2 分钟

刮奖

发表于 更新于 分类于 本文字数： 726 阅读时长 ≈ 1 分钟

css自定义属性

CSS自定义属性 对于很多前端同学可能并没有接触过，甚至没有听说过，但如果说CSS的变量，估计就很多同学有听说过。但这里再次强调，我们应该纠正这样的说法：
CSS没有变量，没有变量，没有变量；只有自定义属性，只有自定义属性，只有自定义属性！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- HTML -->
<div>我是什么颜色？</div>
<p>那我是什么颜色？</p>
<div class="alert">我又是啥颜色？<p>那我呢？</p></div>
<!-- CSS -->
<style>
:root{
    --color:red;
}
div{
    --color:yellow;
}
.alert{
    --color:blue;
}
*{
    color:var(--color);
}
</style>
  • :root表示是在根元素上声明的，–color: red，将会影响所有的元素
  • div是一个标签元素选择器，其声明的–color: yellow将会影响所有div元素以及他的后代元素
  • .alert是一个类选择器，其声明的–color: blue会影响类名为.alert的元素以及其后代码元素所以在第一个div的文本颜色是一个yellow(它覆盖了:root的red颜色)；第一p的文本颜色是red（运用了:root的red色），第二个div.alert以及它的子元素p的文本颜色是blue（运用了.alert中的blue）。
阅读全文 »

发表于 更新于 分类于 本文字数： 2.1k 阅读时长 ≈ 2 分钟

主要记录了js中不常用的一些技巧和逻辑

1.js中 && 和 & ，|| 和 | 的区别：

&&
1
console.log(1 && 2); // 2
阅读全文 »

发表于 更新于 分类于 本文字数： 386 阅读时长 ≈ 1 分钟

fiddler官方文档

1.IOS使用Fiddler抓包配置

1.点击 Tools > Options 确保选中允许远程客户端连接,端口默认8888：

2.将鼠标悬停在Fiddler工具栏最右侧的在线指示器Online上，以显示分配给Fiddler机器的IP地址:

阅读全文 »

发表于 更新于 分类于 本文字数： 2.4k 阅读时长 ≈ 2 分钟

1.微信授权登录(拿到用户微信信息)

详见
首先判断微信环境：

1
2
3
4
5
6
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
    return true;
} else {
    return false;
}

其次带参跳转微信授权链接:

阅读全文 »

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟
  • 就放到vue分类下把^_^

感觉压缩后还是有损的，记录下，唯一的优点应该就是可以一键压缩项目中的所有图片了。。
相关插件地址：
imagemin
MozJPEG jpg图片压缩插件
pngquant png图片压缩插件

1.要使用 imagemin，请确保已安装了 Node.js，然后打开终端窗口，cd 到项目的文件夹，并运行以下命令：

1
2
3
4
5
6
//安装图片压缩imagemin插件
npm install imagemin
//使用 MozJPEG 插件压缩 JPEG
npm install imagemin-mozjpeg
//使用 pngquant 插件优化 PNG 图像
npm install imagemin-pngquant
阅读全文 »

发表于 更新于 分类于 本文字数： 2.7k 阅读时长 ≈ 2 分钟

文件上传（支持PDF格式文件上传）以文件流的形式上传到接口

1
<input type="file" id="CarDamageFile" class="g-core-image-upload-form" value="" accept="image/gif,image/jpeg,image/jpg,image/png,application/pdf" data-type="back-page" name="Pictures" multiple="multiple" @change="imagechanged($event,Udata[7])" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//文件上传
wrongTip(data){
  console.log(data)
},
imagechanged(e, data) {
//参数e为当前上传的表单，data为要处理的数据
    var that = this,
      _data = that.Udata,
      fileList = e.target.files;
    data.count = 0;
    if (fileList.length > 5) {
      that.wrongTip("每项最多上传5张");
      return;
    }
    if (fileList) {
      for (var i = 0; i < fileList.length; i++) {
		//遍历上传的文件，一个一个处理
        that.readFile(fileList.length, fileList[i], data);
      }
    }
  },
  readFile(num, res, Sdata) {
//num为上传文件数量，res为上传文件数据，Sdata为要处理数据
    var that = this,
      _data = that.Udata,
      Ename = Sdata.Ename,
      render = new FileReader();
    if (res.type != "application/pdf" && res.size / 1024 > 10240) {
      that.wrongTip(
        "材料仅限pdf. jpg .gif .png格式，单个图片大小不超过10M，单个PDF大小不超过4.5M，每项最多上传5张。"
      );
      return;
    } else if (res.type == "application/pdf" && res.size / 1024 > 4608) {
      that.wrongTip(
        "材料仅限pdf. jpg .gif .png格式，单个图片大小不超过10M，单个PDF大小不超过4.5M，每项最多上传5张。"
      );
      return;
    } else {
      render.addEventListener(
        "load",
        function() {
          var src = this.result;
          var formData = new FormData();
          var index = this.index;
          var _fileName = res.name;
          formData.append("fileUrl", res);
          formData.append("fileName", _fileName);
          Sdata.loading = true;
          Basic.ajaxReturnPromise({
            type: "POST",
            apiUrl: "/Comment/UploadImg",
            customLoading: true,
            param: formData,
            emulateJSON: false
          }).then(
            response => {
              if (response.IsSuccess) {
                ++Sdata.count;
                var data = response.data;
                if (Sdata.imgSrc.length + data.length < 6) {
                  Sdata.curImg = parseInt(Sdata.curImg + 1);
                  // Sdata.imgSrc.shift();
                  for (var i in data) {
                    if (data[i].BaseUrl.toLowerCase().indexOf(".pdf") != -1) {
                      Sdata.imgSrc.unshift({
                        picUrl: "https://h5-fe.huizuche.com/claim/PDF.png",
                        url: data[i].BaseUrl,
                        name: _fileName
                      });
                    } else {
                      Sdata.imgSrc.unshift({
                        picUrl:
                          data[i].BaseUrl +
                          "?x-oss-process=image/resize,m_fill,h_78,w_78",
                        url: data[i].BaseUrl,
                        name: _fileName
                      });
                    }
                  }
                  that.$store.dispatch(Sdata.store, {
                    [Ename]: Sdata.imgSrc
                  });
                } else {
                  that.wrongTip("每项最多上传5张");
                }
              }
              if (Sdata.count == num) {
                Sdata.loading = false;
              }
            },
            err => {
              that.wrongTip("文件上传失败，请重新上传");
            }
          );
        },
        false
      );
      render.readAsDataURL(res);
    }
  }

发表于 更新于 分类于 本文字数： 4k 阅读时长 ≈ 4 分钟

vue微信分享

1.页面中引入微信分享JS文件 或者 执行npm install weixin-js-sdk --save命令安装js包

1
2
3
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- or -->
`npm install weixin-js-sdk --save`安装

原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。
请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。

阅读全文 »

发表于 更新于 分类于 本文字数： 3.6k 阅读时长 ≈ 3 分钟

axios实现vue异步请求 + 封装

安装axios && vue-axios : npm install –save axios vue-axios

1.封装不同类型的请求（get,post..）,api/helpers.js配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
class request {
    constructor() {
        //定义请求接口地址对象，一个是开发环境地址，另一个就是线上地址
        this.urlMap = {
            development: '/dev',
            production: '/product'
        }
    }
    //get请求
    Get(obj) {
        //封装一层promise，一来可以把接口数据.then出去，二来解决嵌套请求的回调问题
        return new Promise((resolve, reject) => {
            //发起axios请求
            Vue.axios(
                //利用ES5的浅拷贝Object.assign自动增删传入的对象
                Object.assign({}, {
                    method: "get",
                    //设置请求头来区分请求数据类型，formdata || json
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
                    },
                    //`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
                    baseURL: this.urlMap[process.env.NODE_ENV]
                }, obj)
            ).then((res) => {
                resolve(res.data)
            }).catch((e) => {
                reject(e)
            })
        })
    }
    //post请求
    Post(obj) {
        //封装一层promise，一来可以把接口数据.then出去，二来解决嵌套请求的回调问题
        return new Promise((resolve, reject) => {
            Vue.axios(
                Object.assign({}, {
                    method: "post",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
                    },
                    baseURL: this.urlMap[process.env.NODE_ENV],
                    // `transformRequest` 允许在向服务器发送前，修改请求数据
                    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                    // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
                    transformRequest: [(data) => {
                        // 对 data 进行form-data处理，这个只针对后端还需要formData格式数据，如果是json则简单许多，无需区分请求方式
                        let rData = ''
                        for (let i in data) {
                            rData += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
                        }
                        //字符串最后多了个&符号，截取掉
                        return rData.substr(0,rData.length-1)
                    }]
                }, obj)
            ).then((res) => {
                resolve(res.data)
            }).catch((e) => {
                reject(e)
            })
        })
    }
}
export {
    request
}
阅读全文 »
0%