莉丝前端

pyQT5使用QNetworkAccessManager请求多个接口

Sun, 14 Aug 2022 16:56:35 +0800

访问多个接口是每个项目都一定会经历的事情。

在使用pyqt5的时候要求QNetworkAccessManager，然后使用信号/槽

self.networkAccessManager.finished.connect(self.requestFinished)

但是这就导致一个问题，如果访问多个接口每个接口的处理方式不一样，最傻瓜的方法就是在处理以后disconnect掉。

太傻了

百度+谷歌基本查不到解决方法。

经过研究和时间，得到最优的解法

self.serverRequestReply = self.networkAccessManager.get(QNetworkRequest(QUrl('http://www.xxx.com')))
self.serverRequestReply.finished.connect(self.serverRequestFinished)

def serverRequestFinished(self):
        self.serverRequestReply.....
        # 请求的内容在self.serverRequestReply中，不用在额外传参了

关于在midwayjs下如何返回svg

Tue, 14 Sep 2021 07:34:02 +0800

因为需要有些新用户没有上传头像的喜欢，但是我又不愿意使用默认头像，毕竟人都想差异化，于是借用了@nimiq/identicons（以下简称identicons）生成动态头像；

但是框架是midwayjs，上下文ctx是egg的。

查询文档发现可以通过 @ContentType 修饰器修改返回类型；

于是考虑返回的时候应该为base64编码，所以调用identicons的toDataUrl，返回，然后并不显示。

查询返回的数据发现，响应体直接修改如下，后面不接数据

data:image/svg+xml;base64,

尝试替换流，发现流编码可以顺利进入响应报文中，但依然不显示。

大胆猜测，设置了contentType后不必重新声明base64编码第一个逗号之前的东西，于是找了一个图标生成base64去掉逗号以前，发现

居然被编码了，返回内容如下

data:image/gif;base64,UjBsR09EbGhJQUFnQUxNQUFBQUFBUC8vLy8vL0FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQ0g1QkFFQUFBSUFMQUFBQUFBZ0FDQUFRQVJvVU1oSnE3MVlnQkNBNTJEWUFWbHBhaHg1VXAvb3JYQnNiUzVHcXpKZTBaM3MvOENaVHVJcERsYzgwSkYzdkNSRHpWdlFsb294amNubWRNdnRlb0ZhN2diWGdvYWRvaFFXaXF5aHE2WW5mRGEzWWJIMDNoZWw5MHB6ZlJOTVBtVnBJMXQzZTRxTFhoRUFPdz09

目标内容如下

data:image/gif;base64,R0lGODlhIAAgALMAAAAAAP//////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAIALAAAAAAgACAAQARoUMhJq71YgBCA52DYAVlpahx5Up/orXBsbS5GqzJe0Z3s/8CZTuIpDlc80JF3vCRDzVvQlooxjcnmdMvteoFa7gbXgoadohQWiqyhq6YnfDa3YbH03hel90pzfRNMPmVpI1t3e4qLXhEAOw==

观察发现，自动将内容进行一次base64，所以相应的只需要把svg直接返回，而不需要手动base64后返回，完整代码如下

  @Get('/avatar')
  @ContentType('image/svg+xml')
  async avatar(@Query('text') text: string) {
    const Identicons = require('@nimiq/identicons').default;
    //toDataUrl是转base64，svg是svg数据
    const base64 = await Identicons.svg(text || uuid());
    this.ctx.body = base64;
  }

lodash之throttle和debounce的理解

Tue, 05 May 2020 08:07:38 +0800

lodash是一个很不错但是很重的类库，它集合了很多实用但不常用的方法。这里主要介绍下我对throttle（节流）和debounce（防抖）的理解。

项目底层主要是uni做的app，因为在安卓机或者低版本的ios手机上，用户点击某个按钮转入下个页面的时候，可能会有100~200的延迟。这就导致一些用户手抖的时候会多点一次。所以需要用到防抖-debounce；

如何正确使用防抖-debounce/节流-throttle；

以下在没有特殊表明下lodash类用“_”代替

lodash.debounce是一个包装方法，参数是一个Func即一个方法，返回是一个方法，需要执行才可以运行Func；

let m = _.debounce(function(){
//插入代码逻辑
},1000)

但是这里的并不会正常执行，你需要

m();

但是在vue下怎么实现。

根据我的需求，我需要写一个跳转页面的方法，基本代码如下。

m(){
_.debounce(function(){
 //插入代码逻辑 
},1000)
},
toPage(){this.m()}

狂点按钮，无效，依旧反复打开同样的页面！

以上是一个错误的例子，用面向对象的思路去理解，如果有效那才奇怪。

每次执行toPage的时候都去实例化（并非真的实例化，只是给你们一个形象的理解）一个新的对象，那每个对象相互独立，肯定不会相互约束。正确的写法如下；

toPage: debounce(
function(e) {
//插入代码逻辑
},
1000,
{
leading: true,
trailing: false
}
),

这里有个要注意的，在es6下我们可以去写“=>”这样的箭头函数方便闭包的时候，运用正确的上下文。但是在lodash，中已经把正确的上下文apply进去了，所以这里直接使用function()而不用()=>{}。否则，this的上下文就不是Vue了；

按需引入

另外lodash这个包很大，我们没必要全部引入，官方似乎提供了cli，构建我们需要的方法，但是我不会用！！！！！！！！但是lodash也提供了部分引入的方法

import debounce from 'lodash/debounce';

这样在构建的时候就可以仅仅引入需要的部分。

节流-throttle的写法也是类型，这里不再赘述，我们谈一下这两种的区别。

	防抖-debounce	节流-throttle
用处	防止用户手动或者代码延迟导致重复操作	减少一段时间内反复执行某代码段
延迟（假定设置3000ms延迟）	触发并成功执行代码逻辑一次，3000ms内不再次触发，则3000ms后再次触发，会正常执行代码逻辑。若3000ms内被触发，则从当前触发开始，重新计算3000ms。如此循环	3000ms触发一次，无论期间是否反复触发，3000ms后若再次触发，则正常执行代码逻辑。
理解	如果用户用户手抖，代码会等到这个用户手不抖，并延迟后在可以继续让用户操作	很简单的延迟操作

参数options

debounce和throttle都提供了options配置

{
leading:[Boolean],
trailing:[Boolean]
}

debounce和throttle表现均为一致，也就是leading=true下，在延迟开始就执行，trailing=true需要等到延迟接触才执行。

当leading和trailing均为true的时候，则在延迟之前和延迟之后都执行一遍。

使用场景

debounce

1、用户可能频繁点击按钮，造成不可预知的情况，比如切换页面，提交表单。

2、用户可能正在进行输入，但是需要在输入期间进行接口访问，比如查找，搜索等等。这时候需要等到用户不再进行操作才去请求，

throttle

1、因为功能需要，需要反复请求后端接口。比如socket推送相关通知，我接受到通知后请求相关接口，进行员工日志列表刷新，因为员工日志可能会在集中在某个时段提交，这个时段socket通知会很频繁，100ms一次，这样的逻辑，接口服务器负荷太重，所以我使用throttle每隔1000ms请求一次，并且trailing=true，确保我请求的是最后的数据

淘宝双12刷能量方法【2019年】，理论上可以永久有效【仅限android】

Thu, 05 Dec 2019 10:50:04 +0800

【更新由于格式化导致代码错误问题】

去年双11使用脚本，玩坏了淘宝，今年淘宝加入滚动判断。这样就很难在通过网页触发了。

不过，现在依旧可以使用某些方法完成代替人工的办法。

需要用到App【Auto.js】和一个脚本

[Download]

资源名称：Auto.js和脚本下载

下载地址：http://www.imcyk.com/download/Auto.js_v4.1.1.apk

下载地址：http://www.imcyk.com/download/auto-20191212.txt

[/Download]

1、在安卓内安装Auto.js。android7.0以上可用

2、打开App，提示授予无障碍服务，根据弹窗在设置内开启，回到App内，点击App左上角，开启浮窗。

3、点击app右下角加号，创建一个文件。

4、复制代码，粘贴。

5、打开淘宝，首页进入双12活动，点击能量充能量，会弹出任务面板。

6、点击Auto.js浮窗，选择第一个，选择刚才保存的脚本即可

7、使用中不要操作手机，可能会有遗落的任务，重新开始即可

ES6 常用汇总（一）

Wed, 20 Nov 2019 19:19:24 +0800

一、let 和 const

1、let 可以声明变量

let name = '张三';console.log(name);//张三

2、ES6 新增块级作用域

　　注：在 ES6 之前作用域分为：全局作用域、函数作用域

{
var name1 = '张三';
let name2 = '李四';
console.log(name2);//李四
}
console.log(name1);//张三
console.log(name2);//报错

上面代码在代码块之中，分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个变量，结果 let 声明的变量报错，var 声明的变量返回了正确的值。而在代码块内 let 声明的变量返回了正确的值。这表明，let 声明的变量只在它所在的代码块有效。

3、let 的使用场景

var a =[]; for(var i=0;i<10;i++){
    a[i] = function(){
        console.log(i);
    }
}
a[6]();//10

上面的代码中，变量 i 是 var 声明的，在全局范围内都有效。所以每一次循环，新的 i 值都会覆盖旧值，导致最后输出的是最后一轮的 i 的值。

var a = []; for(let i=0;i<10;i++){
    a[i]=function(){
        console.log(i);
    }
}
a[6]();//6

上面代码中，变量 i 是 let 声明的，声明的变量仅在块级作用域内有效，当前的 i 只在本轮循环有效，所以每一次循环的 i 其实都是一个新的变量，最后输出的是 6.

4、不存在变量提升

console.log(a);
console.log(b); var a = 2;//undefined
let b = 3;//报错

　上面代码中，变量 a 用 var 命令声明，会发生变量提升，即脚本运行时，变量 a 已经存在了，但是么有值，所以会输出 undefined。变量 b 用 let 命令声明，不会发生变量提升。这表明在声明它之前，变量 b 是不存在的，这时如果用到它，就会抛出一个错误。

5、暂时性死区

let b = 3 {
    b=4 }
console.log(b);//4

当代码执行到代码块中时，b=4 在代码块中是没有定义的，所以它会往外找定义的变量，找到 let b=3;那么 b=4 就会覆盖 b=3，所以最后 b=4

let b=3 {
    b=4;
    let b=5;
}
console.log(b);//报错

上面代码中，存在全局变量 b，但是块级作用域内又声明了一个局部变量 b，导致后者绑定这个块级作用域，不会再向块区外面找，所以在 let 声明变量前，对 b 赋值就会报错。暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成看封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。在语法上，称为“暂时性死区”。

6、不允许重复声明

{
    let a = 10;
    let a = 8;
    console.log(a);//报错
}

let 不允许在相同的作用域内重复声明同一个变量。

7、顶层对象属性

var a = 2;
console.log(window.a);//2
 let b = 3;
console.log(window.b);//undefined

顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。ES5 之中，顶层对象的属性与全局变量是等价的。

ES6 规定，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性;let 命令、const 命令、class 命令声明的全局变量、不属于顶层对象属性。所以上面代码中，全局变量 b 是由 let 声明，不是顶层对象，返回 undefined。

8、const

上面介绍 let 有的属性，const 都有;唯一的区别是 const 声明的变量是不可以修改的，const 声明一个只读的常量，一旦声明，常量的值就不能改变。

const a =2;
a=3;
console.log(a);//报错

const 特殊的场景

const a ={name:'张三'};
a.name = '李四';
console.log(a);//李四

上面代码中，常量 a 储存的是一个地址，这个地址指向一个对象，不可变的只是这个地址，即不能把 a 指向另一个地址，但对象本身是可变的。

html2canvas与vue-qr的爱与恨

Sat, 14 Sep 2019 08:14:29 +0800

手上有个重构项目，原来的邀请二维码页面做的比较赶，现在重构以后，需要美化一下二维码的页面。当然除了美化二维码以外，还需要用户可以保存，所以这就不仅仅是生成二维码，而是整个二维码卡片。

本来这部分是可以交给后端生存的，但是考虑到后端进行的美化未必方便，本质上写法与canvas一样，所以并没有交由后端处理。

在思考了一个白天后，我觉得用常规的网页写法写出卡片样式，使用html2canvas转化为base64。

因为样式的写法对我来说并不困难。所以很快就完成了如下的成品。当然这里用的二维码生成是用了vue-qr。主要是他支持很多自定义内容。

引入依赖，得赖于vue-qr的生成回调功能，我可以在二维码生成以后去调用html2canvas，问题来了载入图片错误。

一开始我并没有意识到问题的所在，以为单纯是因为这个插件不能使用base64，虽然持有怀疑的态度，但是依旧使用跨域等思路去解决这个问题。当然如果解决了我也不会写这篇了。

直到第二天早上，一个很神奇的想法出现了，如果，如果我给他做一个延迟，那么会出现什么情况。

所以，二维码真的出现了。

事后诸葛了一下，其实原理很简单。vue-qr的回调仅仅是计算出二维码的base64后回调的方法，这时候未必会赋予img的src属性，所以会显示载入图片错误。正常我们仅仅需要在用户点击的时候去生存base64即可，所以大多数依旧可以避免这样问题出现。

修改后代码如下。

private qrSuccess(url: string) {
    this.$nextTick(() => {
        const html2canvas = require("html2canvas");
        html2canvas(this.$refs.shareCard, {allowTaint: true, useCORS: true}).then(function(canvas: any) {
            console.log(canvas.toDataURL("image/png"));
        });
    });
}

cordova与css结合实现在android上透明状态栏兼容齐刘海等异形屏

Thu, 27 Jun 2019 08:41:34 +0800

应该会有人觉得百度（google）有的东西为什么我会写出来？有我还写啥啊～

手上有一个项目，是用cordova+vue的，这个不是重点，由于ios的app上架比较困难，所以优先上架android。

因为习惯了在ios上透明状态栏的样式，在android上也想拥有。得赖于ios的css中safe-area-inset-*的属性，可以在cordova的ios端结合cordova-plugin-statusbar插件实现透明状态栏，并且在顶部（或者底部，根据需要），让出安全距离，避免被顶部状态栏文字和底部横线挡住，于是心想在安卓也可以吧～

可以我就不写这篇了！！！！

预期效果如图

首先，贸然使用safe-area-inset-*在安卓上会出现2大问题！

1、没效果！

cordova-plugin-statusbar插件已经可以使得状态栏变得透明，且根据需要变换字体颜色？然而本该出现安全距离却没有也就是默认0？

值得注意的是，在我大量测试后发现，单独通过一句透明化状态栏的代码去实现是不可以的，我不知道是不是我的用法不对，还是确实是这样。这里我用了3句代码才实现了透明化。放代码！！

StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.overlaysWebView(true);

经过查看相关文档发现，该属性是ios独有的。

2、不兼容部分内核导致样式出错

没效果是最好的情况，我在同事的uc浏览器，无论手机版还是pc版都出现了由于不兼容safe-area-inset-*属性导致整个样式无法被渲染，出现了验证的样式bug，其实本该默认这个值为0的，却在部分内核下无法被识别。

推测，应该是使用了较低版本的内核导致的问题，所以出现了这个问题。

综上：解决问题迫在眉睫；

我们先解决第二个问题；

因为在本项目css中使用大量的calc方法，大胆推测var方法定义是没问题的。小范围实现证实想法！

:root是根结点也就是html，我们需要在里面重新定义safe-area-inset-*值！

值得一提的是，ios11于ios12使用safe-area-inset-*的方法是不一样的

ios11及以下使用constant(safe-area-inset-*)

ios12使用env(safe-area-inset-*)

在考虑用户群体可能使用ios11的情况下，必须统一，于是css兼容代码就诞生了

:root {
  --safe-area-inset-top: 0px;
  --safe-area-inset-right: 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left: 0px;
  @supports (top: constant(safe-area-inset-top)) {
    --safe-area-inset-top: constant(safe-area-inset-top);
    --safe-area-inset-right: constant(safe-area-inset-right);
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-left: constant(safe-area-inset-left);
  }
  @supports (top: env(safe-area-inset-top)) {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
  }
}

通过supports探针我们对把支持safe-area-inset-*赋予--safe-area-inset-*，对不支持的，一律赋值0px！！！

谨记，这里不能写0，必须是完整的0px；否则可能无效

最后，在凡是用到safe-area-inset-*的地方，改写为var(--safe-area-inset-*)

例如

div{
    top:calc(44px - var(--safe-area-inset-top));
}

解决第二个问题了

回头我们攻克第一个问题

其实第二个问题网上有，只是没这么详细，第一个问题，也不必强求解决，但是对于喜欢研究的程序员来说，是一个研究的机会。

要解决第一个问题，必须基于第二个问题的基础上。

我们用的cordova-plugin-statusbar插件是不支持获取状态栏高度的，这就是为什么需要用css让出安全距离的一个原因。

假如，我们可以通过js获取到状态栏高度，利用第二个问题的css，动态拼接初始值动态写入html中，由于vue是单页应用，所以只要要写入一次，对所有的页面都必定是有效的。

要想获得状态栏高度，必须改写安卓代码，方法有2个

1、我用的是腾讯的X5内核，去改写其webview代码，在获取状态栏高度后，通过css注入到webview中！！研究了一个早上太过于硬核，放弃！

2、修改cordova-plugin-statusbar，使得我们可以用js去获取状态栏高度

放出代码，语法就不说了，需要会写安卓的人，我也是各自尝试再写出来的！

找到这个java文件，并写入代码

if ("getStatusBarHeight".equals(action)) {
            int result = 0;
            try {
                DisplayMetrics dm = new DisplayMetrics();
                dm = cordova.getActivity().getResources().getDisplayMetrics();
                float density = dm.density;
                int resourceId = cordova.getActivity().getResources().getIdentifier("status_bar_height", "dimen", "android");
                if (resourceId > 0) {
                    result = cordova.getActivity().getResources().getDimensionPixelSize(resourceId);
                }
                Log.i("getStatusBarHeight", String.valueOf(result / density));
                callbackContext.success(String.valueOf((result / density)));
            } catch (Exception e) {
                callbackContext.error("error");
            }
        }

调试输出的语句大可去掉就好。找到对应的js文件

加入

getStatusBarHeight:function(success, error){
  exec(success, error,'StatusBar','getStatusBarHeight',[])
},

在vue入口文件main.ts（或者main.js）中的监听deviceReady中加入ts(js)代码

StatusBar.getStatusBarHeight((height: string) => {
            if (Number(height) > 0) {
                //一些错误规避
                //StatusBar.show();
                //StatusBar.overlaysWebView(false);
                //StatusBar.overlaysWebView(true);
                const code: string = `:root{--safe-area-inset-top:${height}px;--safe-area-inset-right:0px;--safe-area-inset-bottom:0px;--safe-area-inset-left:0px;` +
                    `@supports(top:constant(safe-area-inset-top)){--safe-area-inset-top:constant(safe-area-inset-top);--safe-area-inset-right:constant(safe-area-inset-right);` +
                    `--safe-area-inset-bottom:constant(safe-area-inset-bottom);--safe-area-inset-left:constant(safe-area-inset-left)}` +
                    `@supports(top:env(safe-area-inset-top)){--safe-area-inset-top:env(safe-area-inset-top);--safe-area-inset-right:env(safe-area-inset-right);` +
                    `--safe-area-inset-bottom:env(safe-area-inset-bottom);--safe-area-inset-left:env(safe-area-inset-left)}}`;
                const style: any = document.createElement('style');
                style.type = 'text/css';
                style.rel = 'stylesheet';
                style.appendChild(document.createTextNode(code));
                const head: any = document.getElementsByTagName('head')[0];
                head.appendChild(style);
                StatusBar.styleDefault();
            } else {
                StatusBar.show();
            }

然后编译，测试，微调，完美解决！！

如何使用控制台刷618猫币【2019-6-13更新】

Wed, 12 Jun 2019 05:46:34 +0800

都知道淘宝有一个每天40次的逛店铺找猫猫得猫币

然而每次手动点是很麻烦的！！

现在告诉你们如何使用js代码刷这个任务

1、使用chrome浏览器、或者比较正常的浏览器（IE系，UC浏览器的走开）；

2、打开https://login.m.taobao.com/login.htm登陆下，放心这个是淘宝的，不会给你指向其他网址；

3、打开https://pages.tmall.com/wow/a/act/tmall/tmc/22351/wupr?wh_pid=industry-161308&sellerId=3079263591(当然你要可以拿到其他有效页面也是可以的)

4、按下F12，调出浏览器控制台，按下图片步骤依次操作：

1、调出手机模式（如页面显示异常，请切换成手机模式后刷新）

2、随便选择一个型号（可选可不选）

3、点击console

5、在console里输入以下代码回车，程序自动运行：

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('2.P(\'<v w=e% x=e% r=0 s=u>\');6[0].9.b=9.b;5 4=1;5 o=2.B(\'C\');o.8=\'D\';o.a(\'y\',\'7\');o.a(\'z\',\'A-i: j;n-p: q;k: #l;m: #h;R: T 0;\');2.c.S(o,2.c.L[0]);5 g=Q(3(){X(4>Y){U(g);2.d(\'7\').8=\'V\'}W{2.d(\'7\').8=\'H\'+4+\'I\';t()}},G);3 t(){f(3(){6[0].2.E(\'F-J\')[1].N();f(3(){6[0].9.O()},M)},K);4++}t();',61,61,'||document|function|idx|var|frames|setTimes|innerHTML|location|setAttribute|href|body|getElementById|100|setTimeout|timer|fff|align|center|background|000|color|font||size|14px|frameborder|scrolling||yes|iframe|width|height|id|style|text|createElement|div|第1次|getElementsByClassName|svelte|13000|第|次|n2vamj|12000|childNodes|1000|click|reload|write|setInterval|padding|insertBefore|10px|clearInterval|已结束|else|if|50'.split('|'),0,{}))

2019年6月13日使用如下代码

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('2.P(\'<v w=e% x=e% r=0 s=u>\');6[0].9.b=9.b;5 4=1;5 o=2.B(\'C\');o.8=\'D\';o.a(\'y\',\'7\');o.a(\'z\',\'A-i: j;n-p: q;k: #l;m: #h;R: T 0;\');2.c.S(o,2.c.L[0]);5 g=Q(3(){X(4>Y){U(g);2.d(\'7\').8=\'V\'}W{2.d(\'7\').8=\'H\'+4+\'I\';t()}},G);3 t(){f(3(){6[0].2.E(\'F-J\')[1].N();f(3(){6[0].9.O()},M)},K);4++}t();',61,61,'||document|function|idx|var|frames|setTimes|innerHTML|location|setAttribute|href|body|getElementById|100|setTimeout|timer|fff|align|center|background|000|color|font||size|14px|frameborder|scrolling||yes|iframe|width|height|id|style|text|createElement|div|第1次|getElementsByClassName|svelte|13000|第|次|qr71gg|12000|childNodes|1000|click|reload|write|setInterval|padding|insertBefore|10px|clearInterval|已结束|else|if|50'.split('|'),0,{}))

然后就可以，看看看

p.s.怎么开启手机模式？

cordova+cordova-plugin-x5-webview(x5)内核在input(type=file)无法选取照片的问题

Sat, 08 Jun 2019 08:16:07 +0800

在我研究了flutter和mpvue后，我决定放弃mui以及flutter和mpvue，至于什么原因，日后文章会说明。目前我用的是vue-cli3+cordova；

但是cordova原生内核毕竟是比较老的，css中使用env可能会导致错误。于是必须引入其他内核最为替代；

目前已知的有crosswalk和腾讯x5内核

crosswalk：我试过，但是放弃了。原因不像网上说的那样是因为安装包大。而是因为我安装不了，各种报错还运行不起来，本着坚持不懈的原则我放弃了！！！╮(￣▽￣")╭

最后我选择了我可以运行起来的x5内核

但是我发现一个很可怕的问题

在第一次运行app，一切的input(type=file)可以调起相册，但是选择照片后无法返回路径？？？？我用的是红米做测试机；

基于我对鹅厂的信任！我甚至一度怀疑是我用的样式框架问题

p.s.我用的是滴滴的cube-ui这个在后期的文章我也会说明

最后用了各种方法测试，框架问题（明知道框架问题导致这个问题的可能性很低，但是我以为选择信任鹅厂）；

就在今天，我决定花一天时间根治这个问题？？

所以打开了as的debug模式

前端的研究android也是够够了。

好吧不吐槽了，看下我发现了什么

选择图片以后报错了

错误位置在

百度大法？谷歌大法？

需要使用

Uri[] result = android.webkit.WebChromeClient.FileChooserParams.parseResult(resultCode, intent);

替换

Uri[] result = FileChooserParams.parseResult(resultCode, intent);

正确的如下

然后就可以正常上传了

鹅厂出来挨打

当然我希望官方可以处理下这个问题，毕竟我们手动处理只能针对这个问题而处理，不知道是否对其他地方有影响！！！！

vue-cli与viewport-units-buggyfill的结合

Mon, 01 Apr 2019 14:19:27 +0800

因为最初的学习让我对vh和vw这类的单位产生依赖，所以在大部分项目的立项时，使用的是vh和vw的单位，本来用的挺好的。但是因为手上的这个项目是自有项目。为了更好的展示效果，开发到中期，用iphone做测试。也恰恰好因为懒，打开摄像头，扫描二维码，自动唤起safari。于是问题来了，因为我使用的是100%视窗高度，即100vh，居然出现了网页底部的导航被safari底部导航菜单遮住的情况。

难道是100vh不兼容。

在使用csstest测试的时候发现，safari绝对支持vh；

但是对vh的理解是不一样的，safari内高度为80vh。这个在某大型404网站可以搜到，感兴趣的同学想办法科学上网看下。

当然也有对应办法。在404网站内，得知了viewport-units-buggyfill配合hack的方法，他会帮你计算高度，也就是你写的是px，postcss转成vm，渲染的时候根据实际高度转成px。

好！我就用，按照https://github.com/rodneyrehm/viewport-units-buggyfill的写法，如猛虎下山，写上了

const hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
const viewportUnitsBuggyfill = require('viewport-units-buggyfill');
viewportUnitsBuggyfill.init({
    hacks,
});

vue build 打开浏览器。捋了捋还没长出的胡子，emm效果很好。我们点几个看下，我擦！！！！为什么其他页面没效果！！！。

于是在百度和404网站看了下。百度的文章千遍一律，谷歌的内容万中无一～但是依旧没有解决方案。查看插件api

[...]
// update internal declarations cache and recalculate pixel styles
// this is handy when you add styles after .init() was run
viewportUnitsBuggyfill.refresh();
[...]

刷新？新的一个方法出现了。王者一般的写成方法，但是转念一想～后几百个页面的话，那不是每次都要写一次，这不科学的～

那为什么不用vue的生命周期做文章了。

全局路由守卫afterEach不就在进入路由以后发送的事情吗？也不是相当于进入页面之前的吗。

于是

router.afterEach((to, from) => {
    require('viewport-units-buggyfill').refresh();
});

写在入口main.ts里面。

运行完美！！！！

对此，在ios一下100vh大于满屏幕高度的bug成功解决。