本文主要包含hbuilder mui,hbuilder mui视频教程,hbuilder mui教程,hbuilder mui api,hbuilder mui app等相关知识,教程希望在学习及工作中可以帮助到您
");
</div>
前言
看了前面两篇内容是否有点跃跃欲试了?
下面就开始一个简答的例子,以及mui相关内容
mui
官网:http://dcloudio.github.io/mui/
说明:希望你可以把官网内容通读一遍,这是以后开发的基础
开始
新建项目
在首页点击新建移动App,如下:
或者在项目管理器内右键新建,或者快捷键ctrl+n+a
选择模版
这里选择mui项目,会自动引入mui的js和css,如下:
文件结构
默认有以下几个文件夹:css,fonts,js,如下:
简单开发
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