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

小薛引路

于 2021-12-15 11:11:37 发布

阅读量1.8k

点赞数

分类专栏： muiapp开发文章标签： p2p wpf tv

本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/121905187

版权

muiapp开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

效果：