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

article/2025/9/24 3:58:11

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

  • 1.MUI简介
  • 2.下载安装hbuilderx
  • 3.新建一个5+app项目
  • 4.制作首页
    • 首页头部
    • 首页主体
  • 5.制作底部选项卡
  • 6.H5plus使用
    • 设置页面样式
    • 蜂鸣
  • 7.app打包发布
    • 基础配置
    • 图标配置
    • 发行

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

在这里插入图片描述

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

在这里插入图片描述

打包发布


http://chatgpt.dhexx.cn/article/P88I7miV.shtml

相关文章

Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire

Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire

一、MUI框架&#xff08;前端UI框架&#xff09; &#xff08;一&#xff09;MUI框架简介及优劣势分析&#xff1a; 1.MUI基本介绍及优劣势分析 MUI是一套前端框架&#xff0c;由DCLOUD公司研发而成&#xff0c;提供大量H5和js语言组成的组件&#xff0c;大大提高了开发效率&…
阅读更多...
Eclipse修改字体大小

Eclipse修改字体大小

字体调整大小1.打开eclipse&#xff0c;点击“window” 2.在下拉菜单中展开找到“preferences”&#xff0c;在左边菜单中点击“general”&#xff0c;找到后展开“appearance”。 3.选择“colors and fonts”。 4.找到basic&#xff0c;点击Text Font&#xff0c;双击鼠标右…
阅读更多...
eclipse字体大小设置

eclipse字体大小设置

eclipse字体大小设置 ①点击菜单上的Window窗口 ②点击Preferences选项 ③General→Appearance→Colors and Fonts ④选中Text Font ⑤点击Edit ⑥更改字体大小
阅读更多...
修改Eclipse字体以及背景颜色

修改Eclipse字体以及背景颜色

操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说&#xff0c;白色很刺激我们的眼睛&#xff0c;所以我经常会改变workspace的背景色&#xff0c;使眼睛舒服一些。设置方法如下&#xff1a; 1、打开window->Preference,弹出Preference面板 2、展开General标签&a…
阅读更多...
eclipse 快捷调整字体_eclipse字体大小设置快捷键

eclipse 快捷调整字体_eclipse字体大小设置快捷键

原标题："win10系统如何更改Eclipse字体大小"关于电脑问题教程分享。 - 来源:191路由网 - 编辑:小元。 因为编辑需要，不少朋友都会在windows10系统电脑中安装Eclipse英文版软件，用户对于代码的应用应该是没有问题的，可在英文版Eclipse设置字体小大却是两眼一抹黑，…
阅读更多...
Eclipse字体颜色控制

Eclipse字体颜色控制

注:以下为转载,觉得写的很全,只为方便自己查看,或他人查看 因为eclipse字体颜色默认的我们看久了会觉得有点眼睛不舒服&#xff0c;特别是在晚上&#xff0c;太亮了&#xff0c;我觉得eclipse的白色背景太刺眼了看着不舒服 此时我们就希望设置一下字体eclipse字体颜色&#xf…
阅读更多...
eclipse改变html字体大小,eclipse字体大小设置（eclipse如何调整页面字体大小）

eclipse改变html字体大小,eclipse字体大小设置（eclipse如何调整页面字体大小）

eclipse字体大小设置(eclipse如何调整页面字体大小)每个人在敲代码的时候习惯都不会一样&#xff0c;有的人喜欢字体大一些看起来容易&#xff0c;有的人喜欢字体小一些&#xff0c;看的范围广&#xff0c;看得更全面&#xff0c;这样今天教大家如何调整字体的大小&#xff0c;…
阅读更多...
java eclipse字体大小设置_eclipse字体大小如何设置-eclipse字体大小设置方法 - 河东软件园...

java eclipse字体大小设置_eclipse字体大小如何设置-eclipse字体大小设置方法 - 河东软件园...

Eclipse是一款Java的可扩展开发平台&#xff0c;用户在开发Java项目是都会选择使用Eclipse&#xff0c;而通过Eclipse进行编辑时&#xff0c;经常需要设置字体与大小&#xff0c;但由于许多用户大多下载的是英文版&#xff0c;所以不知道如何进行设置&#xff0c;而今天为用户带…
阅读更多...
Eclipse设置字体大小

Eclipse设置字体大小

Eclipse设置字体大小 01、打开Window–>Preferences 02、选择Genneral–>Editors 03、点击Colors and Fonts 04、选择Text Font 05、设置字体大小
阅读更多...
Eclipse 修改字体教程

Eclipse 修改字体教程

首先选择左上角的 Window&#xff0c;然后选择Preferences 会弹出如下界面 点开General&#xff0c;然后点开Appearance&#xff0c;然后点开Colors and Fonts 出现如下界面 然后选择Java —> Java Editor Text Font —> Edit 就可以在出现的界面调字体了
阅读更多...
eclipse字体调整

eclipse字体调整

1.左边workspace 区域 在view and Editor Folders 中修改 2. Java文件在下图中设置 3.JSP文件字体在Basic->中的Test Font 中修改
阅读更多...
Eclipse更改字体大小

Eclipse更改字体大小

1、首先点击window窗口的点击preferences选项 2、接着弹出一个面板&#xff0c;在面板里点击General&#xff0c;再点击Appearance下方的Colors and fonts选项&#xff0c;选择Basic选项 3、下拉选择Text Font 4、接着会出现字体更改窗口&#xff0c;更改想要的字体大小即可
阅读更多...
调整Eclipse字体大小

调整Eclipse字体大小

Eclipse 字体有两处&#xff0c;一处是控制台的字体&#xff0c;一处是主窗口。这里分别介绍控制台和主窗口字体的调节方法。 Window -> Preferences -> General -> Appearance -> Colors and Fonts -> Basic -> Text Font -> Edit 调节控制条字体大小。…
阅读更多...
Eclipse设置字体

Eclipse设置字体

在eclipse中的windows找到Preferences 点击General -->Appearance -->Colors and font 找到Basic并展开 找到Basic中的Text Font&#xff0c;选中后点击Edit 选择字体后点击确定 最后Apply就应用成功&#xff01;
阅读更多...
eclipse字体背景变红或者变绿的解决办法

eclipse字体背景变红或者变绿的解决办法

今天用eclipse写代码时&#xff0c;背景颜色突然变绿了&#xff0c;不知道具体什么原因 **解决办法&#xff1a;**右键→Show In→Coverage&#xff0c;再点击双x图标
阅读更多...
更改eclipse字体

更改eclipse字体

1、打开eclipse&#xff0c;点击菜单栏window选项 2、在显示的列表中点击Preferences 3、在出现的窗口依次点击General-->Appearance-->Colors and Fonts 4、在右侧列表找到Java-->Java Editors Text Font(set to default:Text Font) 5、在弹出的窗口选择要更改的字体…
阅读更多...
eclipse字体大小调整

eclipse字体大小调整

Eclipse 字体有两处&#xff0c;一处是控制台的字体&#xff0c;一处是主窗口。这里分别介绍控制台和主窗口字体的调节方法。 Window -> Preferences -> General -> Appearance -> Colors and Fonts -> Basic -> Text Font -> Edit 调节控制条字体大小。 …
阅读更多...
eclipse字体设置

eclipse字体设置

eclipse字体在哪更改&#xff1f; 1.菜单栏找到windows&#xff0c;点击preference&#xff08;一般是最后一个&#xff09; 进入preference&#xff0c;按下面步骤来 Edit..后就能修改想要的字体和大小了
阅读更多...
Eclipse 字体设置

Eclipse 字体设置

Windows-preferences-colors and font 记录一些常用的字体设置 1.basic-Text font 修改所有代码以及属性文件等的文字大小 也可以通过Java-Java editor text font 单独修改Java代码的字体大小 2.view and editor folder下面的tree and table font for views 修改的是Project…
阅读更多...
eclipse字体大小设置教程(eclipse主窗口和控制台字体大小设置)

eclipse字体大小设置教程(eclipse主窗口和控制台字体大小设置)

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台&#xff0c;有的朋友反馈Eclipse字体太小&#xff0c;很影响编写代码&#xff0c;那么eclipse字体大小在如何设置呢&#xff1f;Eclipse 字体有两处&#xff0c;一处是控制台的字体&#xff0c;一处是主窗口&#xff0c;…
阅读更多...
推荐文章

Copyright @ 2022~2023