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

视频教程：点击这里

微信公众号：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

        
        


            
            
            

            
            
主页
        

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

        
        

            主体部分
        

运行

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

微信公众号：JavaWeb架构师

效果

微信公众号：JavaWeb架构师

视频教程：点击这里

源码下载

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

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载