我使用的是mui hello案例的中的，tab bar（选项卡）--底部选项卡-webview模式的案例为基础。涉及到三个子webview，里面有ajax请求。项目里面用到了jquery。。
问题1：android APP断网启动后，双击返回退出偶尔失败。
问题2：在低端配置手机中，反复退出和进入app（2-3次浮现），出现白屏卡死现象。
麻烦各位大大，解答下。我都困惑2天了。
下面是关键js文件。
1、index.js
try{
//mui初始化
mui.init({
keyEventBind: {
backbutton: true,
menubutton: true
}
});
var subpages = ['page/Component/index-tab-webview-home.html', 'page/Component/index-tab-webview-talent.html', 'page/Component/index-tab-webview-share.html'];
var subpage_style = {
top: '45px',
bottom: '51px'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
//初始导航界面
//读取本地存储，检查是否为首次启动
var showGuide = plus.storage.getItem("lauchFlag");
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
if(showGuide) {
//有值，说明已经显示过了，无需显示；
//关闭splash页面；
plus.navigator.closeSplashscreen();
plus.navigator.setFullscreen(false);
//预加载
preload();
} else {
//显示启动导航
mui.openWindow({
id: 'guide',
url: 'page/guide.html',
styles: {
popGesture: "none"
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
}
});
//延迟的原因：优先打开启动导航页面，避免资源争夺
setTimeout(function() {
//预加载
preload();
}, 400);
}
// mui.getJSON('json/version.json', null, function(data) {
// data = JSON.parse(JSON.stringify(data));
// var vs = parseInt(data.version);
// var upgrade = data.upgrade;
// mui.ajax('http://www.quzhuanpan.com/source/getVersion.action',{
// dataType:'json',
// type:'get',
// timeout:3000,
// async: true,
// headers:{'Content-Type':'application/json'},
// success:function(data){
// if(!!data){
// data = JSON.parse(data);
// var v = data.vno;
// var version = parseInt(v);
// if(vs != version){
// var future_v = "v";
// if(parseInt(version/100) - parseInt(vs/100) >0){
// mui.confirm('你版本落下太多了，请下载最新版！', '', ['是'], function(e) {
// if (e.index == 0) {
// if(plus.os.name=="Android"){
// plus.runtime.quit();
// }else{
// outSet( "此平台不支持直接退出程序，请按Home键切换应用" );
// }
// }
// })
// }else{
// for(var i=0;i<v.length;i++){
// future_v = future_v+v.substring(i,i+1)+".";
// }
// future_v = future_v.substring(0,future_v.length-1);
// mui.confirm('发现了最新版'+future_v+'，是否更新？', '', ['否', '是'], function(e) {
// if (e.index == 1) {
// plus.runtime.openURL(upgrade);
// }
// })
// }
// }
// }
// },
// error:function(xhr,type,errorThrown){
//
// }
// });
// });
});
function preload() {
var self = plus.webview.currentWebview();
for (var i = 0; i < 3; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
}
//当前激活选项
var activeTab = subpages[0];
// var title = document.getElementById("title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
// title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("index-home");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
//当input框获取焦点，页面转到搜索界面
$(".app-search").on("tap",function(){
var question = $("#inp-search").val();
mui.openWindow({
url: 'page/search.html',
id:'search',
extras:{
"q":question
}
});
$("#inp-search").val("");
$("#inp-search").blur();
});
//搜索按钮事件输入法确定
document.querySelector("input").addEventListener('keydown', function(){
if(event.keyCode == 13){
document.activeElement.blur();//收回软键盘
var question = $("#inp-search").val();
mui.openWindow({
url: 'page/search.html',
id:'search',
extras:{
"q":question
}
});
$("#inp-search").val("");
$("#inp-search").blur();
}
}, false);
//input焦点离开事件
$("body").on("tap",function(){
$("#inp-search").blur();
})
document.getElementById("info").addEventListener('tap',function () {
var btnArray = [{title:"版本情况"},{title:"使用帮助"},{title:"关于去转盘"}];
plus.nativeUI.actionSheet( {
cancel:"取消",
buttons:btnArray
}, function(e){
var index = e.index;
switch (index){
case 0:
break;
case 1:
mui.openWindow({
url: 'page/version.html',
id:'useHelp'
});
break;
case 2:
mui.openWindow({
url: 'page/useHelp.html',
id:'useHelp'
});
break;
case 3:
mui.openWindow({
url: 'page/support.html',
id:'support'
});
break;
}
} );
});
}catch(e){
mui.toast('系统发生了未知错误');
}子webview页面的js，home.js
try{
//热门排行
var base_hot = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%8C%86%E5%8C%86%E9%82%A3%E5%B9%B4&rsv_pq=bd46659a00012b2b&rsv_t=a26aYoNvPfLZEZwNU5l5OOBSOS%2Fp%2BZDmkREGwiljANTavEkYS03HQsDdit0&rqlang=cn&rsv_enter=1&rsv_sug3=7&rsv_sug1=3&rsv_slog=ipt_change";
var base_search_rank = "http://www.iqiyi.com/v_19rro1v2ew.html?vfm=2008_aldbd";
var fileList1 = ["射雕英雄传","你的名字","火影忍者：博人传","速度与激情","生化危机","大秦帝国","天龙八部","功夫瑜伽","变形金刚","一个人的武林"];
var searchList = ["你的名字","刀剑神域","inventor精简版","寄生兽动漫","四级作文翻译","公务员","血战钢锯岭","初恋50次","海边的曼彻斯特","不落俗套的成功"];
mui.plusReady(function() {
})
mui.init({
keyEventBind: {
backbutton: false,
menubutton: true
}
});
mui.ajax(''+$(".sx").clone()+'',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
async: true, //同步操作
headers:{'Content-Type':'application/json'},
success:function(data){
if(!!data){
data = JSON.parse(data);
var fileList = data.fileList;
var html = "";
if(fileList.length == 0){
fileList = fileList1;
}
appendHot(fileList,$(".hot-list"));
}
$(".loading").hide();
},
error:function(xhr,type,errorThrown){
appendHot(fileList1,$(".hot-list"));
$(".loading").hide();
}
});
mui.ajax(''+$(".ssx").clone()+'',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
async: true, //同步操作
headers:{'Content-Type':'application/json'},
success:function(data){
if(!!data){
data = JSON.parse(data);
var searchRank = data.searchRank;
var html = "";
if(searchRank.length > 0){
appendSearch(searchRank,$(".hot-search-rank"));
}else{
appendHot(searchList,$(".hot-search-rank"));
}
$(".loading").hide();
}
},
error:function(xhr,type,errorThrown){
appendHot(searchList,$(".hot-search-rank"));
$(".loading").hide();
}
});
function appendHot(list,$obj){
var html = "";
for(var i=0; i<list.length; i++){
html += "<li class='mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6'>"+
"<p class='s'>"+list[i]+"</p>"+
"</li>";
}
$obj.append(html);
}
function appendSearch(list,$obj){
var html = "";
for(var i=0; i<list.length; i++){
html += "<li class='mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6'>"+
"<p class='s'>"+list[i].keyword+"</p>"+
"</li>";
}
$obj.append(html);
}
//热门资源搜索
$(".hot-search-rank").on("tap",".s",function(){
var question = $(this).text();
mui.openWindow({
url: '../../page/search.html',
id:'search',
extras:{
"q":question
}
});
});
$(".hot-list").on("tap",".s",function(){
var question = $(this).text();
mui.openWindow({
url: '../../page/search.html',
id:'search',
extras:{
"q":question
}
});
});
mui.ready(function(){
document.getElementById('film').addEventListener('tap', function() {
mui.openWindow({
url: "../../page/film.html" ,
show:{
autoShow:false
}
});
});
document.getElementById('music').addEventListener('tap', function() {
mui.openWindow({
url: "../../page/music.html" ,
show:{
autoShow:false
}
});
});
document.getElementById('ebook').addEventListener('tap', function() {
mui.openWindow({
url: "../../page/ebook.html" ,
show:{
autoShow:false
}
});
});
document.getElementById('software').addEventListener('tap', function() {
mui.openWindow({
url: "../../page/software.html" ,
show:{
autoShow:false
}
});
});
document.getElementById('bt').addEventListener('tap', function() {
mui.openWindow({
url: "../../page/bt.html" ,
show:{
autoShow:false
}
});
});
document.getElementById('other').addEventListener('tap', function() {
mui.openWindow({
url: "../../page/other.html" ,
show:{
autoShow:false
}
});
});
//页面滚动
mui('.mui-scroll-wrapper').scroll({
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: false, //是否显示滚动条
deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: false //是否启用回弹
});
//页面启动轮播
var gallery = mui('.mui-slider');
gallery.slider({
interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
});
})
}catch(e){
mui.toast('系统发生了未知错误');
}
2 个回复
状态的状zhuang
奇怪了，我也遇到了这样的问题，不知道是因为近期更新了，还是使用了 uni.getversion
状态的状zhuang
奇怪了，我也遇到了这样的问题，不知道是因为近期更新了，还是使用了 uni.getversion