webgl in android
我感覺一天之內(nèi)自己白了頭，昨天腦子發(fā)熱，想用webgl下的sharder寫自己心儀很久的效果（這個“心儀用得有些過分了”）。先不說這個東西不太好寫，自己也是這個方面的“菜雞”?？傊懔撕镁?，瀏覽器上的效果還算過得去。（這里就不截圖是什么樣的效果了）。
然后移植到離子上，一切順利，然后打包運行到手機上，發(fā)現(xiàn)什么的都沒有。
一開始我懷疑因為運行在設(shè)備的webview上，所以不支持webgl。畢竟Android上的webview的性能大家都懂。然后把他集成到crosswalk上（畢竟人家cocos2d也在用嘛）。這里一般會遇到sdk版本的問題，這個問題倒不到，到build.gradle上添加一段：
configurations.all {
????resolutionStrategy {
????????force 'com.android.support:support-v4:27.1.0'
????}
}
這個問題解決，我非常建議不要到控制臺操作打包，你只需用cli build
出一個目標包來，然后用AS進行簽名打包。
好了到這里一切進行順利，迫不及待的把安裝包發(fā)到手機上安裝，額，還是什么都沒有。（一臺華為,一臺魅藍）
網(wǎng)上搜了一下，哦，原來,我正試圖在一個包含黑名單中GPU的設(shè)備上使用WebGL。
是真的這樣嗎，查了下發(fā)現(xiàn)(視乎是如此)：
遵循crosswalk的方法，將--ignore-gpu-blacklist命令行選項傳遞到xwalk?二進制文件。但最終依舊沒有生效，我一度覺得寫的代碼是不是有問題，然后git上有人說，必須加入權(quán)限，ok,權(quán)限加了，依舊沒結(jié)果。
然后發(fā)現(xiàn)：
即使您使用--ignore-gpu-blacklist構(gòu)建，這并不意味著webGL可以保證工作，因為一些手機制造商在他們的webGL支持上做得很差。
最后索性打包運行在ios上，額，完全沒問題。
然后我推測是資源加載的問題，據(jù)說ios的webview可比android強太多了。
搗鼓了會,嗯嗯，問題解決。（切記資源加載問題）
TABS的隱藏和顯示
在存在tabs的界面上如果存在有輸入框，那么輸入時軟件盤會抬起tabs,網(wǎng)上視乎也沒有非常簡單和直接的方法去解決建議不要去走這些彎路。索性給tabs添加id，跟大多數(shù)dom操作一樣，控制display屬性。實現(xiàn)顯示或者隱藏，但你應該操作目標的第一個子元素，在"none"|"flex"之間切換即可。
Snap.svg
snap.svg在angular/ionic應用的時候會出現(xiàn)錯誤，這是個官方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的對象暴露出來，但就在這里會產(chǎn)生一些問題，打包的時候會出現(xiàn)一些莫名其妙的錯誤，所以不建議安裝。但這樣也使用不了snap.svg的mina對象，該對象用于定義動畫的過度效果。
我網(wǎng)上查了很久還是沒有找到相關(guān)的解決方法。所以這里我自作主張的修改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對象中，寫一個函數(shù)，用于返回mina的一些成員函數(shù)。
function createMina(obj){
switch (obj.type) {
let target=null;
case "easein":
target=mina.easein(obj.num);
break;
......
//以下省略
}
return target;
}
接著修改animate函數(shù)的定義：
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;
};
然后在調(diào)用的時候你就可以傳遞一個{type:[string],num:[number]}這種方式去調(diào)用了。是不是很簡單，注意animate有很多重載方法。
