MUI框架开发APP详解，一篇就够了

2022-12-07 435

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1.MUI简介最接近原生APP体验的高性能前端框架追求性能体验，是开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件MUI官方文档

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-云打包】

按所需进行配置，只需要使用公共测试证书即可

打包发布！！！🎉✨