reg.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html class="ui-page-login">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="css/mui.min.css" rel="stylesheet" />
  8. <link href="css/style.css" rel="stylesheet" />
  9. <style>
  10. .area {
  11. margin: 20px auto 0px auto;
  12. }
  13. .mui-input-group:first-child {
  14. margin-top: 20px;
  15. }
  16. .mui-input-group label {
  17. width: 22%;
  18. }
  19. .mui-input-row label~input,
  20. .mui-input-row label~select,
  21. .mui-input-row label~textarea {
  22. width: 78%;
  23. }
  24. .mui-checkbox input[type=checkbox],
  25. .mui-radio input[type=radio] {
  26. top: 6px;
  27. }
  28. .mui-content-padded {
  29. margin-top: 25px;
  30. }
  31. .mui-btn {
  32. padding: 10px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <header class="mui-bar mui-bar-nav">
  38. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  39. <h1 class="mui-title">设置服务器</h1>
  40. </header>
  41. <div class="mui-content">
  42. <form class="mui-input-group">
  43. <div class="mui-input-row">
  44. <label>协议</label>
  45. <input id='protocol' type="text" class="mui-input-clear mui-input" placeholder="http://" readonly="readonly">
  46. </div>
  47. <div class="mui-input-row">
  48. <label>地址</label>
  49. <input id='ip' type="text" class="mui-input-clear mui-input" placeholder="请输入服务器IP或域名">
  50. </div>
  51. <div class="mui-input-row">
  52. <label>端口</label>
  53. <input id='port' type="text" class="mui-input-clear mui-input" placeholder="可选,默认80">
  54. </div>
  55. <div class="mui-input-row">
  56. <label>参数</label>
  57. <input id='args' type="text" class="mui-input-clear mui-input" placeholder="可选">
  58. </div>
  59. </form>
  60. <div class="mui-content-padded">
  61. <button id='reg' class="mui-btn mui-btn-block mui-btn-primary">保存</button>
  62. </div>
  63. <div class="mui-content-padded">
  64. <p>服务器地址只需设置一次。如服务器地址发生更改,可重新设置。点击保存后,返回用户登录界面。</p>
  65. </div>
  66. </div>
  67. <script src="js/mui.min.js"></script>
  68. <script src="js/app.js"></script>
  69. <script>
  70. //初始化
  71. var inits = function () {
  72. var ip = localStorage.getItem('$serverIp');
  73. var port = localStorage.getItem('$serverPort');
  74. document.getElementById('ip').value = ip;
  75. document.getElementById('port').value = port;
  76. }
  77. setTimeout(function() {
  78. inits();
  79. }, 500);
  80. </script>
  81. <script>
  82. (function($, doc) {
  83. $.init({
  84. });
  85. $.plusReady(function() {
  86. var settings = app.getSettings();
  87. var regButton = doc.getElementById('reg');
  88. var protocolBox = doc.getElementById('protocol');
  89. var ipBox = doc.getElementById('ip');
  90. var portBox = doc.getElementById('port');
  91. var argsBox = doc.getElementById('args');
  92. regButton.addEventListener('tap', function(event) {
  93. var serverInfo = {
  94. protocol: protocolBox.value,
  95. ip: ipBox.value,
  96. port: portBox.value
  97. };
  98. if (serverInfo.ip == null || serverInfo.ip == '') {
  99. plus.nativeUI.toast('服务器地址不能为空');
  100. return;
  101. }
  102. //app.reg 会远程连接服务器,测试地址是否正确可用
  103. app.reg(serverInfo, function(err) {
  104. if (err) {
  105. plus.nativeUI.toast(err);
  106. return;
  107. }
  108. plus.nativeUI.toast('设置服务器成功');
  109. /*
  110. * 注意:
  111. * 1、因本示例应用启动页就是登录页面,因此注册成功后,直接显示登录页即可;
  112. * 2、如果真实案例中,启动页不是登录页,则需修改,使用mui.openWindow打开真实的登录页面
  113. */
  114. plus.webview.getLaunchWebview().show("pop-in",200,function () {
  115. plus.webview.currentWebview().close("none");
  116. });
  117. //若启动页不是登录页,则需通过如下方式打开登录页
  118. // $.openWindow({
  119. // url: 'login.html',
  120. // id: 'login',
  121. // show: {
  122. // aniShow: 'pop-in'
  123. // }
  124. // });
  125. });
  126. });
  127. });
  128. }(mui, document));
  129. </script>
  130. </body>
  131. </html>