01-手机app
main主页面代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" type="text/css" href="css/mui.css"/> 8 </head> 9 <body> 10 <header class="mui-bar mui-bar-nav"> 11 <h1 class="mui-title">标题</h1> 12 </header> 13 <div id="slider" class="mui-slider" > 14 <div class="mui-slider-group mui-slider-loop"> 15 <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> 16 <div class="mui-slider-item mui-slider-item-duplicate"> 17 <a href="#"> 18 <img src="http://placehold.it/400x300"> 19 </a> 20 </div> 21 <!-- 第一张 --> 22 <div class="mui-slider-item"> 23 <a href="#"> 24 <img src="http://placehold.it/400x300"> 25 </a> 26 </div> 27 <!-- 第二张 --> 28 <div class="mui-slider-item"> 29 <a href="#"> 30 <img src="http://placehold.it/400x300"> 31 </a> 32 </div> 33 <!-- 第三张 --> 34 <div class="mui-slider-item"> 35 <a href="#"> 36 <img src="http://placehold.it/400x300"> 37 </a> 38 </div> 39 <!-- 第四张 --> 40 <div class="mui-slider-item"> 41 <a href="#"> 42 <img src="http://placehold.it/400x300"> 43 </a> 44 </div> 45 <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --> 46 <div class="mui-slider-item mui-slider-item-duplicate"> 47 <a href="#"> 48 <img src="http://placehold.it/400x300"> 49 </a> 50 </div> 51 </div> 52 <div class="mui-slider-indicator"> 53 <div class="mui-indicator mui-active"></div> 54 <div class="mui-indicator"></div> 55 <div class="mui-indicator"></div> 56 <div class="mui-indicator"></div> 57 </div> 58 </div> 59 <ul class="mui-table-view mui-grid-view mui-grid-9"> 60 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> 61 <a href="#"> 62 <span class="mui-icon mui-icon-home"></span> 63 <div class="mui-media-body">Home</div> 64 </a> 65 </li> 66 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> 67 <a href="#"> 68 <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span> 69 <div class="mui-media-body">Email</div> 70 </a> 71 </li> 72 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> 73 <a href="#"> 74 <span class="mui-icon mui-icon-chatbubble"></span> 75 <div class="mui-media-body">Chat</div> 76 </a> 77 </li> 78 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> 79 <a href="#"> 80 <span class="mui-icon mui-icon-location"></span> 81 <div class="mui-media-body">Location</div> 82 </a> 83 </li> 84 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> 85 <a href="#"> 86 <span class="mui-icon mui-icon-search"></span> 87 <div class="mui-media-body">Search</div> 88 </a> 89 </li> 90 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> 91 <a href="#"> 92 <span class="mui-icon mui-icon-phone"></span> 93 <div class="mui-media-body">Phone</div> 94 </a> 95 </li> 96 </ul> 97 98 <ul class="mui-table-view"> 99 <li class="mui-table-view-cell mui-media"> 100 <a href="javascript:;"> 101 <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30"> 102 <div class="mui-media-body"> 103 幸福 104 <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p> 105 </div> 106 </a> 107 </li> 108 <li class="mui-table-view-cell mui-media"> 109 <a href="javascript:;"> 110 <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30"> 111 <div class="mui-media-body"> 112 木屋 113 <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p> 114 </div> 115 </a> 116 </li> 117 <li class="mui-table-view-cell mui-media"> 118 <a href="javascript:;"> 119 <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30"> 120 <div class="mui-media-body"> 121 CBD 122 <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p> 123 </div> 124 </a> 125 </li> 126 </ul> 127 128 <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> 129 <script type="text/javascript"> 130 mui.init() 131 </script> 132 </body> 133 </html>
在mobile app开发过程中，经常会出现共用的导航栏或者选项卡，每次打开页面都需要重新渲染，而且容易出现卡头卡尾的现象。并且此时若使用局部滚动，在android手机上会出现滚动不流畅的问题；
mui现在提供两种解决方案:
第一种（官方推荐）：在plus环境下，使用原生titleNView以及原生tabbar来替换页面的导航栏或者选项卡。在页面打开时，渲染已经完成，让你的应用更接近原生app。具体做法：原生titleNView参考mui.openWindow的示例3，原生tabbar示例参考ask教程示例
第二种：通过双webview模式解决，此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。
1 mui.init({ 2 subpages:[{ 3 url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 4 id:your-subpage-id,//子页面标志 5 styles:{ 6 top:subpage-top-position,//子页面顶部位置 7 bottom:subpage-bottom-position,//子页面底部位置 8 width:subpage-width,//子页面宽度，默认为100% 9 height:subpage-height,//子页面高度，默认为100% 10 ...... 11 }, 12 extras:{}//额外扩展参数 13 }] 14 });
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" type="text/css" href="css/mui.css"/> 8 </head> 9 <body> 10 <nav class="mui-bar mui-bar-tab"> 11 <a class="mui-tab-item mui-active"> 12 <span class="mui-icon mui-icon-home"></span> 13 <span class="mui-tab-label">首页</span> 14 </a> 15 <a class="mui-tab-item"> 16 <span class="mui-icon mui-icon-phone"></span> 17 <span class="mui-tab-label">电话</span> 18 </a> 19 <a class="mui-tab-item"> 20 <span class="mui-icon mui-icon-email"></span> 21 <span class="mui-tab-label">邮件</span> 22 </a> 23 <a class="mui-tab-item" id="setting"> 24 <span class="mui-icon mui-icon-gear"></span> 25 <span class="mui-tab-label">设置</span> 26 </a> 27 </nav> 28 <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> 29 <script type="text/javascript"> 30 mui.init({ 31 //subpages:底部组件固定 32 subpages:[{ 33 url:'main.html', 34 id:'main.html', 35 styles:{ 36 top:'0px', 37 bottom:'50px' 38 } 39 }] 40 }); 41 //页面跳转，或许id,绑定跳转事件 42 document.getElementById("setting").addEventListener("tap",function(){ 43 mui.openWindow({ 44 url:"login.html", 45 id:"login.html", 46 styles: { 47 top: '0px', //mui标题栏默认高度为45px； 48 bottom: '50px' //默认为0px，可不定义； 49 } 50 }) 51 }) 52 //子页面数据传输过来，进行数据展示或者弹出 53 document.addEventListener("show_alert",function(data){ 54 //获取对象 55 var s=plus.webview.currentWebview(); 56 console.log(JSON.stringify(s)) 57 console.log(JSON.stringify(data.detail)) 58 alert(data.detail.username); 59 }) 60 </script> 61 </body> 62 </html>
简单的登录界面
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" type="text/css" href="css/mui.css"/> 8 </head> 9 <body> 10 <header class="mui-bar mui-bar-nav"> 11 <h1 class="mui-title">登录</h1> 12 </header> 13 14 <div class="mui-content"> 15 <form class="mui-input-group"> 16 <div class="mui-input-row"> 17 <label>用户名</label> 18 <input type="text" id="username" class="mui-input-clear" placeholder="请输入用户名"> 19 </div> 20 <div class="mui-input-row"> 21 <label>密码</label> 22 <input type="password" id="pwd" class="mui-input-password" placeholder="请输入密码"> 23 </div> 24 <div class="mui-button-row"> 25 <button type="button" class="mui-btn mui-btn-primary" id="login_btn">登录</button> 26 <button type="button" class="mui-btn mui-btn-yellow" id="reg_btn">注册</button> 27 </div> 28 </form> 29 </div> 30 <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> 31 <script type="text/javascript"> 32 mui.init(); 33 document.getElementById("login_btn").addEventListener("tap",function(){ 34 var username=document.getElementById("username").value; 35 var pwd=document.getElementById("pwd").value; 36 // alert(username) 37 // alert(pwd) 38 mui.post("http://192.168.19.23:5000/login",{ 39 username:username, 40 pwd:pwd 41 },function(data){ 42 //服务器返回响应，根据响应结果，分析是否登录; 43 console.log(JSON.stringify(data)) 44 //消息展示并淡淡的消失 45 mui.toast(data.msg); 46 if(data.code==0){ 47 mui.openWindow({ 48 url:'user_info.html', 49 id:'user_info.html', 50 styles:{ 51 top:"0px", 52 bottom:"50px" 53 }, 54 extras:{ 55 name:data.data.username, 56 pwd:"extras的pwd值" 57 } 58 }) 59 60 } 61 62 },'json'); 63 }) 64 </script> 65 </body> 66 </html>
登录成功之后跳转页面
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>Document</title> 7 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 8 <link rel="stylesheet" type="text/css" href="css/mui.css" /> 9 </head> 10 11 <body> 12 <header class="mui-bar mui-bar-nav"> 13 <h1 class="mui-title">用户详情</h1> 14 </header> 15 <div class="mui-content"> 16 <ul class="mui-table-view"> 17 <li class="mui-table-view-cell"> 18 <a class="mui-navigate-right" id="username"> 19 20 </a> 21 </li> 22 </ul> 23 </div> 24 </body> 25 <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> 26 <script type="text/javascript"> 27 mui.init(); 28 var Sdata = null; 29 mui.plusReady(function(){ 30 Sdata = plus.webview.currentWebview(); 31 console.log(JSON.stringify(Sdata)); 32 document.getElementById("username").innerText=Sdata.pwd; 33 }); 34 35 document.getElementById('username').addEventListener('tap',function () { 36 //这句话的意思就是获取入口函数index的对象 通过HBuider对象传值 37 var new_web = plus.webview.getWebviewById("HBuilder"); 38 //fire 开火， 向谁发送数据 对象传进去， 起个名字叫show_alert 字典里面是要传输的值 39 mui.fire(new_web,"show_alert",{username:Sdata.name}); 40 }) 41 42 43 44 </script> 45 46 </html>
