|
(一)环信 easeChat模块demo注册和登陆
[复制链接]
本帖最后由 Mr.ZhouHeng 于 2019-9-3 15:26 编辑
环信 easeChat模块demo(登录注册源码)
页面结构代码:
在开发控制台再次添加了一个模块:
添加完之后一定的记得在自定义loader再次编译一次,然后扫码下载,调用这个模块才会生效 加载模块,在common.js封装代码:页面在引用了common.js可以直接调用showLoading()打开模块,hideLoading()关闭模块
- //打开加载框
- var uiloading, eLoadId;
- function showLoading() {
- uiloading = api.require('UILoading');
- uiloading.flower({
- center: {
- x: api.winWidth / 2.0,
- y: api.winHeight / 2.0
- },
- size: 30,
- mask: 'rgba(20,0,0,.2)',
- fixed: true
- }, function(ret) {
- eLoadId = ret.id;
- });
- }
- // 关闭加载模态框
- function hideLoading() {
- if (!uiloading) {
- return
- }
- uiloading.closeFlower({
- id: eLoadId
- });
- }
复制代码
index.html - <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>Hello APP</title>
- <link rel="stylesheet" type="text/css" href="./css/api.css" />
- <style type="text/css">
- </style>
- </head>
- <body class="wrap">
- </body>
- <script type="text/javascript" src="./script/api.js"></script>
- <script type="text/javascript">
- apiready = function() {
- api.setStatusBarStyle({
- style: 'light'
- });
- // 获取登录时候储存的用户参数
- api.getPrefs({
- key: 'user'
- }, function(ret, err) {
- if (ret && ret.value !== "") {
- // 判断用户参数不为空登录首页main
- openMain();
- } else {
- //否则跳到登录页面进行登录
- openLogin();
- }
- });
- };
- // 打开登录页
- function openLogin() {
- api.openWin({
- name: 'login',
- url: './html/login/login.html',
- slidBackEnabled: false
- })
- }
- // 打开首页
- function openMain() {
- api.openWin({
- name: 'main',
- url: './html/main.html',
- slidBackEnabled: false
- })
- }
- </script>
- </html>
复制代码 login.html
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
- <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
- <title>登录</title>
- <link rel="stylesheet" type="text/css" href="../../css/api.css" />
- <link rel="stylesheet" type="text/css" href="../../css/public.css" />
- <style>
- html,
- body {
- width: 100%;
- height: 100%;
- background: #ededed;
- }
- #login {
- position: relative;
- width: 100%;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- -o-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- z-index: 99
- }
- .logo_top {
- padding-bottom: 60px;
- text-align: center;
- }
- .logo_top img {
- width: 106px;
- height: 106px;
- }
- .center {
- padding: 0 24px;
- }
- .center .input {
- height: 36px;
- line-height: 36px;
- padding: 9px;
- position: relative;
- }
- .center .interval {
- background-color: #fff;
- margin-bottom: 10px;
- }
- .center .input span {
- font-size: 0;
- height: 36px;
- line-height: 36px;
- vertical-align: middle;
- }
- .center .input span>img {
- width: 19px;
- height: 20px;
- vertical-align: middle;
- }
- .center .input input {
- outline: none;
- padding: 10px;
- display: block;
- font-size: 15px;
- color: #000;
- padding-left: 15px;
- }
- .deleteuser {
- display: none;
- }
- .deletepwd {
- display: none;
- }
- .login {
- margin-top: 38px;
- padding: 0 28px;
- width: 100%;
- }
- .login .flex-con {
- padding: 0px 20px;
- }
- .register-btn {
- height: 45px;
- line-height: 45px;
- text-align: center;
- color: #000;
- background: #fff;
- text-align: center;
- }
- .login-btn {
- height: 45px;
- line-height: 45px;
- text-align: center;
- color: #fff;
- background: #00acff;
- }
- </style>
- </head>
- <body>
- <!-- 登录 -->
- <div id="login">
- <div class="logo_top">
- <img src="../../image/login/logo.png" />
- </div>
- <div class="center">
- <div class="input interval">
- <div class="flex-wrap">
- <span>
- <img src="../../image/login/iconuser.png">
- </span>
- <input id="user" class="flex-con" type="text" placeholder="用户名" oninput="input()" />
- <span class="deleteuser" tapmode onclick="fnClearUser()">
- <img src="../../image/login/icondelete.png">
- </span>
- </div>
- </div>
- <div class="input pwd interval">
- <div class="flex-wrap">
- <span>
- <img src="../../image/login/iconpwd.png">
- </span>
- <input id="password" class="flex-con" type="password" placeholder="密码" oninput="inputpwd()" />
- <span class="deletepwd" tapmode onclick="fnClearPwd()">
- <img src="../../image/login/icondelete.png">
- </span>
- </div>
- </div>
- </div>
- <div class="login flex-wrap flex-box">
- <div class="flex-con">
- <div class="register-btn" tapmode="active" onclick="fnOpenRegister();">
- 注册
- </div>
- </div>
- <div class="flex-con">
- <div class="login-btn" tapmode="active" onclick="fnLogin();">
- 登录
- </div>
- </div>
- </div>
- </div>
- </body>
- <script type="text/javascript" src="../../script/api.js"></script>
- <script type="text/javascript" src="../../script/vue.min.js"></script>
- <!-- 公共js -->
- <script type="text/javascript" src="../../script/common.js"></script>
- <!-- 环信接口 -->
- <script type="text/javascript" src="../../script/easeChat.js"></script>
- <!-- sha1加密 -->
- <script type="text/javascript" src="../../script/SHA1.js"></script>
- <script type="text/javascript">
- apiready = function() {
- //调取公共js双击返回键退出app
- keyListen();
- // 初始化
- fnInit();
- };
- var eUser, ePwd; // 声明用户名跟密码获取dom名
- function fnInit() {
- eUser = $api.byId('user');
- ePwd = $api.byId('password');
- }
- //根据输入框内容有无隐藏显示删除按钮
- function input() {
- // 用户名输入
- if (eUser.value !== '') {
- $api.css($api.dom('.deleteuser'), 'display: inline;');
- } else {
- $api.css($api.dom('.deleteuser'), 'display: none;');
- }
- }
- function inputpwd() {
- // 密码输入
- if (ePwd.value !== '') {
- $api.css($api.dom('.deletepwd'), 'display: inline;');
- } else {
- $api.css($api.dom('.deletepwd'), 'display: none;');
- }
- }
- //清空用户名输入框
- function fnClearUser() {
- if (eUser.value !== '') {
- $api.css($api.dom('.deleteuser'), 'display: none;');
- eUser.value = "";
- }
- }
- //清空密码输入框
- function fnClearPwd() {
- if (ePwd.value !== '') {
- $api.css($api.dom('.deletepwd'), 'display: none;');
- ePwd.value = "";
- }
- }
- //登陆
- function fnLogin() {
- ePwd.blur();
- eUser.blur();
- if (!eUser.value) {
- // 调用封装的common.js公共toast弹出提示框方法
- toast('APICloud环信DEMO:请输入用户名!', 3000);
- return
- } else if (!ePwd.value) {
- toast('APICloud环信DEMO:请输入密码!', 3000);
- return;
- }
- //打开登录加载状态
- showLoading();
- // 获取最新时间
- var now = Date.now();
- // appKey加密方式 A6097706885345你自己创建的app里面的id C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6 app的appKey 这俩个字段在开发控制台里面概览
- var appKey = SHA1("A6097706885345" + "UZ" + "C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6" + "UZ" + now) + "." + now;
- api.ajax({
- url: 'https://d.apicloud.com/mcm/api/user/login',
- method: 'POST',
- headers: {
- "X-APICloud-AppId": "A6097706885345",
- "X-APICloud-AppKey": appKey
- },
- data: {
- values: {
- "username": eUser.value,
- "password": SHA1(ePwd.value)//对输入的密码进行sha1密文加密请求传送
- }
- }
- }, function(ret, err) {
- console.log(JSON.stringify(ret));
- console.log(JSON.stringify(err));
- if (ret) {
- // 调取环信登录接口
- fnEaseChatLogin(eUser.value, SHA1(ePwd.value),ret.id);
- } else {
- hideLoading();
- toast('APICloud环信DEMO:用户名或者密码错误', 3000);
- }
- });
- }
- //打开注册页面
- function fnOpenRegister() {
- api.openWin({
- name: 'register',
- url: 'widget://html/register/register.html',
- slidBackEnabled: true
- })
- }
- </script>
- </html>
复制代码
其他代码请自行下载研究,很多应该标注的地方我都标注清楚如有问题可以在总贴回复。
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|