002_跨平台开发_MUI_认识第一个MUI程序

配套视频教程

准备知识

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

安装HBuilder开发环境

搜索安装即可。

新建web移动项目

认识项目结构

css文件夹

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

fonts文件夹

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

js文件夹

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

index.html 文件

 程序入口文件

manifest.json 文件

  配置文件

基础布局及样式

• 头部区域，样式：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>

运行

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

效果

配套视频教程

源码下载

关注下方的微信公众号，回复：认识第一个MUI.code

欢迎加入交流群：451826376

更多信息：www.itcourse.top