1 创建mui项目

创建完成后，得到如下项目目录：

css：为项目的样式表
fonts：项目用到的字体
js：项目用到的 js 文件
index：为项目的默认主页
manifest：为项目的配置信息
img：自己创建的，用来存放图片资源

2. 创建主页

2.1 创建注册页面 html

2.2 创建头部

键入mh，自动生成header标签

生成代码：

<header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">标题</h1>
</header>

2.3 创建页面主体

键入mbody:

生成代码：

<div class="mui-content">这是我的第一个muiapp程序
</div>

2.4 创建底部导航栏

 <nav class="mui-bar mui-bar-tab"><a id="display" class="mui-tab-item {if $_GPC['op'] == 'display'}mui-active{/if}"href="{php echo $this->createMobileUrl('pj_goods', array('op' => 'display'))}"><span class="mui-icon mui-icon-bars"></span><span class="mui-tab-label">列表</span></a><a class="mui-tab-item {if $_GPC['op'] == 'detail'}mui-active{/if}" href=""><span class="mui-icon mui-icon-info"></span><span class="mui-tab-label">详情</span></a><a class='mui-tab-item' href='b.html'><span class='mui-icon mui-icon-chatboxes'><span class="mui-badge">9</span></span><span class="mui-tab-label">消息</span></a><a id="home" class="mui-tab-item  {if $_GPC['op'] == 'home'}mui-active{/if}"href="{php echo $this->createMobileUrl('pj_goods', array('op' => 'home'))}"><span class="mui-icon mui-icon-home"></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"/><script type="text/javascript" charset="utf-8">mui.init();</script>
</head>
<body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">标题</h1></header><div class="mui-content">这是我的第一个muiapp程序</div><nav class="mui-bar mui-bar-tab"><a id="display" class="mui-tab-item {if $_GPC['op'] == 'display'}mui-active{/if}"href="{php echo $this->createMobileUrl('pj_goods', array('op' => 'display'))}"><span class="mui-icon mui-icon-bars"></span><span class="mui-tab-label">列表</span></a><a class="mui-tab-item {if $_GPC['op'] == 'detail'}mui-active{/if}" href=""><span class="mui-icon mui-icon-info"></span><span class="mui-tab-label">详情</span></a><a class='mui-tab-item' href='b.html'><span class='mui-icon mui-icon-chatboxes'><span class="mui-badge">9</span></span><span class="mui-tab-label">消息</span></a><a id="home" class="mui-tab-item  {if $_GPC['op'] == 'home'}mui-active{/if}"href="{php echo $this->createMobileUrl('pj_goods', array('op' => 'home'))}"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">我的</span></a></nav>
</body>
</html>

效果：

mui-app开发实战01 创建项目及主页相关推荐

App开发流程之创建项目和工程基本配置
我的开发环境为:Mac OS X EI Capitan(10.11.6),Xcode 7.3.1 首先说明一下这个项目的初衷,我并非要创建一个完整的上架应用,旨在创建一个可运行的,通用配置.架构,提供 ...
搭建开发环境——Python实战：Web App 开发 Day 01
1. 背景介绍 Python 的功能十分强大,因其强大而丰富的开源包,让其可以实现高级爬虫,可以实现机器学习算法,可以应用到深度学习中,也可以开发Web App 项目. 本次的Python实战就是We ...
最新仿映客直播APP开发实战项目IOS开发实战8天(最全最新)
最新仿映客直播APP开发实战项目IOS开发实战8天第 1 章:直播准备 1: [录播] 课程大纲介绍 09:56 2: [录播] 了解直播技术和腾讯云直播 09:54 3: [录播] 基础封装 23 ...
Vue.js 3.0快速入门（附电影购票APP开发实战源码）
前言文档笔记来源:kuangshenstudy,清华大学出版社,结合视频资源食用更佳,相关资源源码在文末,有需要自取. 一.概述 Vue是什么? Vue.js是基于JavaScript的一套MVVC ...
低功耗蓝牙工具APP开发实战
<低功耗蓝牙工具APP开发实战> 什么是 LightBLE? 一个功能比较全面的蓝牙调试工具.支持所有使用蓝牙4.0低功耗的设备接入调试,提供蓝牙设备搜索.读取服务.浏览特征等操作. ...
iPhone App开发实战手册
<iPhone App开发实战手册> 基本信息作者: (美)霍肯伯里(Hockenberry,C.) 译者: 高京历勤勇施迪宏出版社:电子工业出版社 ISBN:9787121176 ...
Cordova+React+OnsenUI+Redux新闻App开发实战教程-姜博-专题视频课程
Cordova+React+OnsenUI+Redux新闻App开发实战教程-779人已学习课程介绍 Cordova+React+OnsenUI+Redux新闻App开发实战视频培训 ...
Hybrid App开发实战
Hybrid App开发实战 [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开 ...
《HTML5移动网站与App开发实战》简介
#好书推荐##好书奇遇季#<HTML5移动网站与App开发实战>,京东当当天猫都有发售.定价79元,网店打折销售更便宜.本书内容非常系统全面,配套示例源码与PPT课件. 本书由浅入深出.全 ...

mui-app开发实战01 创建项目及主页

1 创建mui项目

2. 创建主页

2.1 创建注册页面 html

2.2 创建头部

2.3 创建页面主体

2.4 创建底部导航栏

mui-app开发实战01 创建项目及主页相关推荐

最新文章

热门文章