1.MUI简介
最接近原生APP体验的高性能前端框架
追求性能体验，是开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件
MUI官方文档
2.下载安装hbuilderx
hbuilderx
选择简易版即可，无需安装操作
3.新建一个5+app项目
新建 — 项目
选择5+app，MUI模板即可
这个就是新建好的项目目录：（也是mui初始项目模板）🎈
大功告成！！！🎉
4.制作首页
常见APP结构：（头部+主题+底部）
首页头部
注意，新建html文件时需要选择mui模板的html
添加标题：
文档中搜索标题：快捷字符是mhe
<!-- 标题栏 --> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">小钱同学</h1> </header>
同样搜索文档加入搜索框：
<!-- 标题栏 --> <header class="mui-bar mui-bar-nav"> <!-- 搜索框 --> <div class="mui-input-row mui-search"> <input type="search" class="mui-input-clear" placeholder="请输入搜索内容"> </div> </header>
头部页面显示效果：
首页主体
搜索文档添加主体：🔍
<!-- 主体mbo --> <div class="mui-content"> 主体内容 </div>
搜索文档加入轮播图：🔍
<!-- 主体 --> <div class="mui-content"> <!-- 轮播图msl图片轮播 --> <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:\"> </a> </div> <!-- 第三张 --> <div class="mui-slider-item"> <a href="#"> <img src="http:\"> </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> </div> <!-- 主体结束 -->
效果显示：（由于图片路径没有配置，所以图片显示失败）
加入轮播js:
<script type="text/javascript"> mui.init(); //获取按当前文档中轮播图组件对象 var sliderObj = mui("#slider"); sliderObj.slider({ interval:1000 }) </script>
您可以使用Hbuilder的预览功能来实时观察代码运行情况
当然我们更推荐您使用安卓/IOS模拟器进行开发工作
实现九宫格：mgr
<!-- 九宫格mgr --> <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-3"> <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-3"> <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-3"> <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-3"> <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-3"> <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-3"> <a href="#"> <span class="mui-icon mui-icon-phone"></span> <div class="mui-media-body">Phone</div> </a> </li> </ul> <!-- 九宫格mgr结束 -->
显示效果：
可以看到，mui的框架功能还是非常齐全的🎄
5.制作底部选项卡
底部选项卡是公用的界面，所以新建一个html文件即可
<!-- 底部选项卡mta --> <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"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav>
显示效果：
实现底部选项卡切换：全部代码：
<!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> <!-- 底部选项卡mta --> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="appIndex.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="appPhone.html"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item" href="email.html"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item" href="setting.html"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script type="text/javascript"> mui.init(); // 底部选项卡切换 mui.plusReady(function () { // 定义一个容器存储底部选项卡的所有页面 var pages = ["appIndex.html","appPhone.html","email.html","setting.html"]; // 获取当前窗口对象 var ws = plus.webview.currentWebview(); // 设置窗口样式 var pageStyle = { top:"0px", bottom:"50px" } // 循环创建窗口对象 for(var i = 0 ; i < pages.length ; i++){ var item = plus.webview.create(pages[i],pages[i],pageStyle); ws.append(item); } // 设置默认打开窗口 plus.webview.show(pages[0]); // 选项卡事件监听 mui(".mui-bar-tab").on("tap","a",function(){ // 获取被点击a标签的href属性值 var href = this.getAttribute('href'); // 展示页面 plus.webview.show(href); }); }); </script> </body> </html>
6.H5plus使用
设置页面样式
<!-- 头部 --> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">H5plus</h1> </header> <!-- 主体 --> <div class="mui-content"> <!-- 列表 --> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> 蜂鸣 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 2 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 3 </a> </li> </ul> </div>
蜂鸣
<body> <!-- 头部 --> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">H5plus</h1> </header> <!-- 主体 --> <div class="mui-content"> <!-- 列表 --> <ul class="mui-table-view"> <li class="mui-table-view-cell" id="beep"> <a class="mui-navigate-right"> 蜂鸣 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 2 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 3 </a> </li> </ul> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init() mui.plusReady(function(){ // 蜂鸣声事件监听 document.getElementById("beep").addEventListener("tap",function(){ // 仅限于安卓，响铃三次 plus.device.beep(3); }); }); </script> </body>
7.app打包发布
基础配置
双击manifest.josn，进行基础配置，需要获取APPID，及配置APP名称版本主页等
图标配置
选择图片后记得点击【自动生成所有图标并替换】
发行
【发行】—【原生APP-云打包】
按所需进行配置，只需要使用公共测试证书即可
打包发布！！！🎉✨
