webgl in android
我感觉一天之内自己白了头，昨天脑子发热，想用webgl下的sharder写自己心仪很久的效果（这个“心仪用得有些过分了”）。先不说这个东西不太好写，自己也是这个方面的“菜鸡”。总之搞了好久，浏览器上的效果还算过得去。（这里就不截图是什么样的效果了）。
然后移植到离子上，一切顺利，然后打包运行到手机上，发现什么的都没有。
一开始我怀疑因为运行在设备的webview上，所以不支持webgl。毕竟Android上的webview的性能大家都懂。然后把他集成到crosswalk上（毕竟人家cocos2d也在用嘛）。这里一般会遇到sdk版本的问题，这个问题倒不到，到build.gradle上添加一段：
configurations.all {
resolutionStrategy {
force 'com.android.support:support-v4:27.1.0'
}
}
这个问题解决，我非常建议不要到控制台操作打包，你只需用cli build
出一个目标包来，然后用AS进行签名打包。
好了到这里一切进行顺利，迫不及待的把安装包发到手机上安装，额，还是什么都没有。（一台华为,一台魅蓝）
网上搜了一下，哦，原来,我正试图在一个包含黑名单中GPU的设备上使用WebGL。
是真的这样吗，查了下发现(视乎是如此)：
遵循crosswalk的方法，将--ignore-gpu-blacklist命令行选项传递到xwalk 二进制文件。但最终依旧没有生效，我一度觉得写的代码是不是有问题，然后git上有人说，必须加入权限，ok,权限加了，依旧没结果。
然后发现：
即使您使用--ignore-gpu-blacklist构建，这并不意味着webGL可以保证工作，因为一些手机制造商在他们的webGL支持上做得很差。
最后索性打包运行在ios上，额，完全没问题。
然后我推测是资源加载的问题，据说ios的webview可比android强太多了。
捣鼓了会,嗯嗯，问题解决。（切记资源加载问题）
TABS的隐藏和显示
在存在tabs的界面上如果存在有输入框，那么输入时软件盘会抬起tabs,网上视乎也没有非常简单和直接的方法去解决建议不要去走这些弯路。索性给tabs添加id，跟大多数dom操作一样，控制display属性。实现显示或者隐藏，但你应该操作目标的第一个子元素，在"none"|"flex"之间切换即可。
Snap.svg
snap.svg在angular/ionic应用的时候会出现错误，这是个官方bug,到你看到这篇东西的时候，我也不知道修复没有。在包引入的时候，你就会遇到import不到的问题，解决方法。
npm i imports-loader
npm i snapsvg
npm i @types/snapsvg
这时候你就可以使用如下这种方式导入了
import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'
@types/snapsvg,这个东西用于把snapsvg的对象暴露出来，但就在这里会产生一些问题，打包的时候会出现一些莫名其妙的错误，所以不建议安装。但这样也使用不了snap.svg的mina对象，该对象用于定义动画的过度效果。
我网上查了很久还是没有找到相关的解决方法。所以这里我自作主张的修改snap.svg源码（这绝对是下下策）。
如下：
先看一些animate的源码：
Snap.animate =function (from, to, setter, ms, easing, callback) {
if (typeof easing =="function" && !easing.length) {
callback = easing;easing=linear;
}
var now = mina.time(),
anim = mina(from, to, now, now + ms, mina.time, setter, easing);
callback && eve.once("mina.finish." + anim.id, callback);
return anim;
};
注意它有很多重载方法。
所以在我们可以在它snap对象中，写一个函数，用于返回mina的一些成员函数。
function createMina(obj){
switch (obj.type) {
let target=null;
case "easein":
target=mina.easein(obj.num);
break;
......
//以下省略
}
return target;
}
接着修改animate函数的定义：
Snap.animate =function (from, to, setter, ms, easing, callback) {
easing=createMina(easing);
if (typeof easing =="function" && !easing.length) {
callback = easing;
easing=linear;
}
var now = mina.time(),
anim = mina(from, to, now, now + ms, mina.time, setter, easing);
callback && eve.once("mina.finish." + anim.id, callback);
return anim;
};
然后在调用的时候你就可以传递一个{type:[string],num:[number]}这种方式去调用了。是不是很简单，注意animate有很多重载方法。
