邮件发送，更多分享，视频压缩插件展示

display-server/etc/server-page.xml

@@ -43,6 +43,10 @@
	<action name="Share" template="template/webapp/plugin/Share.html"></action>
	<!-- 百度地图 -->
	<action name="BaiduMap" template="template/webapp/plugin/BaiduMap.html"></action>
	<!-- 邮件 -->
	<action name="Mail" template="template/webapp/plugin/Mail.html"></action>
	<!-- 视频 -->
	<action name="VideoCompressor" template="template/webapp/plugin/VideoCompress.html"></action>
	
	<!-- Web Component Demo-->
	<action name="WmTab" template="template/webapp/tag/WmTab.html"></action>

display-server/web/biz/js/plugin/mail.js

@@ -0,0 +1,27 @@
require(["domReady!","wadeMobile", "util"], function(doc,WadeMobile) {
	var iscroll = new iScroll("content");
	var picPath = "picture/my.png";
	
	/**
	 * 选择图片 
	 */
	$("#getPicture").tap(function() {
		WadeMobile.getPicture(function(filePath){
			$("#uploadFilePath").html(filePath);
		});
	});
	/**
	 * 发送邮件
	 */
	$("#sendMail").tap(function(){
		var params =new Wade.DataMap();
		params.put("user", $("#mailsender").val());
		params.put("password", $("#mailsenderpwd").val());
		params.put("subject", "this is the test subject");
		params.put("body", "this is the test body");
		params.put("receiver", $("#mailReceiver").val());
		var uploadFile = $("#uploadFilePath").html();
		params.put("attachment", uploadFile);
		WadeMobile.shareImageBymail(params);
	});
});

display-server/web/biz/js/plugin/share.js

@@ -1,32 +1,44 @@
require(["domReady!","wadeMobile","util"], function(doc,WadeMobile){
	var text = $("#shareText").val();
	var imgPathType = 0;
	var musicPathType = 1;
	var videoPathType = 2;
	
	$("#qqFriendText").tap(function(){
		WadeMobile.shareTextQQFriend(text);
	});
	$("#wechatFriendText").tap(function(){
		WadeMobile.shareTextWeChatFriend(text);
	});
	$("#qqFriendImg").tap(function(){
		WadeMobile.shareFileQQFriend(imgPathType);
	});
	$("#wechatFriendImg").tap(function(){
		WadeMobile.shareFileWeChatFriend(imgPathType);
	});
	$("#qqFriendMusic").tap(function(){
		WadeMobile.shareFileQQFriend(musicPathType);
	});
	$("#wechatFriendMusic").tap(function(){
		WadeMobile.shareFileWeChatFriend(musicPathType);
	});
	$("#qqFriendVideo").tap(function(){
		WadeMobile.shareFileQQFriend(videoPathType);
	});
	$("#wechatFriendVideo").tap(function(){
		WadeMobile.shareFileWeChatFriend(videoPathType);
	});
require(["domReady!","wadeMobile","util"], function(doc,WadeMobile){
	var text = $("#shareText").val();
	var imgPathType = 0;
	var musicPathType = 1;
	var videoPathType = 2;
	
	$("#qqFriendText").tap(function(){
		WadeMobile.shareTextQQFriend(text);
	});
	$("#wechatFriendText").tap(function(){
		WadeMobile.shareTextWeChatFriend(text);
	});
	$("#qqFriendImg").tap(function(){
		WadeMobile.shareFileQQFriend(imgPathType);
	});
	$("#wechatFriendImg").tap(function(){
		WadeMobile.shareFileWeChatFriend(imgPathType);
	});
	$("#qqFriendMusic").tap(function(){
		WadeMobile.shareFileQQFriend(musicPathType);
	});
	$("#wechatFriendMusic").tap(function(){
		WadeMobile.shareFileWeChatFriend(musicPathType);
	});
	$("#qqFriendVideo").tap(function(){
		WadeMobile.shareFileQQFriend(videoPathType);
	});
	$("#wechatFriendVideo").tap(function(){
		WadeMobile.shareFileWeChatFriend(videoPathType);
	});
	$("#moreText").tap(function() {
		WadeMobile.shareTextMore(text)
	});
	$("#moreImg").tap(function() {
		WadeMobile.shareFileMore(imgPathType)
	});
	$("#moreMusic").tap(function() {
		WadeMobile.shareFileMore(musicPathType)
	});
	$("#moreVideo").tap(function() {
		WadeMobile.shareFileMore(videoPathType)
	});
});

display-server/web/biz/js/plugin/videocompress.js

@@ -0,0 +1,7 @@
require(["domReady!","wadeMobile", "util"], function(doc,WadeMobile) {
	var iscroll = new iScroll("content");
	//视频压缩
	$("#videoCompressor").tap(function() {
		WadeMobile.videoCompressor();
	});
});

display-server/web/res/js/mobile/expand-mobile.js

@@ -319,6 +319,12 @@ define(["require"],function(require) {
				execute("shareFileQQFriend",[content]);
			},shareFileWeChatFriend:function(content){
				execute("shareFileWeChatFriend",[content]);
			},shareTextMore:function(content){
				execute("shareTextMore",[content]);
			},shareFileMore:function(content){
				execute("shareFileMore",[content]);
			},shareImageBymail:function(param){
				execute("shareImageBymail",[param]);
			},baiduLocation:function(callback,err){
				storageCallback("baiduLocation",callback);
				execute("baiduLocation",[],err);
@@ -331,6 +337,8 @@ define(["require"],function(require) {
			},clickBaiduMap:function(callback,err){
				storageCallback("clickBaiduMap",callback);
				execute("clickBaiduMap",[],err);
			},videoCompressor:function(){
				execute("videoCompressor",[]);
			},alert:function(param){
				execute("alert",[param]);
			},confirm:function(param){

display-server/web/template/webapp/PluginIndex.html

@@ -71,4 +71,13 @@
		<div class="pic"><span class="e_ico-position"></span></div>
		<div class="text">百度地图</div>
	</li>
	<li action="Mail">
		<div class="pic"><span class="e_ico-nfc"></span></div>
		<div class="text">邮件</div>
	</li>
	
	<li action="VideoCompressor">
		<div class="pic"><span class="e_ico-nfc"></span></div>
		<div class="text">视频压缩</div>
	</li>
</ul>

display-server/web/template/webapp/plugin/Mail.html

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="target-densitydpi=device-dpi, 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/plugin/mail.js"></script>
<style>
.shareContent .c_title {
	font-size: 0.24rem;
	margin: 0 -.24rem;
	padding-left: .24rem;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
.shareContent .e_button-blue, .shareContent .e_button-ok {
	height: auto;
	line-height: .4rem;
	width: auto;
	font-size: .18rem;
}
.shareContent .c_submit {
	margin: .2rem 0;
}
.toInputText {
	padding-top: .2rem;
}
.toInputText, .toInputText input {
	line-height: .4rem;
	font-size: .24rem;
	color: #666;
}
.toInputText input {
	border: 1px solid #ccc;
	margin-left: .1rem;
	padding: 0 .05rem;
	height: .4rem;
}
</style>
</head>
<body class="shareContent">
	<div class="c_navBar">
		<div class="left">
			<div class="back">
				<span class="e_ico-back"></span> <span class="text">邮件</span>
			</div>
		</div>
	</div>
	<div class="m_content m_content-nofooter" id="content">
		<div>
			<div class="c_title">发送邮件</div>
			<div class="content">
					
				<div class="toInputText">
					发件人<input type="text" id="mailsender" value="发件人邮箱" 
					onfocus="if(value=='发件人邮箱'){value=''}"
					onblur="if(value==''){value='发件人邮箱'}"/>
				</div>
				
				<div class="toInputText">
					密码<input type="password" id="mailsenderpwd" value="发件人密码" 
					onfocus="if(value=='发件人密码'){value=''}"
					onblur="if(value==''){value='发件人密码'}"/>
				</div>
			
				<div class="toInputText">
					收件人<input type="text" id="mailReceiver" value="收件人邮箱" 
					onfocus="if(value=='收件人邮箱'){value=''}"
					onblur="if(value==''){value='收件人邮箱'}"/>
				</div>
			</div>
			<div>
		<div class="c_list">
			<ul>
				<li>
					<div class="content">
						<div class="main" id="getPicture">
							<div class="title">选择图片</div>
							<div class="info">
								图片路径为：<span id="uploadFilePath"></span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
			<div class="c_submit">
				<ul>
					<li><button class="e_button-ok" id="sendMail">发送邮件</button></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

display-server/web/template/webapp/plugin/Share.html

@@ -1,98 +1,102 @@
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="target-densitydpi=device-dpi, 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/plugin/share.js"></script>
<style>
	.shareContent .c_title{
		font-size:0.24rem;
		margin:0 -.24rem;
		padding-left:.24rem;
		background-color:#fff;
		border-bottom:1px solid #ccc;
		border-top:1px solid #ccc;
	}
	.shareContent .e_button-blue, .shareContent .e_button-ok{
		height:auto;
		line-height:.4rem;
		width:auto;
		font-size:.18rem;
	}
	.shareContent .c_submit{
		margin: .2rem 0;
	}
	.toInputText{
		padding-top:.2rem;
	}
	.toInputText, .toInputText input{
		line-height:.4rem;
		font-size:.24rem;
		color:#666;
	}
	.toInputText input{
		border:1px solid #ccc;
		margin-left:.1rem;
		padding:0 .05rem;
		height:.4rem;
	}
</style>
</head>
<body class="shareContent">
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span>
			<span class="text">分享</span>
		</div>
	</div>
</div>
<div class="m_content m_content-nofooter" id="content">
<div >
	<div class="c_title">文本&网址</div>
		<div class="content">
			<div class="toInputText">输入文本<input type="text" id="shareText" value="www.aiipu.com"/></div>
		</div>
		
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendText">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendText">微信好友</button></li>
			</ul>
		</div>
		
	<div class="c_title">图片</div>	
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendImg">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendImg">微信好友</button></li>
			</ul>
		</div>
		
	<div class="c_title">音频</div>	
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendMusic">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendMusic">微信好友</button></li>
			</ul>
		</div>	
	
	<div class="c_title">视频</div>	
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendVideo">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendVideo">微信好友</button></li>
			</ul>
		</div>	
		
</div>		
</div>
	
	
</body>
<!DOCTYPE html>
<html class="s_bs">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="target-densitydpi=device-dpi, 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/plugin/share.js"></script>
<style>
	.shareContent .c_title{
		font-size:0.24rem;
		margin:0 -.24rem;
		padding-left:.24rem;
		background-color:#fff;
		border-bottom:1px solid #ccc;
		border-top:1px solid #ccc;
	}
	.shareContent .e_button-blue, .shareContent .e_button-ok{
		height:auto;
		line-height:.4rem;
		width:auto;
		font-size:.18rem;
	}
	.shareContent .c_submit{
		margin: .2rem 0;
	}
	.toInputText{
		padding-top:.2rem;
	}
	.toInputText, .toInputText input{
		line-height:.4rem;
		font-size:.24rem;
		color:#666;
	}
	.toInputText input{
		border:1px solid #ccc;
		margin-left:.1rem;
		padding:0 .05rem;
		height:.4rem;
	}
</style>
</head>
<body class="shareContent">
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span>
			<span class="text">分享</span>
		</div>
	</div>
</div>
<div class="m_content m_content-nofooter" id="content">
<div >
	<div class="c_title">文本&网址</div>
		<div class="content">
			<div class="toInputText">输入文本<input type="text" id="shareText" value="www.aiipu.com"/></div>
		</div>
		
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendText">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendText">微信好友</button></li>
				<li><button class="e_button-blue" id="moreText">更多分享</button></li>
			</ul>
		</div>
		
	<div class="c_title">图片</div>	
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendImg">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendImg">微信好友</button></li>
				<li><button class="e_button-blue" id="moreImg">更多分享</button></li>
			</ul>
		</div>
		
	<div class="c_title">音频</div>	
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendMusic">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendMusic">微信好友</button></li>
				<li><button class="e_button-blue" id="moreMusic">更多分享</button></li>
			</ul>
		</div>	
	
	<div class="c_title">视频</div>	
		<div class="c_submit">
			<ul>
				<li><button class="e_button-blue" id="qqFriendVideo">QQ好友</button></li>
				<li><button class="e_button-ok" id="wechatFriendVideo">微信好友</button></li>
				<li><button class="e_button-blue" id="moreVideo">更多分享</button></li>
			</ul>
		</div>	
		
</div>		
</div>
	
	
</body>
</html>

display-server/web/template/webapp/plugin/VideoCompress.html

@@ -0,0 +1,46 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta http-equiv="Content-Type" content="text/html; 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/plugin/videocompress.js"></script>
<style>
.no-border {
	border: 0;
}
</style>
</head>
<body>
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span>
			<span class="text">视频压缩</span>
		</div>
	</div>
</div>
<div class="m_content m_content-nofooter" id="content" >
<div>
	<div class="c_title">视频压缩</div>
	<div class="c_list">
		<ul>
			<li>
				<div class="content">
					<div class="main">
						<div class="title">视频压缩</div>
						<div class="info">单击开始压缩视频</div>
					</div>
					<div class="fn fn-2" id="videoCompressor">开始压缩</div>
				</div>
			</li>
		</ul>
	</div>
</div>
</div>
</body>
</html>