详细问题描述
[内容]HBuilder7.6.4 真机调试和打包的ipa在iOS10.2（6s 7plus）上出现了界面元素消失的情况，包括mui的header和<nav class="mui-bar mui-bar-tab">，在7.5.1及以前的版本里没有这个情况，在iOS9的设备上也没有出现这种情况，安卓也没有出现，浏览器上是正常的
重现步骤
[步骤]登录成功后跳转到tablebar的主界面
[结果]主界面的header和mui-bar mui-bar-tab都不见了
[期望]界面显示无异常
运行环境
[系统版本]iOS 10.2
[浏览器版本]
[IDE版本]7.6.4
[mui版本] v3.3.0
附件
[代码片段]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/public/jiekoudizhi.js"></script>
<script src="../js/public/errorCodeAnalysis.js"></script>
<script src="../js/public/jQuery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/public/my-message.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../css/tab-webview-main.css" />
<style>
html,
body {
background-color: #FFFFFF;
}
.mui-title {
/* border: 1px solid saddlebrown;*/
}
.tongji {
float: right;
/*width: 25px;*/
height: 28px;
margin-top: 12px;
right: 12.5px;
background: url(../../img/gongzuo/search.png);
background-position: center bottom !important;
background-repeat: no-repeat !important;
background-size: 90% 90% !important;
margin-bottom: -4px;
display: none;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 id="title" class="mui-title">工作</h1>
<img src="../img/tongji.png" class="tongji" />
</header>
<!--<div class="actionbar">
<div class="bar gongzuo currentbar" ty='gongzuo'>
<div class="icon"></div>
<div class="text">工作</div>
</div>
<div class="bar kaoqing " ty='kaoqing'>
<div class="icon"></div>
<div class="text">考勤签到</div>
</div>
<div class="bar wode " ty='wode'>
<div class="icon"></div>
<div class="text">我的</div>
</div>
</div>-->
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active shouye">
<span class="mui-icon work_img home-img"></span>
<span class="mui-tab-label">工作</span>
</a>
<a class="mui-tab-item kaoqing" value="kaoqing">
<span class="mui-icon kaoqin_img home-img"></span>
<span class="mui-tab-label kaoqing_span">考勤签到</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon wode_img home-img"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<!--发现新版本提示框-->
<div id="latest_version_mask"></div>
<div id="latest_version_lm">
<div class="close_btn">X</div>
<img src="../img/main/newv.png" alt="" />
<div class="newtitle">发现新版本<span style="opacity: 0;">m</span><span class="versionnumber">1.0.1</span></div>
<ul>
<!--<li>修复定位偏差阿斯兰的骄傲了就是打卡机了收到垃圾卡收到了</li>
<li>美化界面</li>-->
</ul>
<div class="getnew_lm">立即升级</div>
</div>
<!--latest_version_lm-->
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
statusBarBackground: '#F5F5F5',
keyEventBind: {
backbutton: false
}
});
var v_user;
// var v_user = getUserObj();
// console.log("getUserObj():\n" + JSON.stringify(v_user))
var url_shouye = "";
var url_kaoqin = "";
var shouye;
var kaoqin;
var wode;
//轮训未读消息
var lunxunTimer;
// switch(v_user.posi_code) {
// case "001":
// case "0011":
// url_shouye = "gongzuo/manager_shouye.html";
// url_kaoqin = "kaoqing/tongji-jl.html";
// $(".kaoqing_span").text("考勤统计");
// break;
// case "002":
// url_shouye = "gongzuo/management_shouye.html";
// url_kaoqin = "kaoqing/main.html";
// break;
// case "003":
// case "004":
// case "005":
// url_shouye = "gongzuo/yuangongshouye.html";
// url_kaoqin = "kaoqing/main.html";
// break;
// case "006":
// url_shouye = "gongzuo/xingzhengshouye.html";
// url_kaoqin = "kaoqing/main.html";
// break;
// case "007":
// url_shouye = "gongzuo/caiwushouye.html";
// url_kaoqin = "kaoqing/main.html";
// break;
// }
var subpage_style;
// var subpage_style = {
// top: '45px',
// bottom: '51px'
//// zindex: 0
// };
var aniShow = {};
$(function() {
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
v_user = getUserObj()
switch(v_user.posi_code) {
case "001":
case "0011":
url_shouye = "gongzuo/manager_shouye.html";
url_kaoqin = "kaoqing/tongji-jl.html";
$(".kaoqing_span").text("考勤统计");
break;
case "002":
url_shouye = "gongzuo/management_shouye.html";
url_kaoqin = "kaoqing/main.html";
break;
case "003":
case "004":
case "005":
url_shouye = "gongzuo/yuangongshouye.html";
url_kaoqin = "kaoqing/main.html";
break;
case "006":
url_shouye = "gongzuo/xingzhengshouye.html";
url_kaoqin = "kaoqing/main.html";
break;
case "007":
url_shouye = "gongzuo/caiwushouye.html";
url_kaoqin = "kaoqing/main.html";
break;
}
subpage_style = {
top: '45px',
bottom: '51px'
// zindex: 0
};
//DIY
// alert("mainpage: " + v_user.posi_code);
if(v_user.posi_code == undefined || v_user.posi_code == "" || v_user.posi_code == null) {
mui.alert("您的登录信息已过期，请重新登录", "注意", "好的", function() {
mui.openWindow("denglu/shoucidenglu.html", "", {
extras: {
"location": "shoushimima"
}
})
})
//mui.toast("posi_code: "+v_user.posi_code)
//alert(v_user.posi_code)
}
//console.log(url_shouye);
if(url_shouye == "" || url_kaoqin == "") {
mui.alert("您的登录信息已过期，请重新登录", "注意", "好的", function() {
mui.openWindow("denglu/shoucidenglu.html", "", {
extras: {
"location": "shoushimima"
},
createNew: true
})
})
}
shouy = plus.webview.create(url_shouye, "shouye", subpage_style);
kaoqin = plus.webview.create(url_kaoqin, "kaoqin", subpage_style);
wode = plus.webview.create("wode/wode.html", "wode", subpage_style);
// plus.webview.create("wode/wode.html")
var self = plus.webview.currentWebview();
if(self.opener() != undefined && self.opener() != null && self.opener() != "") {
self.opener().close();
}
// var lastpage = self.show;
// alert(lastpage)
// if(lastpage == "wode") {
// //alert("show wode");
// plus.webview.hide(shouy);
// plus.webview.hide(kaoqin);
// plus.webview.show(wode);
// } else {
// plus.webview.show(shouy);
// plus.webview.hide(kaoqin);
// plus.webview.hide(wode);
// }
// plus.webview.show(shouy);
// plus.webview.hide(kaoqin);
// plus.webview.hide(wode);
// $(".mui-bar-tab .mui-tab-item").click(function(e) {
mui('.mui-bar-tab').on('tap', 'a', function(e) {
// alert("click")
//DIY
switch($(this).index()) {
case 0:
plus.webview.show(shouy);
plus.webview.hide(kaoqin);
plus.webview.hide(wode);
break;
case 1:
plus.webview.hide(shouy);
plus.webview.show(kaoqin);
plus.webview.hide(wode);
break;
case 2:
plus.webview.hide(shouy);
plus.webview.hide(kaoqin);
plus.webview.show(wode);
break;
}
$("header h1").html($(this).find(".mui-tab-label").text());
//DIY
var value = $(this).attr("value");
if(value == "kaoqing") {
if(v_user.posi_code == "001" || v_user.posi_code == "0011") {
$(".tongji").css("display", "none");
} else {
$(".tongji").css("display", "block");
$(".mui-bar .tongji").click(function() {
// mui(".mui-bar").on("tap", ".tongji", function() {
if(v_user.posi_code == "006" || v_user.posi_code == "007") {
mui.openWindow("kaoqing/tongji-jl.html", "tongji-jl");
} else {
mui.openWindow("kaoqing/tongji-yg.html", "tongji-yg");
}
});
}
} else {
$(".tongji").css("display", "none");
}
});
//关闭升级提示弹框
$("#latest_version_lm .close_btn").click(function() {
if($("nav.mui-bar a").eq(0).hasClass("mui-active")) {
plus.webview.show(shouy)
} else if($("nav.mui-bar a").eq(1).hasClass("mui-active")) {
plus.webview.show(kaoqin)
} else if($("nav.mui-bar a").eq(2).hasClass("mui-active")) {
plus.webview.show(wode)
} else {
plus.webview.show(shouy)
$("nav.mui-bar a").removeClass("mui-active")
$("nav.mui-bar a").eq(0).addClass("mui-active")
}
$("#latest_version_lm,#latest_version_mask").css("display", "none");
})
//点击升级
$("#latest_version_lm .getnew_lm").click(function() {
// alert("shengji")
// mui.openWindow({url:"https://baidu.com"})
if(mui.os.ios) {
var urlss = "https://itunes.apple.com/us/app/hui-pin/id1181734056?mt=8"
// var urlss = "http://wx.iisun.net/downapp/jrwb/1.0.apk"
plus.runtime.openURL(urlss)
} else if(mui.os.android) {
var urlss = "http://wx.iisun.net/downapp/jrwb/1.0.apk"
plus.runtime.openURL(urlss)
}
// var urlss = "itms-apps://itunes.apple.com/us/app/hui-pin/id1181734056?mt=8"
// var urlss = "https://appsto.re/cn/Os9Bgb.i"
// location.href = "https://appsto.re/cn/Os9Bgb.i"
})
//DIY
var slefCureTimer = setTimeout(function() {
if(url_shouye == "" || url_kaoqin == "") {
mui.alert("您的登录信息已过期，请重新登录", "注意", "好的", function() {
mui.openWindow("denglu/shoucidenglu.html", "", {
extras: {
"location": "shoushimima"
},
createNew: true
})
})
//mui.toast("posi_code: "+v_user.posi_code)
//alert(v_user.posi_code)
}
}, 3000)
plus.push.setAutoNotification(false)
plus.push.addEventListener("receive", function(msg) {
// plus.runtime.setBadgeNumber(msg.length)
// alert(JSON.stringify(msg))
try {
requestUnReadMsg()
} catch(e) {
alert("调用requestUnReadMsg()：\n" + e)
}
})
plus.storage.removeItem("msgNumberUtils")
//运行环境从前台切换到后台事件
document.addEventListener("pause", function() {
// plus.storage.removeItem("msgNumberUtils")
clearInterval(lunxunTimer)
});
//运行环境从后台切换到前台事件
document.addEventListener("resume", function() {
// alert("resume")
// plus.storage.removeItem("msgNumberUtils")
checkHasUnreadMsg()
requestUnReadMsg()
lunxunTimer = setInterval(function() {
requestUnReadMsg();
}, 15000)
});
lunxunTimer = setInterval(function() {
requestUnReadMsg()
}, 15000);
checkClientVersion() //检查客户端版本
plus.webview.show(shouy);
plus.webview.hide(kaoqin);
plus.webview.hide(wode);
// plus.webview.show(wode);
// checkHasUnreadMsg();
// checkHasUnreadMsg();
}); //plusReady
}) //$(function)
function requestUnReadMsg() {
if(getUserToken() == "" || getUserToken() == undefined || getUserToken() == null) {
clearInterval(lunxunTimer);
setTimeout(function() {
requestUnReadMsg();
lunxunTimer = setInterval(function() {
requestUnReadMsg();
}, 15000)
}, 60000)
}
var d = JSON.stringify({
"token": getUserToken()
})
mui.ajax(jiekou + "Msg/getUnreadMsgNum", {
dataType: "json",
type: "post",
data: d,
processData: false,
success: function(data) {
console.log(JSON.stringify(data));
//alert(JSON.stringify(data))
if(data.error_code == 0) {
if(parseInt(data.msg.gs.count) + parseInt(data.msg.yj.count) + parseInt(data.msg.dk.count) <= 0) {
plus.runtime.setBadgeNumber(0)
return
} else {
shouy.evalJS("showMsgNumber()")
plus.runtime.setBadgeNumber(parseInt(data.msg.gs.count) + parseInt(data.msg.yj.count) + parseInt(data.msg.dk.count));
}
var oldMsg = JSON.parse(plus.storage.getItem("msgNumberUtils"));
if(oldMsg != undefined && oldMsg.gs.end + "" == data.msg.gs.end + "" && oldMsg.yj.end + "" == data.msg.yj.end + "" && oldMsg.dk.end + "" == data.msg.dk.end + "") {
return
}
try {
plus.runtime.setBadgeNumber(parseInt(data.msg.gs.count) + parseInt(data.msg.yj.count) + parseInt(data.msg.dk.count))
plus.device.vibrate(600)
//alert(parseInt(data.msg.gs.count) + "\n" + parseInt(data.msg.yj.count) + "\n" + parseInt(data.msg.dk.count));
// plus.device.beep()
} catch(e) {
//TODO handle the exception
// alert("catch 调用设备提醒功能:\n" + e)
}
// localStorage.setItem("msgNumberUtils", JSON.stringify(data.msg))
plus.storage.setItem("msgNumberUtils", JSON.stringify(data.msg))
// 调用大哥的页面 刷新页面消息数角标
shouy.evalJS("showMsgNumber()")
} else if(data.error_code == -100003) {
clearInterval(lunxunTimer);
plus.runtime.setBadgeNumber(0)
plus.storage.removeItem("msgNumberUtils")
setTimeout(function() {
requestUnReadMsg();
lunxunTimer = setInterval(function() {
requestUnReadMsg();
}, 15000)
}, 60000)
} else {
// var str = errorCodeAnalysis(data.error_code);
// requestUnReadMsg();
// clearInterval(lunxunTimer)
}
},
error: function(xhr, type, errorThrown) {
// plus.nativeUI.closeWaiting();
console.log("error");
console.log(type);
console.log(JSON.stringify(xhr));
console.log(JSON.stringify(errorThrown));
mui.toast("网络开小差了");
setTimeout(function() {
requestUnReadMsg()
}, 5000)
}
});
}
function checkHasUnreadMsg() {
var oldMsg = JSON.parse(plus.storage.getItem("msgNumberUtils"));
// alert("checkHasUnreadMsg:\n" + JSON.stringify(oldMsg));
if(oldMsg == undefined || oldMsg == "" || oldMsg == null) {
return;
}
if(parseInt(oldMsg.gs.count) + parseInt(oldMsg.yj.count) + parseInt(oldMsg.dk.count) > 0) {
// alert(">0");
// alert(JSON.stringify(shouy))
// var s = plus.webview.getWebviewById("shouye");
// s.fire("checkLocationUnreadMsg")
shouy.evalJS("showMsgNumber()")
return
}
}
function checkClientVersion() {
var version = plus.runtime.version
// alert(version)
var checkurl = "http://itunes.apple.com/lookup?id=" + 1181734056
// mui.get(checkurl,function(data){
// console.log("checkClientVersion:\n"+JSON.stringify(data))
// },"json")
mui.ajax({
url: checkurl,
dataType: "json",
type: "get",
success: function(data) {
// console.log("checkClientVersion:\n" + JSON.stringify(data))
// $(".mui-iframe-wrapper").css("z-index","-1")
// alert(JSON.stringify(data.results))
//alert("get version: " + data.results[0].version + "\nreleaseNotes: " + data.results[0].releaseNotes)
//alert("this app version: " + plus.runtime.version + "\nthis app id: " + plus.runtime.appid)
if(data != undefined && data != null && data != "") {
if(data.results != undefined && data.results != null && data.results != "") {
var curr_version = plus.runtime.version
var vv = data.results[0].version
if(versionCompare(vv, curr_version)) {
$("#latest_version_mask,#latest_version_lm").css("display", "block")
// plus.webview.hide(shouy);
// plus.webview.hide(kaoqin);
plus.webview.hide(wode);
// alert("find a new version")
if(vv == undefined || vv == null || vv == "") {
vv = ""
}
$(".versionnumber").html(vv)
if(data.results[0].releaseNotes != undefined && data.results[0].releaseNotes != null) {
$("#latest_version_lm ul").append("<li>" + data.results[0].releaseNotes + "</li>")
}
} else {
plus.webview.show(shouy);
plus.webview.hide(kaoqin);
plus.webview.hide(wode);
}
}
}
},
error: function(e) {
console.log("checkClientVersion error " + JSON.stringify(e))
}
})
}
function versionCompare(newversion, oldversion) {
var v1 = newversion.split(".")
console.log("newversion: " + v1)
var v2 = oldversion.split(".")
console.log("oldversion: " + v2)
var r = false
for(var vi = 0; vi < v1.length; vi++) {
if(v2[vi] && parseInt(v1[vi]) > parseInt(v2[vi])) {
r = true
break
} else if(v2[vi] && parseInt(v1[vi]) == parseInt(v2[vi])) {
continue
} else if(v2[vi] == undefined) {
r = true
break
} else {
break
}
}
console.log("versionCompare(newversion, oldversion) return " + r)
return r
}
</script>
</body> </html>
[安装包]
联系方式
[QQ]876688619
[电话]18380438103
