基于mui+html5plus 快速搭建app前端
MUI app web前端 布局框架 小姐姐外卖 定位 搜索 芭比馒头 北京烤鸭 首页 消息 订单 设置 我的 UNI-APP vue.js HTML5PLUS 封装移动操作系统的系统调用， 硬件驱动，通过原生JS操作移动硬件 html5plus.org mui 安装： 夜神模拟器 HBuilder 代码格式化 工具更换代码格式化快捷键 创建app项目 mui项目 mui参考文档 快捷键 md mbody mlist mfire 登陆页面： 新建含html5的 退出登录--跳转到首页 user_info--index user_info: mui.fire user_info.html login.html mui.plusReady currentWebview() tap addEventListener 登陆事件监听 后端校验 name pwd mui.post 提交数据 window.localStorage 永久存储 监听事件接收mui.fire index（设置）--login tap 事件 mui.openWindow({}) style top:0 bottom:50px extras:{ msg:"login" } if localStorage 判断 登陆过/没登陆过 创建后端项目校验name pwd 在手机设备上运行 修改： adb.bat 路径 启动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">标题</h1> </header> <div class="mui-content"> <div id="slider" class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第一张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第二张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第三张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第四张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <a href="#"> <span class="mui-icon mui-icon-home"></span> <div class="mui-media-body">Home</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <a href="#"> <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span> <div class="mui-media-body">Email</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <a href="#"> <span class="mui-icon mui-icon-chatbubble"></span> <div class="mui-media-body">Chat</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <a href="#"> <span class="mui-icon mui-icon-location"></span> <div class="mui-media-body">Location</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <a href="#"> <span class="mui-icon mui-icon-search"></span> <div class="mui-media-body">Search</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <a href="#"> <span class="mui-icon mui-icon-phone"></span> <div class="mui-media-body">Phone</div> </a> </li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30"> <div class="mui-media-body"> 幸福 <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30"> <div class="mui-media-body"> 木屋 <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30"> <div class="mui-media-body"> CBD <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p> </div> </a> </li> </ul> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item" id="login"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> </div> </body> <script type="text/javascript" charset="utf-8"> mui.init(); document.getElementById("login").addEventListener("tap", function() { mui.toast("hello good bye "); if(window.localStorage.getItem("user")) { mui.openWindow("user_info.html", "user_info.html", { styles: { top: "0px", bottom: "50px" }, extras: { "user": window.localStorage.getItem("user") } }) } else { mui.openWindow("login.html", "login.html", { styles: { top: "0px", bottom: "50px" }, extras: { msg: "请登录" } }) } }) </script> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">用户登录</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row"> <label>用户名</label> <input id="username" type="text" class="mui-input-clear" placeholder="请输入用户名"> </div> <div class="mui-input-row"> <label>密码</label> <input id="pwd" type="password" class="mui-input-password" placeholder="请输入密码"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-green" id="login_btn">登录</button> <button type="button" class="mui-btn mui-btn-yellow">注册</button> </div> </form> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() // var Sdata = plus.webview.currentWebview(); mui.plusReady(function() { var Sdata = plus.webview.currentWebview(); console.log(JSON.stringify(Sdata)); console.log(Sdata.msg); }) document.getElementById("login_btn").addEventListener("tap", function() { var username = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; mui.post( "http://192.168.15.108:9527/login", { "username": username, "pwd": pwd }, function(data) { console.log(data.code); console.log(JSON.stringify(data)); window.localStorage.setItem("user",data.data.username); mui.openWindow("user_info.html", "user_info.html", { styles: { top: "0px", bottom: "50px" }, extras: { "user": data.data.username } }) } ) }) document.addEventListener("genwoshuobaibai",function(data){ console.log(JSON.stringify(data.detail)); alert("再见,亲爱的"+data.detail.user+"同学"); }) </script> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">用户详情</h1> </header> <div class="mui-content"> <div class="mui-row"> 欢迎<span id="username"></span>登陆 </div> <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="logout">退出登录</button> </div> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); var Sdata = null; mui.plusReady(function(){ Sdata = plus.webview.currentWebview(); console.log(JSON.stringify(Sdata)); document.getElementById("username").innerText = Sdata.user; }) document.getElementById("logout").addEventListener("tap", function() { window.localStorage.removeItem("user"); var login = plus.webview.getWebviewById("login.html"); mui.fire(login,"genwoshuobaibai",{"user":Sdata.user}); mui.openWindow("login.html", "login.html", { styles: { top: "0px", bottom: "50px" } }) }) </script> </body> </html>