Skip to content

M
mui
Commit 6dfc9a88 authored by hbcui1984's avatar hbcui1984
Browse files
Options

更新login工程模板

parent ac5bdc6b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 19388 additions and 51 deletions
examples/login/README.md
View file @ 6dfc9a88
# 概述
## 简单概述
这是带登录和设置功能的mui模板项目，主要为了演示登录流程及设置界面div窗口切换效果；
## 核心功能
1.启动App后校验登录状态，若已登录，直接跳转应用首页；否则，显示登录页面；
2.支持本地注册；
3.支持设置手势密码，登录时可使用手势密码代替账号、密码；
4.支持评分、分享、拨打客服电话
1. 启动App后校验登录状态，若已登录，直接跳转应用首页；否则，显示登录页面；
2. 支持本地注册；
3. 支持设置手势密码，登录时可使用手势密码代替账号、密码；
4. 支持评分、分享、拨打客服电话
examples/login/css/feedback-page.css 0 → 100644
View file @ 6dfc9a88
.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 0 → 100644
View file @ 6dfc9a88
(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 0 → 100644
View file @ 6dfc9a88
(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/js/mui.min.js
View file @ 6dfc9a88
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/login/libs/easymob-webim-sdk/easemob.im-1.0.5.js 0 → 100644
View file @ 6dfc9a88
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/login/libs/easymob-webim-sdk/jquery-1.11.1.js 0 → 100644
View file @ 6dfc9a88
This diff is collapsed.
examples/login/libs/easymob-webim-sdk/json2.js 0 → 100644
View file @ 6dfc9a88
This diff is collapsed.
examples/login/libs/easymob-webim-sdk/quickstart.md 0 → 100644
View file @ 6dfc9a88
This diff is collapsed.
examples/login/libs/easymob-webim-sdk/strophe-custom-2.0.0.js 0 → 100644
View file @ 6dfc9a88
This diff is collapsed.
examples/login/login.html
View file @ 6dfc9a88
......@@ -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
View file @ 6dfc9a88
......@@ -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
View file @ 6dfc9a88
......@@ -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--;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment