apicloud apicloud

注册
查看: 9873|回复: 38

[案例源码] (一)环信 easeChat模块demo注册和登陆

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

[案例源码] (一)环信 easeChat模块demo注册和登陆

9873 38 | 发表于 2018-11-15 21:03:00 |阅读模式 | |
本帖最后由 Mr.ZhouHeng 于 2019-9-3 15:26 编辑


环信 easeChat模块demo(登录注册源码)





                        


页面结构代码:

在开发控制台再次添加了一个模块:


添加完之后一定的记得在自定义loader再次编译一次,然后扫码下载,调用这个模块才会生效
加载模块,在common.js封装代码:页面在引用了common.js可以直接调用showLoading()打开模块,hideLoading()关闭模块


  1. //打开加载框
  2. var uiloading, eLoadId;
  3. function showLoading() {
  4.     uiloading = api.require('UILoading');
  5.     uiloading.flower({
  6.         center: {
  7.             x: api.winWidth / 2.0,
  8.             y: api.winHeight / 2.0
  9.         },
  10.         size: 30,
  11.         mask: 'rgba(20,0,0,.2)',
  12.         fixed: true
  13.     }, function(ret) {
  14.         eLoadId = ret.id;
  15.     });
  16. }
  17. // 关闭加载模态框
  18. function hideLoading() {
  19.     if (!uiloading) {
  20.         return
  21.     }
  22.     uiloading.closeFlower({
  23.         id: eLoadId
  24.     });
  25. }
复制代码

index.html
  1. <!doctype html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>Hello APP</title>
  8.     <link rel="stylesheet" type="text/css" href="./css/api.css" />
  9.     <style type="text/css">

  10.     </style>
  11. </head>

  12. <body class="wrap">
  13. </body>
  14. <script type="text/javascript" src="./script/api.js"></script>
  15. <script type="text/javascript">
  16.     apiready = function() {
  17.         api.setStatusBarStyle({
  18.             style: 'light'
  19.         });
  20.         // 获取登录时候储存的用户参数
  21.         api.getPrefs({
  22.             key: 'user'
  23.         }, function(ret, err) {
  24.             if (ret && ret.value !== "") {
  25.                 // 判断用户参数不为空登录首页main
  26.                 openMain();
  27.             } else {
  28.                 //否则跳到登录页面进行登录
  29.                 openLogin();
  30.             }
  31.         });
  32.     };
  33.     // 打开登录页
  34.     function openLogin() {
  35.         api.openWin({
  36.             name: 'login',
  37.             url: './html/login/login.html',
  38.             slidBackEnabled: false
  39.         })
  40.     }
  41.     // 打开首页
  42.     function openMain() {
  43.         api.openWin({
  44.             name: 'main',
  45.             url: './html/main.html',
  46.             slidBackEnabled: false
  47.         })
  48.     }
  49. </script>

  50. </html>
复制代码
login.html
  1. <!DOCTYPE HTML>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  6.     <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  7.     <title>登录</title>
  8.     <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9.     <link rel="stylesheet" type="text/css" href="../../css/public.css" />
  10.     <style>
  11.         html,
  12.         body {
  13.             width: 100%;
  14.             height: 100%;
  15.             background: #ededed;
  16.         }

  17.         #login {
  18.             position: relative;
  19.             width: 100%;
  20.             top: 50%;
  21.             left: 50%;
  22.             -webkit-transform: translate(-50%, -50%);
  23.             -moz-transform: translate(-50%, -50%);
  24.             -ms-transform: translate(-50%, -50%);
  25.             -o-transform: translate(-50%, -50%);
  26.             transform: translate(-50%, -50%);
  27.             z-index: 99
  28.         }

  29.         .logo_top {
  30.             padding-bottom: 60px;
  31.             text-align: center;
  32.         }

  33.         .logo_top img {
  34.             width: 106px;
  35.             height: 106px;
  36.         }

  37.         .center {
  38.             padding: 0 24px;
  39.         }

  40.         .center .input {
  41.             height: 36px;
  42.             line-height: 36px;
  43.             padding: 9px;
  44.             position: relative;
  45.         }

  46.         .center .interval {
  47.             background-color: #fff;
  48.             margin-bottom: 10px;
  49.         }

  50.         .center .input span {
  51.             font-size: 0;
  52.             height: 36px;
  53.             line-height: 36px;
  54.             vertical-align: middle;
  55.         }

  56.         .center .input span>img {
  57.             width: 19px;
  58.             height: 20px;
  59.             vertical-align: middle;
  60.         }

  61.         .center .input input {
  62.             outline: none;
  63.             padding: 10px;
  64.             display: block;
  65.             font-size: 15px;
  66.             color: #000;
  67.             padding-left: 15px;
  68.         }

  69.         .deleteuser {
  70.             display: none;
  71.         }

  72.         .deletepwd {
  73.             display: none;
  74.         }

  75.         .login {
  76.             margin-top: 38px;
  77.             padding: 0 28px;
  78.             width: 100%;
  79.         }

  80.         .login .flex-con {
  81.             padding: 0px 20px;
  82.         }

  83.         .register-btn {
  84.             height: 45px;
  85.             line-height: 45px;
  86.             text-align: center;
  87.             color: #000;
  88.             background: #fff;
  89.             text-align: center;
  90.         }

  91.         .login-btn {
  92.             height: 45px;
  93.             line-height: 45px;
  94.             text-align: center;
  95.             color: #fff;
  96.             background: #00acff;
  97.         }
  98.     </style>
  99. </head>

  100. <body>
  101.     <!-- 登录 -->
  102.     <div id="login">
  103.         <div class="logo_top">
  104.             <img src="../../image/login/logo.png" />
  105.         </div>
  106.         <div class="center">
  107.             <div class="input interval">
  108.                 <div class="flex-wrap">
  109.                     <span>
  110.                        <img src="../../image/login/iconuser.png">
  111.                     </span>
  112.                     <input id="user" class="flex-con" type="text" placeholder="用户名" oninput="input()" />
  113.                     <span class="deleteuser" tapmode onclick="fnClearUser()">
  114.                       <img src="../../image/login/icondelete.png">
  115.                     </span>
  116.                 </div>
  117.             </div>
  118.             <div class="input pwd interval">
  119.                 <div class="flex-wrap">
  120.                     <span>
  121.                       <img src="../../image/login/iconpwd.png">
  122.                     </span>
  123.                     <input id="password" class="flex-con" type="password" placeholder="密码" oninput="inputpwd()" />
  124.                     <span class="deletepwd" tapmode onclick="fnClearPwd()">
  125.                       <img src="../../image/login/icondelete.png">
  126.                     </span>
  127.                 </div>
  128.             </div>
  129.         </div>
  130.         <div class="login flex-wrap flex-box">
  131.             <div class="flex-con">
  132.                 <div class="register-btn" tapmode="active" onclick="fnOpenRegister();">
  133.                     注册
  134.                 </div>
  135.             </div>
  136.             <div class="flex-con">
  137.                 <div class="login-btn" tapmode="active" onclick="fnLogin();">
  138.                     登录
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143. </body>
  144. <script type="text/javascript" src="../../script/api.js"></script>
  145. <script type="text/javascript" src="../../script/vue.min.js"></script>
  146. <!-- 公共js -->
  147. <script type="text/javascript" src="../../script/common.js"></script>
  148. <!-- 环信接口 -->
  149. <script type="text/javascript" src="../../script/easeChat.js"></script>
  150. <!-- sha1加密 -->
  151. <script type="text/javascript" src="../../script/SHA1.js"></script>
  152. <script type="text/javascript">
  153.     apiready = function() {
  154.         //调取公共js双击返回键退出app
  155.         keyListen();
  156.         // 初始化
  157.         fnInit();
  158.     };

  159.     var eUser, ePwd; // 声明用户名跟密码获取dom名
  160.     function fnInit() {
  161.         eUser = $api.byId('user');
  162.         ePwd = $api.byId('password');
  163.     }

  164.     //根据输入框内容有无隐藏显示删除按钮
  165.     function input() {
  166.         // 用户名输入
  167.         if (eUser.value !== '') {
  168.             $api.css($api.dom('.deleteuser'), 'display: inline;');
  169.         } else {
  170.             $api.css($api.dom('.deleteuser'), 'display: none;');
  171.         }
  172.     }

  173.     function inputpwd() {
  174.         // 密码输入
  175.         if (ePwd.value !== '') {
  176.             $api.css($api.dom('.deletepwd'), 'display: inline;');
  177.         } else {
  178.             $api.css($api.dom('.deletepwd'), 'display: none;');
  179.         }
  180.     }

  181.     //清空用户名输入框
  182.     function fnClearUser() {
  183.         if (eUser.value !== '') {
  184.             $api.css($api.dom('.deleteuser'), 'display: none;');
  185.             eUser.value = "";
  186.         }
  187.     }

  188.     //清空密码输入框
  189.     function fnClearPwd() {
  190.         if (ePwd.value !== '') {
  191.             $api.css($api.dom('.deletepwd'), 'display: none;');
  192.             ePwd.value = "";
  193.         }
  194.     }

  195.     //登陆
  196.     function fnLogin() {
  197.         ePwd.blur();
  198.         eUser.blur();
  199.         if (!eUser.value) {
  200.             // 调用封装的common.js公共toast弹出提示框方法
  201.             toast('APICloud环信DEMO:请输入用户名!', 3000);
  202.             return
  203.         } else if (!ePwd.value) {
  204.             toast('APICloud环信DEMO:请输入密码!', 3000);
  205.             return;
  206.         }
  207.         //打开登录加载状态
  208.         showLoading();
  209.         // 获取最新时间
  210.         var now = Date.now();
  211.         // appKey加密方式   A6097706885345你自己创建的app里面的id C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6 app的appKey 这俩个字段在开发控制台里面概览
  212.         var appKey = SHA1("A6097706885345" + "UZ" + "C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6" + "UZ" + now) + "." + now;
  213.         api.ajax({
  214.             url: 'https://d.apicloud.com/mcm/api/user/login',
  215.             method: 'POST',
  216.             headers: {
  217.                 "X-APICloud-AppId": "A6097706885345",
  218.                 "X-APICloud-AppKey": appKey
  219.             },
  220.             data: {
  221.                 values: {
  222.                     "username": eUser.value,
  223.                     "password": SHA1(ePwd.value)//对输入的密码进行sha1密文加密请求传送
  224.                 }
  225.             }
  226.         }, function(ret, err) {
  227.             console.log(JSON.stringify(ret));
  228.             console.log(JSON.stringify(err));
  229.             if (ret) {
  230.                 // 调取环信登录接口
  231.                 fnEaseChatLogin(eUser.value, SHA1(ePwd.value),ret.id);
  232.             } else {
  233.                 hideLoading();
  234.                 toast('APICloud环信DEMO:用户名或者密码错误', 3000);
  235.             }
  236.         });
  237.     }

  238.     //打开注册页面
  239.     function fnOpenRegister() {
  240.         api.openWin({
  241.             name: 'register',
  242.             url: 'widget://html/register/register.html',
  243.             slidBackEnabled: true
  244.         })
  245.     }
  246. </script>

  247. </html>
复制代码

其他代码请自行下载研究,很多应该标注的地方我都标注清楚如有问题可以在总贴回复。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2018-11-16 17:52:05 |
消灭0回复
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

转正司机

UID:134779

主题:
27
帖子:
196
云币:
571
发表于 2018-11-19 19:59:09 |
感谢分享

新手上路

UID:653264

主题:
19
帖子:
117
云币:
97
发表于 2018-11-19 20:07:50 |
回复+1

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2018-11-19 20:15:26 |

源码在第三贴
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

驾校小白

UID:681246

主题:
0
帖子:
1
云币:
0
发表于 2018-12-18 21:41:20 |
  下载学习了

主题:
0
帖子:
1
云币:
3
发表于 2019-2-21 23:26:49 |
请问大佬,这是什么原因
{"status":0,"msg":"应用不存在","code":0}
undefined

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-2-22 09:48:45 |
维也纳的海风~ 发表于 2019-2-21 23:26
请问大佬,这是什么原因
{"status":0,"msg":"应用不存在","code":0}
undefined

你这样给我在这种东东 我咋猜的出来是什么问题   你的说明操作什么咋操作的才出现这种报错哥们
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

驾校小白

UID:726502

主题:
4
帖子:
16
云币:
38
发表于 2019-2-25 22:02:57 |
Mr.ZhouHeng 发表于 2019-2-22 09:48
你这样给我在这种东东 我咋猜的出来是什么问题   你的说明操作什么咋操作的才出现这种报错哥们 ...

你是不是在下载apploader的时候出现的这个 我使用手机下载之后传到电脑上用的

驾校小白

UID:595203

主题:
2
帖子:
19
云币:
14
发表于 2019-2-26 10:29:43 |
支持一下
1234下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表