HTML5+开发移动app教程3-mui开发示例

来源：互联网发布：35互联域名证书下载编辑：程序博客网时间：2024/05/24 02:39

前言

看了前面两篇内容是否有点跃跃欲试了？

下面就开始一个简答的例子，以及mui相关内容

mui

官网：http://dev.dcloud.net.cn/mui/

说明：希望你可以把官网内容通读一遍，这是以后开发的基础

开始

新建项目

在首页点击新建移动App，如下：

QQ截图20150204141301.jpg

或者在项目管理器内右键新建，或者快捷键ctrl+n+a

选择模版

这里选择mui项目，会自动引入mui的js和css，如下：

QQ截图20150204141511.jpg

文件结构

默认有以下几个文件夹：css，fonts，js，如下：

QQ截图20150204141611.jpg

简单开发

header

打开index.html后在body内输入mh后回车，如下：

body

同样输入mbo后回车

list

在mbody中添加一些列表

最后的代码

<!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"><ul class="mui-table-view" id="my_task_list"><li class="mui-table-view-cell"><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-handle">待办事项1</div></li><li class="mui-table-view-cell"><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-handle">待办事项2</div></li></ul></div></body></html>