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

简介: 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项目


新建 — 项目


f7eb5f8863284a8ca8550cbecbb58f1d.png


选择5+app,MUI模板即可


660c62610a484d87aebffd33664cb4a0.png


这个就是新建好的项目目录:(也是mui初始项目模板)🎈


96a98991605b4459ad9bebbe12858f62.png


大功告成!!!🎉


4.制作首页


常见APP结构:(头部+主题+底部)


34cc1a4877eb404dbe7b963da312304f.png


首页头部


注意,新建html文件时需要选择mui模板的html

添加标题:

文档中搜索标题:快捷字符是mhe


893e92be40f845dea94b1211e1168717.png


<!-- 标题栏 -->
<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>


头部页面显示效果:


719ff653d5324a779620129ef39b2657.png


首页主体


搜索文档添加主体:🔍


<!-- 主体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>
<!-- 主体结束 -->


效果显示:(由于图片路径没有配置,所以图片显示失败)


174851d64dfc4534a09efde831e5301e.png


加入轮播js:


<script type="text/javascript">
  mui.init();
  //获取按当前文档中轮播图组件对象
  var sliderObj = mui("#slider");
  sliderObj.slider({
    interval:1000
  })
</script>


您可以使用Hbuilder的预览功能来实时观察代码运行情况

当然我们更推荐您使用安卓/IOS模拟器进行开发工作


954db342d37b4dbaab81486b95ab8af5.png


实现九宫格: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结束 -->


显示效果:


6d26dbc647b64f89817f48ea11d04156.png


可以看到,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>


显示效果:


276857d26d984cc4a5f595b9ea7b809c.png


实现底部选项卡切换:全部代码:


<!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名称版本主页等


图标配置


9d608849803c48139644530180844721.png


选择图片后记得点击【自动生成所有图标并替换】


发行


【发行】—【原生APP-云打包】


46be296a65174bfca3e16c1fcf293d1d.png


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


ec37bacc08e84d9da0549f01eebaabea.png


打包发布!!!🎉✨

目录
相关文章
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
8天前
|
安全 JavaScript 前端开发
小游戏源码开发之可跨app软件对接是如何设计和开发的
小游戏开发团队常需应对跨平台需求,为此设计了成熟的解决方案。流程涵盖游戏设计、技术选型、接口设计等。首先明确游戏功能与特性,选择合适的技术架构和引擎(如Unity或Cocos2d-x)。接着设计通用接口,确保与不同App的无缝对接,并制定接口规范。开发过程中实现游戏逻辑和界面,完成登录、分享及数据对接功能。最后进行测试优化,确保兼容性和性能,发布后持续维护更新。
|
10天前
|
前端开发 Java 测试技术
语音app系统软件源码开发搭建新手启蒙篇
在移动互联网时代,语音App已成为生活和工作的重要工具。本文为新手开发者提供语音App系统软件源码开发的启蒙指南,涵盖需求分析、技术选型、界面设计、编码实现、测试部署等关键环节。通过明确需求、选择合适的技术框架、优化用户体验、严格测试及持续维护更新,帮助开发者掌握开发流程,快速搭建功能完善的语音App。
|
11天前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
884 14
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
12天前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
68 8
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    135
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    60
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    884