H5+混合移動app應用開發——坑我太甚
用了MUI之後，才發現，那坑比我想象之中的要多得多，有些是H5的坑，有些是plus的坑，接下來我一一來吐槽一番。
IOS下面，上拉的時候，速度稍微快一點，表頭自動隱藏，等你不拉的時候又自動顯示
這種情況，在Android下面是正常的。why？
因為mui框架的頭部header和底部nav都是采用的fixed布局
<header id="header" class="mui-bar mui-bar-nav action-head"
而IOS下面壓根就不支持fixed布局，所以嘍就杯具了，這個問題還體現在另一種情況下。那就是當頁面中的內容很長超出了一屏，而且頁面中存在文本框，這個時候如果我們文本框一聚焦，在ios下面會自動滾動，軟鍵盤會彈出來，這時如果你上拉下拉操作，fixed布局的部分就漂浮了。
我的解決方案
拋棄mui中舊的openWindow和openWindowWithTitle，采用最新的titleNView
owner.openWindowWithTitle = function (WebviewOptions, title) {
var _styles = { // 窗口參數 參考5+規範中的WebviewStyle,也就是說WebviewStyle下的參數都可以在此設置
titleNView: { // 窗口的標題欄控件
titleText: title, // 標題欄文字,當不設置此屬性時，默認加載當前頁面的標題，並自動更新頁面的標題
titleColor: "#fff", // 字體顏色,顏色值格式為"#RRGGBB",默認值為"#000000"
titleSize: "17px", // 字體大小,默認17px
backgroundColor: "#449DED", // 控件背景顏色,顏色值格式為"#RRGGBB",默認值為"#F7F7F7"
progress: { // 標題欄控件的進度條樣式
color: "#56CF87", // 進度條顏色,默認值為"#00FF00"
height: "2px" // 進度條高度,默認值為"2px"
},
splitLine: { // 標題欄控件的底部分割線，類似borderBottom
color: "#CCCCCC", // 分割線顏色,默認值為"#CCCCCC"
height: "0px" // 分割線高度,默認值為"2px"
},
autoBackButton: true
},
};
WebviewOptions.styles = _styles;
mui.openWindow(WebviewOptions);
}
為什麽官方提供的Demo沒有這樣的現象，說到這裏，心裏就火，官方提供的demo，限制了上拉下拉的速度，很慢的，所以自然無法出現表頭在ios下面自動隱藏的情況，而且也沒有這個長屏幕輸入文本框的情況。可是官方沒有給出任何說明，這才是最坑的。
其它問題：這裏的返回圖標的大小無法設置。H5+文檔中沒有找到相關設置的地方，我暈。
設置狀態欄顏色IOS下面無效
一開始，我直接是通過修改manifest.json的配置來進行修改的，怎知Android下面是可以了，但是ios下面無效。plus節點下面添加如下配置，將狀態欄設置為藍色背景。
"plus": {
"launchwebview":{"statusbar":{"background":"#449DED"}},
"statusbar":{"background":"#449DED"},/*狀態欄*/為了在IOS中所有頁面中修改狀態欄顏色，我在一個公共的js文件中添加了如下代碼：
document.addEventListener(‘plusready‘, function () {
plus.navigator.setStatusBarBackground("#449DED");// 設置系統狀態欄背景為藍色
plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");// 設置系統狀態欄樣式為淺色文字
}, false);
OK，問題解決。
單WebView下面的上拉下拉問題
為什麽官網給的Demo沒問題？因為那Demo太簡單了，實在是無法模擬真實的應用場景。
我目前的解決辦法：判斷當主界面的數據大於2條時，這是因為我這裏大於2條時會出現滾動條，我自動設置主界面的高度+1px，這樣做是為了產生垂直滾動條，然後在所有觸發這個滾動彈出層的地方，添加如下代碼：（比如說點擊狀態、或者點擊報修部門的時候）
isEmptyScroll = true; window.scrollTo(1, 1);
加載數據列表的代碼
if (app.$data.list.length <= 2) {
if (isEmptyScroll) {
g.id("pullrefresh").style.height = g.getScreenInfo(‘height‘) +1 + ‘px‘;
}
} else {
g.id("pullrefresh").style.height = ‘auto‘;
}
isEmptyScroll = false;
公共js代碼：
/**
* 獲得屏幕的高度
* @param {Object} element
*/
owner.getScreenInfo = function (element) {
if (element == ‘width‘) {
return document.documentElement.clientWidth || document.body.clientWidth;
} else {
return document.documentElement.clientHeight || document.body.clientHeigth;
}
};
據說采用雙webview的話不會出現這種問題，我暫時沒有去實驗過，可是官方又推薦使用單webview的方式，說雙webview太耗性能而且使用沒那麽方便。很操蛋啊，我自然是優先采用官方推薦的方式哇！
獲取App緩存大小並清除緩存Android無效
按照H5+的方式去操作，IOS下面能取到值，但是Android無效。
//清除緩存
document.getElementById(‘clearCache‘).addEventListener(‘tap‘, function() {
mui.confirm(‘圖片及離線緩存的內容將會被刪除‘, ‘確定刪除所有緩存？‘, btnArray, function(e) {
if(e.index == 1) {
plus.cache.clear(function() {
mui.toast("應用緩存清除成功!");
});
}
});
});
獲取緩存大小
mui.plusReady(function() {
//獲取緩存大小
var _result = ‘‘;
plus.cache.calculate(function(size) {
_result = g.bytesToSize(size);
console.log(_result)
document.getElementById("cacheSize").innerText =_result;
});
});
公共方法：
//字節轉換為KB等大小
owner.bytesToSize = function (bytes) {
if (bytes === 0) return ‘0 B‘;
var k = 1024;
sizes = [‘B‘, ‘KB‘, ‘MB‘, ‘GB‘, ‘TB‘, ‘PB‘, ‘EB‘, ‘ZB‘, ‘YB‘];
i = Math.floor(Math.log(bytes) / Math.log(k));
var _size = (bytes / Math.pow(k, i));
return _size.toFixed(2) + ‘ ‘ + sizes[i];
}
目前暫時沒有想到什麽好的辦法解決。
波浪效果在部分Android機型下無效
由於我這個動畫特效是采用的css3，所以很容易想到是瀏覽器樣式不兼容引起的。其實就是添加-webkit-前綴來指定。因為移動端許多瀏覽器都是webkit內核。
HTML
<div class="portrait-clockin fr">
<div class="dot" v-on:tap="doPunchCard()">
<div class="dot2">
<div class="dot3">
<ul>
<li class="one fl" v-text="nowTime"></li>
<li class="fl">打卡</li>
</ul>
</div>
</div>
</div>
</div>
css樣式：
.portrait-clockin{width: 3rem;height: 3rem;margin: 0 15px 0px 0px;}
.fr {
float: right;
}
/*上班打卡 水波紋效果*/
a.dot:active,a.dot2:active,a.dot3:active{background: #70a236;}
.dot {
animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation:sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dot2 {
animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation:sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dot3 {
animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation:sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dot ul{margin: 0px;padding: 0px;width: 100%;margin: 0.65rem 0px;}
.dot li{width: 100%;font-size: 0.48rem;line-height: 0.5rem;height: 0.5rem;}
.dot li.one{font-size: 0.4rem;line-height: 0.8rem;height: 0.8rem;}
.dot,.dot2,.dot3{
height: 96px;width: 96px;
font-size: 20px;color: #fff;line-height: 96px;text-align: center;border-radius: 100%;
position: absolute;z-index: 1;animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;background: transparent;
}
@keyframes sploosh {
0% {box-shadow: 0 0 0 0px rgba(158, 203, 244, 0.7);background: rgba(84, 166, 240, 0.7);}
100% {box-shadow: 0 0 0 10px rgba(158, 203, 244, 0);background: rgba(84, 166, 240, 0);}
}
@keyframes sploosh2 {
0% { box-shadow: 0 0 0 0px rgba(110, 179, 243, 0.7);background: rgba(84, 166, 240, 0.7);}
100% {box-shadow: 0 0 0 6px rgba(110, 179, 243, 0);background: rgba(84, 166, 240, 0.3);}
}
@keyframes sploosh3 {
0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.7);background: rgba(84, 166, 240, 0.7);}
100% {box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); background: rgba(84, 166, 240, 1);}
}
@-webkit-keyframes sploosh {
0% {-webkit-box-shadow: 0 0 0 0px rgba(158, 203, 244, 0.7);background: rgba(84, 166, 240, 0.7);}
100% {-webkit-box-shadow: 0 0 0 10px rgba(158, 203, 244, 0);background: rgba(84, 166, 240, 0);}
}
@-webkit-keyframes sploosh2 {
0% {-webkit-box-shadow: 0 0 0 0px rgba(110, 179, 243, 0.7);background: rgba(84, 166, 240, 0.7);}
100% {-webkit-box-shadow: 0 0 0 6px rgba(110, 179, 243, 0);background: rgba(84, 166, 240, 0.3);}
}
@-webkit-keyframes sploosh3 {
0% {-webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.7);background: rgba(84, 166, 240, 0.7);}
100% {-webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); background: rgba(84, 166, 240, 1);}
}
/*波紋結束*/
關於圓點在IOS下面顯示的問題
圓點效果如下：
我之前的做法：
<span v-if="item.rad" href="#" class="round">●</span>
CSS代碼如下：
/*小圓點*/
.round {
width: 6px;height: 6px;display: -webkit-inline-box;font-size: 7px;margin-left: -2px;
line-height: 6px;text-align: center;color: #FD7777;text-decoration: none;position: absolute;top: 5px;
}
結果我發現，在IOS下面這個小圓點是在是太小了，而且無論你怎麽修改樣式的寬和高都無效。
後來的做法：
HTML代碼結構如下， class="round"部分
<a v-for="(item,index) in menus" v-on:tap="getTaskList(item.name)" class="mui-control-item" v-bind:id="item.id" v-bind:class="{‘mui-active‘: !index}">
<span v-text="item.title"></span>(<span v-text="item.taskNum"></span>)
<span v-if="item.rad" href="#" class="round"></span>
</a>
CSS代碼如下：
/*小圓點*/
.round {
border-radius:50%;width: 6px;height: 6px;display: -webkit-inline-box;font-size: 6px;margin-left: -2px;
line-height: 6px;text-align: center;background-color: #FD7777;text-decoration: none;position: absolute;top: 5px;
}
HBuilder更新有風險
HBuilder隔三差五的就會發布新的補丁，然後你每天打開的時候，它就會自動彈出提示框，提示你是否更新，如果你一不小心點擊了更新，那你最好先看看補丁解決了哪些問題，看一下它的更新日誌。
然後一定要記得的是，要去更新你項目中mui.js、mui.css等等這些你項目中引用了的文件。如何更新呢？可以在最新的HBuilder中新建一個mui項目，然後把項目中的js和css文件拷貝過來。因為每一次打補丁，你很難確定它是否只修改了基座，還是其它mui相關的css或者js都有修改，所以保險的做法就是一起更新。還有個問題需要註意的是，每一次補丁升級，都有可能改出新的問題，所以在更新之前，建議先備份所有代碼，或者給代碼打一個標簽。
使用圖片縮放要註意
mui官方demo中提供了圖片縮放功能，其實這裏有需要註意的地方，如果需要用到圖片縮放的界面中，存在文本框等需要輸入和編輯的地方，會讓你輸入和編輯無效。也就是說你圖片縮放只能在詳情這種只需要展示的場景下使用，而官方是不會告訴你這些的，只有你被碰得頭破血流，才會感到多麽痛的領悟！
暫時就先吐槽這麽多，其它的問題還有很多....
H5+混合移動app應用開發——坑我太甚