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

r囧r小猫 2022-07-15 14:19 245阅读 0赞

# 前言 #

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

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

# mui #

官网：[http://dev.dcloud.net.cn/mui/][http_dev.dcloud.net.cn_mui]

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

# 开始    #

### 新建项目    ###

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

![QQ截图20150204141301.jpg][QQ_20150204141301.jpg]

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

### 选择模版    ###

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

![QQ截图20150204141511.jpg][QQ_20150204141511.jpg]

### 文件结构 ###

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

![QQ截图20150204141611.jpg][QQ_20150204141611.jpg]

# 简单开发 #

### header ###

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

![1.jpg][]

### 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>`  调试（android为例）  连接手机  首先需要连接手机  运行     选择运行——手机运行——在xx设备上运行     或者使用快捷键ctrl+r  效果  现在你就可以在手机上看效果了  注意  需要开启开发者模式       打包  dcloud证书打包     选择发行——App打包——选择[Android][]以及dcloud公用证书，如下：     ![2.jpg][]  参数配置     可能有时候会提示参数配置错误，这是你需要打开项目下manifest.json文件，并去掉第三方插件，如下：  ![3.jpg][]  等待  返回上一步的发行打包，点击打包后会提示你已经到云端打包，你只需要等待了，  一小会之后就打包好了，这时你就可以把apk拷贝到自己手机使用了，  ![4.jpg][]       更多  更多文章请访问：[http://uikoo9.com/blog/list][http_uikoo9.com_blog_list]  原文连接：[http://blog.csdn.net/uikoo9/article/details/43485899][http_blog.csdn.net_uikoo9_article_details_43485899] ###

[http_dev.dcloud.net.cn_mui]: http://dev.dcloud.net.cn/mui/
[QQ_20150204141301.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423030378011010234.jpg
[QQ_20150204141511.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423030513109006051.jpg
[QQ_20150204141611.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423030610247011600.jpg
[1.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423030681329069762.jpg
[Android]: http://lib.csdn.net/base/android
[2.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423031086164035246.jpg
[3.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423031148660007417.jpg
[4.jpg]: http://uikoo9-ueditor.qiniudn.com/@/images/20150204/1423031245001042395.jpg
[http_uikoo9.com_blog_list]: http://uikoo9.com/blog/list
[http_blog.csdn.net_uikoo9_article_details_43485899]: http://blog.csdn.net/uikoo9/article/details/43485899