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

1.MUI简介2.下载安装hbuilderx3.新建一个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

小钱同学

同样搜索文档加入搜索框：

头部页面显示效果：

首页主体

搜索文档添加主体：🔍

搜索文档加入轮播图：🔍

效果显示：（由于图片路径没有配置，所以图片显示失败）

加入轮播js:

可以使用Hbuilder的预览功能来实时观察代码运行情况 当然更推荐使用安卓/IOS模拟器进行开发工作

实现九宫格：mgr

• Home

• 5

  Email

• Chat

• Location

• Search

• Phone

显示效果：

可以看到，mui的框架功能还是非常齐全的

5.制作底部选项卡

底部选项卡是公用的界面，所以新建一个html文件即可

显示效果：

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

6.H5plus使用

设置页面样式

H5plus

蜂鸣

H5plus

7.app打包发布

基础配置

双击manifest.josn，进行基础配置，需要获取APPID，及配置APP名称版本主页等

图标配置

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

发行

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

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

打包发布