back API系列&&界面操作API场景演示

show-server/src/main/resources/server-page.xml

@@ -28,6 +28,10 @@
    <action name="BaiduMap" template="template/webapp/plugins/baiduMap.html"></action>
    <action name="Mail" template="template/webapp/plugins/mail.html"></action>
    <action name="VideoCompress" template="template/webapp/plugins/videoCompress.html"></action>
    <action name="PageHandler" template="template/webapp/plugins/pageHandler/pageHandler.html"></action>
    <action name="PageA" template="template/webapp/plugins/pageHandler/pageA.html"></action>
    <action name="PageB" template="template/webapp/plugins/pageHandler/pageB.html"></action>
    <action name="KeyDownListen" template="template/webapp/plugins/pageHandler/keyDownListen.html"></action>
    
    <!-- JS组件 -->
    <action name="Carousel" template="template/webapp/jsComponent/carousel.html"></action>

show-server/src/main/webapp/biz/js/plugins/pageHandler/keydownListen.js

@@ -0,0 +1,12 @@
require(["domReady!","wadeMobile","mobile","util"], function(doc,WadeMobile,Mobile){
	WadeMobile.setKeyListener("back",function(){
		WadeMobile.tip("back物理按键已按下");
		WadeMobile.cleanKeyDownFlag("back");
	},true);
	WadeMobile.setKeyListener("menu",function(){
		WadeMobile.tip("menu物理按键已按下");
	},false);
	WadeMobile.setKeyListener("home",function(){
		WadeMobile.tip("home物理按键已按下");
	},true);
});

show-server/src/main/webapp/biz/js/plugins/pageHandler/pageA.js

@@ -0,0 +1,17 @@
require([ "domReady!", "wadeMobile", "mobile", "util"], function(doc,
		WadeMobile, Mobile) {
	$("#back").click(function() {
		Mobile.back();
	});
	$("#toB").click(function() {
		Mobile.openPage("PageB");
	});
	$("#backCallback").click(function() {
		Mobile.backWithCallback("回调：测试数据来自pageA");
	});
	
	WadeMobile.setBackCallListener(function(e){
		var data = e.data;
		WadeMobile.tip(data);
	});
});

show-server/src/main/webapp/biz/js/plugins/pageHandler/pageB.js

@@ -0,0 +1,15 @@
require([ "domReady!", "wadeMobile", "mobile", "util" ], function(doc,
		WadeMobile, Mobile) {
	$("#back").click(function() {
		Mobile.back();
	});
	$("#backTag").click(function() {
		Mobile.back("PageHandler");
	});
	$("#backCallback").click(function() {
		Mobile.backWithCallback("回调：测试数据来自pageB");
	});
	$("#backTagCallback").click(function() {
		Mobile.backWithCallback("回调：测试数据来自pageB","PageHandler");
	});
});

show-server/src/main/webapp/biz/js/plugins/pageHandler/pageHandler.js

@@ -0,0 +1,52 @@
require(["domReady!","wadeMobile","mobile","jcl","iScroll","util"], function(doc,WadeMobile,Mobile,$,iScroll){
	new iScroll("content");
	$("#openPage").click(function(){
		Mobile.openPage("PageA");
	});
	$("#openWindow").click(function(){
		var param = $.DataMap();
		param.put("LEVEL", 1);
		Mobile.openWindow("UI-CustomWindow", param, function(result) {
			alert(result);
		});
	});
	$("#openTemplate").click(function(){
		Mobile.openTemplate("PageA");
	});
	$("#loadPage").click(function(){
		Mobile.loadPage("PageA");
	});
	$("#loadTemplate").click(function(){
		Mobile.loadTemplate("PageA");
	});
	// 被打开的url，不管停留在哪一层页面，按返回会提示退出
	$("#openUrl").click(function(){
		Mobile.openUrl("https://www.baidu.com");
	});
	// 被打开的url，不管停留在哪一层页面，直接退出至ipu主页面
	$("#loadUrl").click(function(){
		Mobile.loadUrl("https://www.baidu.com");
	});
	// 打开原生的浏览器窗口
	$("#openBroswer").click(function(){
		WadeMobile.openBrowser("https://www.baidu.com");
	});
	// 在IPU应用中集成浏览器功能，打开自定义浏览器
	$("#openIpuBroswer").click(function() {
		WadeMobile.openIpuBrowser("https://www.baidu.com","true");
	});
	$("#back").click(function(){
		Mobile.openPage("KeyDownListen");
	});
	$("#home").click(function(){
		Mobile.openPage("KeyDownListen");
	});
	$("#menu").click(function(){
		Mobile.openPage("KeyDownListen");
	});
	
	WadeMobile.setBackCallListener(function(e){
		var data = e.data;
		WadeMobile.tip(data);
	});
});

show-server/src/main/webapp/ipu/js/ipu.js

@@ -2669,7 +2669,6 @@ Device/OS Detection
    var device = {};  // Classes
    var classNames = [];
    var ua = navigator.userAgent;
    console.log('device');
    // 这中针对ipu框架的情况，待测试
    if(ua.match(/ipumobile/i)){

show-server/src/main/webapp/ipu/js/mobile/expand-mobile.js

@@ -162,6 +162,8 @@ define(["require","jcl"],function(require,Wade) {
				execute("shareByBluetooth", [],err);
			},openBrowser:function(url,err){
				execute("openBrowser",[url],err);
			},openIpuBrowser:function(url,hasTitle,err){
				execute("openIpuBrowser",[url,hasTitle],err);
			},setSmsListener:function(callback,telString,err){
				storageCallback("setSmsListener", callback);
				execute("setSmsListener", [telString],err);

show-server/src/main/webapp/ipu/js/mobile/mobile-client.js

@@ -24,16 +24,27 @@ define(["wadeMobile","clientTool"],function(WadeMobile,clientTool) {
		this.openUrl = function(url, err) {
			WadeMobile.openUrl(url, err);
		};
		this.loadUrl = function(url, err) {
			WadeMobile.loadUrl(url, err);
		};
		/*页面跳转,param为打开页面时调用接口的参数*/
		this.openPage = function(pageAction, param, err) {
			param = param ? param : "";
			WadeMobile.openPage(pageAction, param.toString(), err);
		};
		this.loadPage = function(pageAction, param, err){
			param = param ? param : "";
			WadeMobile.loadPage(pageAction, param.toString(), err);
		};
		/*页面跳转,param为打开页面的映射数据*/
		this.openTemplate = function(pageAction, param, err) {
			param = param ? param : "";
			WadeMobile.openTemplate(pageAction, param.toString(), err);
		};
		this.loadTemplate = function(pageAction, param, err){
			param = param ? param : "";
			WadeMobile.loadTemplate(pageAction, param.toString(), err);
		};
		/*将模板转换成html源码*/
		this.getTemplate = function(action,param,callback,err){
			param = param ? param : "";

show-server/src/main/webapp/ipu/js/mobile/wade-mobile.js

@@ -327,6 +327,25 @@ define(["jcl","base64","ipu/js/mobile/expand-mobile.js","biz/js/common/biz-mobil
	})();
	/**物理按键监听end**/
	
	/**back回调事件监听开始**/
	WadeMobile.backevent = (function(){
		if(WadeMobile.isApp()){
			return {
				backCall:function(data){
					var backCallEvent = document.createEvent('Event');
					backCallEvent.initEvent("backCall",true,true);
					backCallEvent.data = data;
					document.dispatchEvent(backCallEvent);
				}
			};
		}
	})();
	
	WadeMobile.setBackCallListener = function(callback){
		document.addEventListener("backCall", callback);
	}
	/**back回调事件监听结束**/
	
	/************公共方法**************/
	/**
	 * @param {String}  errorMessage   错误信息

show-server/src/main/webapp/template/webapp/plugins/pageHandler/keyDownListen.html

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="UTF-8">
<meta  name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" >
<title>物理按键</title>
{%>template/common/Head.html%}
<script type="text/javascript" src="biz/js/plugins/pageHandler/keydownListen.js"></script>
</head>
<body>
	<div class="c_list l_mt">
		<ul>
			<li id="menu">
				<div class="content">
					<div class="label">
						<div class="title">此界面为物理按键监听展示界面，请点击物理按键试试</div>
					</div>
				</div>
			</li>
		</ul>
	</div>		
</body>
</html>

show-server/src/main/webapp/template/webapp/plugins/pageHandler/pageA.html

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>测试界面A</title> {%>template/common/Head.html%}
<script type="text/javascript" src="biz/js/plugins/pageHandler/pageA.js"></script>
</head>
<body>
	<div class="demo-desc">A界面</div>
	<div class="m_content m_content-nofooter" id="content">
		<div class="ipu-list">
			<ul>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">普通返回上一个界面</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="back">返回</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">打开下一个界面（B）</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="toB">点击</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">返回上一个界面，回调</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="backCallback">返回回调</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

show-server/src/main/webapp/template/webapp/plugins/pageHandler/pageB.html

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>测试界面B</title> {%>template/common/Head.html%}
<script type="text/javascript" src="biz/js/plugins/pageHandler/pageB.js"></script>
</head>
<body>
	<div class="demo-desc">B界面</div>
	<div class="m_content m_content-nofooter" id="content">
		<div class="ipu-list">
			<ul>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">普通返回上一个界面</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="back">返回</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">跳转，直接返回指定界面(首页)</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="backTag">跳转返回</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">返回上一个界面，回调</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="backCallback">返回回调</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">跳转直接返回指定界面(首页)并回调</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="backTagCallback">跳转返回回调</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

show-server/src/main/webapp/template/webapp/plugins/pageHandler/pageHandler.html

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>界面跳转</title> {%>template/common/Head.html%}
<script type="text/javascript"
	src="biz/js/plugins/pageHandler/pageHandler.js"></script>
</head>
<body>
	<div class="demo-desc">界面操作</div>
	<div class="m_content m_content-nofooter" id="content">
		<div class="ipu-list">
			<ul>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">openPage</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="openPage">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">openWindow</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="openWindow">测试</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="ipu-list">
			<ul>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">openTemplate</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="openTemplate">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">loadPage</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="loadPage">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">loadTemplate</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="loadTemplate">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">openUrl</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="openUrl">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">loadUrl</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="loadUrl">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">openBroswer</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="openBroswer">测试</button>
						</div>
					</div>
				</li>
				<li class="ipu-list-item">
					<div class="ipu-list-item-inner">
						<div class="ipu-list-item-title">openIpuBroswer</div>
						<div class="ipu-list-item-after">
							<button class="ipu-btn ipu-btn-s" id="openIpuBroswer">测试</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
	</div>
</body>
</html>

show-server/src/main/webapp/template/webapp/plugins/pluginIndex.html

@@ -95,7 +95,10 @@
	        <p>视频压缩</p>
	    </li>
	    
	    
	    <li class="ipu-col-33 ipu-text-center" data-action="PageHandler">
	   		<span class="ipu-icon fa fa-compress"></span>
	        <p>界面操作</p>
		</li> 
	    
	</ul>
</div>