zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!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)'});
}
// 使用原生View控件作为动画模板显示窗口 
function showWithWaiting(){
	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>