更新login工程模板

examples/login/README.md

-# 概述
+## 简单概述
 这是带登录和设置功能的mui模板项目，主要为了演示登录流程及设置界面div窗口切换效果；
 
 ## 核心功能
-1.启动App后校验登录状态，若已登录，直接跳转应用首页；否则，显示登录页面；
-
-2.支持本地注册；
-
-3.支持设置手势密码，登录时可使用手势密码代替账号、密码；
-
-4.支持评分、分享、拨打客服电话
+1. 启动App后校验登录状态，若已登录，直接跳转应用首页；否则，显示登录页面；
+2. 支持本地注册；
+3. 支持设置手势密码，登录时可使用手势密码代替账号、密码；
+4. 支持评分、分享、拨打客服电话

examples/login/css/feedback-page.css

+.feedback body {
+	background-color: #EFEFF4;
+}
+.feedback input,
+.feedback textarea {
+	border: none !important;
+}
+.feedback textarea {
+	height: 100px;
+	margin-bottom: 0 !important;
+	padding-bottom: 0 !important;
+}
+.feedback .row {
+	width: 100%;
+	background-color: #fff;
+}
+.feedback p {
+	padding: 10px 15px 0;
+}
+.feedback button#submit { 
+	width: 90%;
+	height: 46px;
+	left: 50%;
+	-webkit-transform: translate(-50%);
+}
+.feedback .hidden {
+	display: none;
+}
+.feedback .image-list {
+	width: 100%;
+	height: 85px;
+	background-size: cover;
+	padding: 10px 10px;
+	overflow: hidden;
+}
+.feedback .image-item {
+	width: 65px;
+	height: 65px;
+	background-image: url(../images/iconfont-tianjia.png);
+	background-size: 100% 100%;
+	display: inline-block;
+	position: relative;
+	border-radius: 5px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	border: solid 1px #e8e8e8;
+}
+.feedback .image-item input[type="file"] {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+	z-index: 0;
+}
+.feedback .image-item.space {
+	border: none;
+}
+.feedback .image-item .image-close {
+	position: absolute;
+	display: inline-block;
+	right: -6px;
+	top: -6px;
+	width: 20px;
+	height: 20px;
+	text-align: center;
+	line-height: 20px;
+	border-radius: 12px;
+	background-color: #FF5053;
+	color: #f3f3f3;
+	border: solid 1px #FF5053;
+	font-size: 9px;
+	font-weight: 200;
+	z-index: 1;
+}
+.feedback .image-item.space .image-close {
+	display: none;
+}
\ No newline at end of file

examples/login/js/feedback-page.js

+(function(mui, window, document, undefined) {
+	mui.init();
+	var get = function(id) {
+		return document.getElementById(id);
+	};
+	var qsa = function(sel) {
+		return [].slice.call(document.querySelectorAll(sel));
+	};
+	var ui = {
+		question: get('question'),
+		contact: get('contact'),
+		imageList: get('image-list'),
+		submit: get('submit')
+	};
+	ui.clearForm = function() {
+		ui.question.value = '';
+		ui.contact.value = '';
+		ui.imageList.innerHTML = '';
+		ui.newPlaceholder();
+	};
+	ui.getFileInputArray = function() {
+		return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
+	};
+	ui.getFileInputIdArray = function() {
+		var fileInputArray = ui.getFileInputArray();
+		var idArray = [];
+		fileInputArray.forEach(function(fileInput) {
+			if (fileInput.value != '') {
+				idArray.push(fileInput.getAttribute('id'));
+			}
+		});
+		return idArray;
+	};
+	var imageIndexIdNum = 0;
+	ui.newPlaceholder = function() {
+		var fileInputArray = ui.getFileInputArray();
+		if (fileInputArray &&
+			fileInputArray.length > 0 &&
+			fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
+			return;
+		}
+		imageIndexIdNum++;
+		var placeholder = document.createElement('div');
+		placeholder.setAttribute('class', 'image-item space');
+		var closeButton = document.createElement('div');
+		closeButton.setAttribute('class', 'image-close');
+		closeButton.innerHTML = 'X';
+		closeButton.addEventListener('click', function(event) {
+			event.stopPropagation();
+			event.cancelBubble = true;
+			setTimeout(function() {
+				ui.imageList.removeChild(placeholder);
+			}, 0);
+			return false;
+		}, false);
+		var fileInput = document.createElement('input');
+		fileInput.setAttribute('type', 'file');
+		fileInput.setAttribute('accept', 'image/*');
+		fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
+		fileInput.addEventListener('change', function(event) {
+			var file = fileInput.files[0];
+			if (file) {
+				var reader = new FileReader();
+				reader.onload = function() {
+					//处理 android 4.1 兼容问题
+					var base64 = reader.result.split(',')[1];
+					var dataUrl = 'data:image/png;base64,' + base64;
+					//
+					placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
+				}
+				reader.readAsDataURL(file);
+				placeholder.classList.remove('space');
+				ui.newPlaceholder();
+			}
+		}, false);
+		placeholder.appendChild(closeButton);
+		placeholder.appendChild(fileInput);
+		ui.imageList.appendChild(placeholder);
+	};
+	ui.newPlaceholder();
+	ui.submit.addEventListener('tap', function(event) {
+		if (ui.question.value == '' ||
+			(ui.contact.value != '' &&
+				ui.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
+			return mui.toast('信息填写不符合规范');
+		} 
+		plus.nativeUI.showWaiting();
+		feedback.send({
+			question: ui.question.value,
+			contact: ui.contact.value,
+			images: ui.getFileInputIdArray()
+		}, function() {
+			plus.nativeUI.closeWaiting();
+			mui.toast('感谢您的建议~');
+			ui.clearForm();
+			mui.back();
+		});
+	}, false);
+})(mui, window, document, undefined);
\ No newline at end of file

examples/login/js/feedback.js

+(function($, feedback, window, document) {
+
+	/*************** 环信配置开始 ****************/
+	//以后信息更改后，需卸载 “调试 app” 重新调用运行
+	var APP_KEY = 'dcloudio#mui';
+	var CUSTOM_ID = 'customer';
+	/*************** 环信配置结束 ****************/
+
+	//一组 “常量”
+	var PASSWORD = 'pass01!';
+	var LOCAL_STORE_KEY = 'mui://user';
+	var USER_PREFIX = 'mui-user-';
+
+
+	/**
+	 * 生成一个 IM 用户名
+	 **/
+	var createUsername = function() {
+		return USER_PREFIX + (new Date()).getTime();
+	};
+
+	/**
+	 * 获取用户，如果在本地存储中已有用户则直接返回。
+	 * 否则，注册新的用户
+	 **/
+	feedback.getUser = function(callback) {
+		var storeUserText = localStorage.getItem(LOCAL_STORE_KEY);
+		if (storeUserText) {
+			if (callback) callback(JSON.parse(storeUserText));
+			return;
+		}
+		var newUsername = createUsername();
+		Easemob.im.Helper.registerUser({
+			username: newUsername,
+			password: PASSWORD,
+			appKey: APP_KEY,
+			success: function(result) {
+				var userInfo = {
+					username: newUsername,
+					password: PASSWORD
+				};
+				localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(userInfo));
+				if (callback) callback(userInfo);
+			},
+			error: function(e) {
+				plus.nativeUI.toast(e.message);
+			}
+		});
+	};
+
+	/**
+	 * 登录环信息服务器
+	 **/
+	feedback.login = function(callback) {
+		feedback.getUser(function(user) {
+			var conn = new Easemob.im.Connection();
+			conn.init({
+				onOpened: function() {
+					//alert("成功登录");
+					conn.setPresence();
+					if (callback) callback(user, conn);
+				}
+			});
+			conn.open({
+				user: user.username,
+				pwd: user.password,
+				appKey: APP_KEY
+			});
+		});
+	};
+
+	/**
+	 * 发送反馈信息
+	 **/
+	feedback.send = function(content, callback) {
+		feedback.login(function(user, conn) {
+			//发送文本消息
+			var msgText = '问题:' + content.question;
+			if (content.contact) {
+				msgText += '; 联系方式:' + content.contact + ';'
+			}
+			conn.sendTextMessage({
+				to: CUSTOM_ID,
+				msg: msgText,
+				type: "chat"
+			});
+			//如果没有截图
+			if (!content.images || content.images.length < 1) {
+				if (callback) callback();
+				return;
+			}
+			//如果有截图
+			var sendImageCount = 0;
+			var hasError = false;
+			content.images.forEach(function(fileInputId) {
+				//alert(fileInputId)
+				conn.sendPicture({
+					fileInputId: fileInputId,
+					to: CUSTOM_ID,
+					onFileUploadError: function(error) {
+						//处理图片上传失败
+						alert(JSON.stringify(error));
+						hasError = true;
+					},
+					onFileUploadComplete: function(data) {
+						//处理图片上传成功，如本地消息显示
+						sendImageCount++;
+						if (!hasError && sendImageCount >= content.images.length) {
+							if (callback) callback();
+						}
+					}
+				});
+			});
+			//--
+		});
+	};
+
+})(mui, window.feedback = {}, window, document);
\ No newline at end of file

examples/login/login.html

@@ -175,7 +175,7 @@
 									plus.nativeUI.toast("登录认证成功");
 									//alert(JSON.stringify(auth.authResult));
 									auth.getUserInfo(function() {
-										plus.nativeUI.toast("获取用户信息成功：");
+										plus.nativeUI.toast("获取用户信息成功");
 										//alert(JSON.stringify(auth.userInfo));
 										var name = auth.userInfo.nickname || auth.userInfo.name;
 										app.createState(name, function() {

examples/login/setting.html

@@ -77,6 +77,7 @@
 			}
 			.mui-navbar .mui-bar .mui-title {
 				display: inline-block;
+				position: static;
 				width: auto;
 			}
 			.mui-page-shadow {
@@ -134,6 +135,7 @@
 				display: none;
 			}
 		</style>
+		<link rel="stylesheet" type="text/css" href="./css/feedback-page.css" />
 	</head>
 
 	<body>
@@ -171,6 +173,9 @@
 							<li class="mui-table-view-cell">
 								<a id="tel" class="mui-navigate-right">客服电话</a>
 							</li>
+							<li class="mui-table-view-cell">
+								<a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
+							</li>
 						</ul>
 						<ul class="mui-table-view mui-table-view-chevron">
 							<li class="mui-table-view-cell">
@@ -235,11 +240,42 @@
 				</div>
 			</div>
 		</div>
+
+		<div id="feedback" class="mui-page feedback">
+			<div class="mui-navbar-inner mui-bar mui-bar-nav">
+				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
+					<span class="mui-icon mui-icon-left-nav"></span>设置
+				</button>
+				<h1 class="mui-center mui-title">问题反馈</h1>
+			</div>
+			<div class="mui-page-content">
+				<p>问题和意见</p>
+				<div class="row mui-input-row">
+					<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
+				</div>
+				<p>图片(选填,提供问题截图)</p>
+				<div id='image-list' class="row image-list">
+				</div>
+				<p>QQ/邮箱</p>
+				<div class="mui-input-row">
+					<input id='contact' type="text" class="mui-input-clear  contact" placeholder="(选填,方便我们联系你 )" />
+				</div>
+				<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
+			</div>
+			<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。</p>
+		</div>
+
 	</body>
 	<script src="./js/mui.min.js "></script>
 	<script src="./js/mui.view.js "></script>
-	<script src="js/mui.locker.js"></script>
-	<script src="js/app.js"></script>
+	<script src='./libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
+	<script src='./libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
+	<script src='./libs/easymob-webim-sdk/json2.js'></script>
+	<script src="./libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
+	<script src='./js/feedback.js'></script>
+	<script src="./js/feedback-page.js"></script>
+	<script src="./js/mui.locker.js"></script>
+	<script src="./js/app.js"></script>
 	<script>
 		mui.init();
 		 //初始化单页view
@@ -248,7 +284,7 @@
 		});
 		 //初始化单页的区域滚动
 		mui('.mui-scroll-wrapper').scroll();
-		 //分享操作
+		 //分享操作 
 		var shares = {};
 		mui.plusReady(function() {
 			plus.share.getServices(function(s) {
@@ -274,6 +310,8 @@
 					id: "sinaweibo"
 				}, {
 					id: "tencentweibo"
+				}, {
+					id: "qq"
 				}],
 				bts = [{
 					title: "发送给微信好友"
@@ -283,15 +321,9 @@
 					title: "分享到新浪微博"
 				}, {
 					title: "分享到腾讯微博"
-				}];
-			if (plus.os.name == "iOS") {
-				ids.push({
-					id: "qq"
-				});
-				bts.push({
+				}, {
 					title: "分享到QQ"
-				});
-			}
+				}];
 			plus.nativeUI.actionSheet({
 				cancel: "取消",
 				buttons: bts
@@ -337,11 +369,11 @@
 			if (mui.os.ios) {
 				location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8';
 			} else if (mui.os.android) {
-				 plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){ 
-		        		plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){ 
-				        mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持"); 
-		        		}, "com.qihoo.appstore" );
-			    }, "com.tencent.android.qqdownloader" ); 
+				plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
+					plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
+						mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持");
+					}, "com.qihoo.appstore");
+				}, "com.tencent.android.qqdownloader");
 			}
 		});
 		 //客服电话
@@ -350,18 +382,18 @@
 		});
 		 //退出操作******************
 		document.getElementById('exit').addEventListener('tap', function() {
-			if(mui.os.ios){
+			if (mui.os.ios) {
 				app.setState({});
-						mui.openWindow({
-							url: 'login.html',
-							id: 'login',
-							show: {
-									aniShow: 'pop-in'
-							},
-							waiting: {
-								autoShow: false
-							}
-						});
+				mui.openWindow({
+					url: 'login.html',
+					id: 'login',
+					show: {
+						aniShow: 'pop-in'
+					},
+					waiting: {
+						autoShow: false
+					}
+				});
 				return;
 			}
 			var btnArray = [{
@@ -381,7 +413,7 @@
 							url: 'login.html',
 							id: 'login',
 							show: {
-									aniShow: 'pop-in'
+								aniShow: 'pop-in'
 							},
 							waiting: {
 								autoShow: false
@@ -408,6 +440,7 @@
 					var isActive = event.detail.isActive;
 					locker.style.display = isActive ? 'block' : 'none';
 					if (!isActive) {
+						//						alert(0);
 						settings.gestures = '';
 						app.setSettings(settings);
 					}

examples/login/unlock.html

@@ -42,6 +42,24 @@
 			(function($, doc) {
 				$.init();
 				$.plusReady(function() {
+					var mainPage = $.preload({
+						"id": 'main',
+						"url": 'main.html'
+					});
+					var toMain = function() {
+						$.fire(mainPage, 'show', null);
+						setTimeout(function() {
+							$.openWindow({
+								id: 'main',
+								show: {
+									aniShow: 'pop-in'
+								},
+								waiting: {
+									autoShow: false
+								}
+							});
+						}, 0);
+					};
 					var settings = app.getSettings();
 					var forgetButton = doc.getElementById("forget");
 					var locker = doc.querySelector('.mui-locker');
@@ -70,16 +88,7 @@
 					locker.addEventListener('done', function(event) {
 						var rs = event.detail;
 						if (settings.gestures == rs.points.join('')) {
-							$.openWindow({
-								url: 'main.html',
-								id: 'main',
-								show: {
-									aniShow: 'pop-in'
-								},
-								waiting: {
-									autoShow: false
-								}
-							});
+							toMain()
 							rs.sender.clear();
 						} else {
 							tryNumber--;