<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
var nWaiting,nTitle; // 原生view的等待界面和title
var touchX; // nWaiting的点击坐标的x数值
var backPressed; //返回箭头是否处于按下状态
var contentWebview=null; //准备打开网址的webview
var bitmap=null; // 返回图标
var topoffset=0;
// H5 plus事件处理
function plusReady(){
if(plus.navigator.isImmersedStatusbar()){// 兼容沉浸式状态栏模式
topoffset=Math.round(plus.navigator.getStatusbarHeight());
}
var bdata = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAACcklEQVR4nO3a0XESURiG4TeO99iBWoGZ+RvADtKBpAPtwBLsANJBrEAs4MyYDmIHSQXkgk0mMLK7ILt8/+F778ici394OGfDsher1Qqn05tTD+A2M4hYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYb089wNCVUq6Ay+blfUQsTjhOZxc1P9tbSlkAX7b+/C0ifpxgnF5Ve2TtwAD4OvIoe1UlSAsGwPsRR9m76kA6MAD+jjTKQVUF0gMD4HaEUQ6umot6T4ybiJgNP83hVbFDasGACnZIT4yfEXE1wjj/Xeod0hPjDpgNPsyRSguyB8Y0Ih6Gn+g4pQSpFQMSgtSMAclAaseARCDngAFJQM4FAxKAnBMGiH8xLKVMgV89ln6MiPthpxkn6R0SEUvgusfSZSnlsnuZftI75LlSygyYdyx7ZH1s/Rl+ouFKAQIvx9ctMGlZlh4lDQhAcywtqRhF+hqyXfMmT1m/6buasL6mzMaY6dilAoENlLuWZRNgnhEl1ZH1ulLKO9bH16eOpdfqz2K9Lt0Oea75EjilfadAsp2SFgQ2UH53LJ2XUr4PPtARSntkbVfL7+rVgEBvlM/NHQDJUh9Z2zWf/puOZbPhJzm8qkDgBaXt/teHcSY5rOpAAJp/c/vclJSrShDYifKI+NPvVV3U/1VzU3LavFyo/25SPUi2qj2ysmYQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsZ4Ak9fPFwUy/HsAAAAASUVORK5CYII=';
bitmap = new plus.nativeObj.Bitmap('back');
bitmap.loadBase64Data(bdata, function(){
bitmap.isLoadSuccess = true;
nWaiting&&nWaiting.drawBitmap(bitmap,null,{top:topoffset+'px',left:'0px',width:'44px',height:'44px'},'backicon');
console.log('Back bitmap load success');
}, function(e){
console.log('Back bitmap load failed: '+JSON.stringify(e));
});
//创建nWaiting
creatWaiting(); }
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready',plusReady,false);
}
// 创建原生View控件
function creatWaiting(){
console.log('creatWaiting: '+topoffset);
//判断view是否已存在，避免重复创建，尤其调试刷新网页时很容易触发重复创建
nWaiting = plus.nativeObj.View.getViewById('nWaiting');
if(nWaiting){
return;
}
nWaiting = new plus.nativeObj.View('nWaiting',{top:'0px',left:'0px',height:'100%',width:'100%'});
nWaiting.interceptTouchEvent(true);
//初始化绘制nwaiting界面
nWaiting.drawRect('#D74B28',{top:'0px',left:'0px',height:(topoffset+44)+'px',width:'100%'}) //绘制title背景色
bitmap&&bitmap.isLoadSuccess&&nWaiting.drawBitmap(bitmap,null,{top:topoffset+'px',left:'0px',width:'44px',height:'44px'},'backicon');
nWaiting.drawText( '标题', {top:topoffset+'px',left:'0px',width:'100%',height:'44px'}, {size:'17px',color:'#CCCCCC'});
nWaiting.drawRect('#EEEEEE',{top:(topoffset+44)+'px',left:'0px',width:'100%'}) //绘制等待内容区背景色
nWaiting.drawText( '加 载 中 ...', {top:(topoffset+44)+'px',left:'0px',width:'100%',height:'50%'}, {size:'12px',color:'rgb(100,100,100)'});
/**非jpg图片切换正常**/
nWaiting.drawBitmap('/img/asr/asr.jpg', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');
nWaiting.addEventListener("click", function(e){
console.log("点击原生控件："+JSON.stringify(e));
if(e.clientY<300){
nWaiting.drawBitmap( '/img/asr/asr.jpg', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');
}else{
nWaiting.drawBitmap( '/img/asr/asr.png', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');
}
}, false);
nWaiting.show();
/**/
/**gif图片，存在暂留现象，多次切换闪退
nWaiting.drawBitmap('/img/asr/asr.gif', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img' );
nWaiting.addEventListener("click", function(e){
console.log("点击原生控件："+JSON.stringify(e));
//nWaiting.reset();//对gif无效
if(e.clientY<300){
nWaiting.drawBitmap( '/img/asr/asr.gif', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');
}else{
nWaiting.drawBitmap( '/img/asr/closing.gif', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');
}
}, false);
nWaiting.show();
/**/
/**使用Bitmap加载非gif图片正常
var bitmap1 = new plus.nativeObj.Bitmap('bmp1');
bitmap1.load('/img/asr/asr.jpg',function(){
console.log('load success!');
},function(e){
console.log('load failed! '+JSON.stringify(e));
});
nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');
nWaiting.addEventListener("click", function(e){
console.log("点击原生控件："+JSON.stringify(e));
if(e.clientY<300){
bitmap1.load('/img/asr/asr.jpg',function(){
console.log('jpg load success!');
},function(e){
console.log('load failed! '+JSON.stringify(e));
});
nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');
}else{
bitmap1.load('/img/asr/head.jpg',function(){
console.log('head load success!');
},function(e){
console.log('load failed! '+JSON.stringify(e));
});
nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');
}
}, false);
nWaiting.show();
/****/
/**使用Bitmap加载gif图片异常，一直显示首次加载的gif，点击不再更新
var bitmap1 = new plus.nativeObj.Bitmap('bmp1');
bitmap1.load('/img/asr/closing.gif',function(){
console.log('load success!');
},function(e){
console.log('load failed! '+JSON.stringify(e));
});
nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');
nWaiting.addEventListener("click", function(e){
console.log("点击原生控件："+JSON.stringify(e));
if(e.clientY<300){
bitmap1.load('/img/asr/asr.gif',function(){
console.log('gif load success!');
},function(e){
console.log('load failed! '+JSON.stringify(e));
});
nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');
}else{
bitmap1.load('/img/asr/closing.gif',function(){
console.log('closing load success!');
},function(e){
console.log('load failed! '+JSON.stringify(e));
});
nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');
}
}, false);
nWaiting.show();
/****/ }
// 使用原生View控件作为动画模板显示窗口
function showWithWaiting(){
nWaiting.show();
return;
var bShow=bUpdate=false;
contentWebview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'contendWebview', {
titleNView:{
autoBackButton: true,
backgroundColor: '#D74B28',
titletText: '标题',
titleColor: '#CCCCCC',
}
});
contentWebview.addEventListener('close', function(){
contentWebview=null;
});
contentWebview.addEventListener('titleUpdate', function(){
bUpdate=true;
bShow&&nWaiting.hide();
}, false);
contentWebview.addEventListener('loaded', function(){// 兼容titleUpdate事件不触发的情况
bUpdate||(bUpdate=true,bShow&&nWaiting.hide());
}, false);
contentWebview.show('pop-in', null, function(){
bShow=true;
bUpdate&&nWaiting.hide();
}, {capture:nWaiting});
/**
**/ }
// 重写返回处理
var _back=window.back;
function safeback(){
contentWebview?contentWebview.close('pop-out'):(bitmap&&bitmap.clear(),nWaiting&&nWaiting.clear(),_back());
}
window.back=safeback;
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
</head>
<body>
<p class="des">
使用nview来做转场动画，以及使用原生view做标题栏。
</p>
<div class="button" onclick="showWithWaiting()">演示</div>
<p class="des" style="font-weight:bold;text-indent:0;">
逻辑简述：
</p>
<p class="des">
启动后先创建一个原生waiting界面，但不显示。
点击show按钮后，原生waiting做动画进来，同时然后创建一个带原生View控件导航栏的contentWebview加载网络页面，等titleUpdate后显示contentWebview并关闭原生waiting界面。
</p>
</body>
</html>
1 个回复
3***@qq.com (作者)