视频教程：点击这里

微信公众号：JavaWeb架构师

准备知识

• HTML
• CSS
• JavaScript
• 一门网页后端技术（PHP、JavaWeb、Python等等）

安装HBuilder开发环境

搜索安装即可。

新建web移动项目

微信公众号：JavaWeb架构师 微信公众号：JavaWeb架构师

认识项目结构

css文件夹

   |-mui.css： 没有压缩过的mui自带css

   |-mui.min.css： 压缩过的mui自带css

fonts文件夹

   |-mui.ttf： 字体文件，主要是一些图标

微信公众号：JavaWeb架构师

js文件夹

   |-mui.js： 没有压缩过的js文件

   |-mui.min.js： 压缩过的js文件

index.html 文件

 程序入口文件

manifest.json 文件

  配置文件

微信公众号：JavaWeb架构师

基础布局及样式

• 头部区域，样式：mui-bar mui-bar-nav

        <!-- 1.头部header，样式：mui-bar mui-bar-nav -->
        <header class="mui-bar mui-bar-nav">

            <!-- 后退按钮a标签：mui-action-back mui-icon mui-icon-left-nav mui-pull-left -->
            <!-- mui.js会自动的去添加事件 -->
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <!-- 标题h1标签：mui-title -->
            <h1 class="mui-title">主页</h1>
        </header>

• 内容区域，样式：mui-content

        <!-- 主体div，样式：mui-content -->
        <div class="mui-content">
            主体部分
        </div>

运行

• 直接浏览器运行
• 插上手机，真机运行
• 模拟器运行

微信公众号：JavaWeb架构师

效果

微信公众号：JavaWeb架构师

视频教程：点击这里

源码下载

关注下方的微信公众号，回复：mui_course.code

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载