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

mui

官网：http://dcloudio.github.io/mui/

说明：http://dev.dcloud.net.cn/mui/ui/index.html#accordion

开始

新建项目

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

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

选择模版

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

文件结构

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

简单开发

header

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

body

同样输入mbo后回车

list

在mbody中添加一些列表

最后的代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <script src="js/mui.min.js"></script>
  8. <link href="css/mui.min.css" rel="stylesheet"/>
  9. <script type="text/javascript" charset="utf-8">
  10. mui.init();
  11. </script>
  12. </head>
  13. <body>
  14. <header class="mui-bar mui-bar-nav">
  15. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  16. <h1 class="mui-title">我的标题</h1>
  17. </header>
  18. <div class="mui-content">
  19. <ul class="mui-table-view" id="my_task_list">
  20. <li class="mui-table-view-cell">
  21. <div class="mui-slider-right mui-disabled">
  22. <a class="mui-btn mui-btn-red">删除</a>
  23. </div>
  24. <div class="mui-slider-handle">
  25. 待办事项1
  26. </div>
  27. </li>
  28. <li class="mui-table-view-cell">
  29. <div class="mui-slider-right mui-disabled">
  30. <a class="mui-btn mui-btn-red">删除</a>
  31. </div>
  32. <div class="mui-slider-handle">
  33. 待办事项2
  34. </div>
  35. </li>
  36. </ul>
  37. </div>
  38. </body>
  39. </html>

调试（android为例）

连接手机

首先需要连接手机

运行

选择运行——手机运行——在xx设备上运行

或者使用快捷键ctrl+r

效果

现在你就可以在手机上看效果了

注意

需要开启开发者模式

打包

dcloud证书打包

选择发行——App打包——选择Android以及dcloud公用证书，如下：

参数配置

可能有时候会提示参数配置错误，这是你需要打开项目下manifest.json文件，并去掉第三方插件，如下：

等待

返回上一步的发行打包，点击打包后会提示你已经到云端打包，你只需要等待了，

一小会之后就打包好了，这时你就可以把apk拷贝到自己手机使用了，

HTML5+开发移动app教程3-mui开发示例的更多相关文章

  1. 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程

    前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plu ...

  2. 思考：用开发移动app的观念来开发网站

    首先祝大家新年快乐.万事如意. 开发网站程序也有一些年头了,从最初的静态HTML+ JS,到后来的WebForm,然后过渡到现在的MVC. 由于最近做一些技术调研,也接触了很多移动开发,iOS和And ...

  3. 使用Android-studio开发移动app与weex结合开发详细步骤

    详细步骤如下:   首先,确保机器已经安装了node.js,并且把npm更新到最新版本 下载完毕后,我们可以看到全局目录下的node_modules下面多出一个weex-toolkit 同时,我们留意 ...

  4. [deviceone开发]-直播APP心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...

  5. APP定制开发：APP软件开发的语言和开发环境

    APP软件开发是移动互联网开发公司常开发的一种手机应用系统,对于刚刚进入APP软件开发领域的新手来说,选择什么编程语言和需要什么开发环境来开发APP软件是常遇到的问题.下面亿合科技小编来为大家分享下: ...

  6. HBuilder开发App教程04-最难搞定的是mui

    前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开 ...

  7. mui开发app之html5+,5+Runtime,5+sdk,native.js

    说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...

  8. HTML5 Plus移动App(5+App)开发入门指南

    HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...

  9. HBuilder开发App教程05-滴石和websql

    滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...

随机推荐

  1. How to begin Python learning?

    如何开始Python语言学习? 1. 先了解它,Wiki百科:http://zh.wikipedia.org/zh-cn/Python 2. Python, Ruby等语言来自开源社区,社区的学法是V ...

  2. Oracle计算两个整数的和与这两个整数的差与商

    PL/SQL(Procedural Language/SQL)是一种过程化语言. PL/SQL都是以(BLOCK)块为基本单位,整个PL/SQL块分为三部分 1.声明(Declare) 2.执行(以B ...

  3. 从零开始学ios开发（五）：IOS控件（2），Slider

    下面继续学习ios的其他控件,这次会使用到的控件有Slider,当然还有一些之前已经使用过的控件Label. 这次我们不新建一个project了,当然如果你愿意重新创建一个新的项目也完全可以,我们还是 ...

  4. iOS/Objective-C开发 字典NSDictionary的深复制（使用category)

    目标:把NSDictionary对象转换成NSMutableDictionary对象,对象内容是字符串数组,需要实现完全复制(深复制). 如果调用NSDictionary的mutableCopy方法, ...

  5. phpcms v9 企业黄页系统发布没有表单出现的解决方案

    第一种解决方案: 第一步:把yp_UTF8压缩文件解压得到:api.caches.phpcms.statics四个文件夹. 第二步:把这四个文件夹分别覆盖已安装好的phpcms系统根目录下的文件夹.这 ...

  6. SkyDrive Pro client now available as standalone download. Hurray!

    SkyDrive Pro client now available as standalone download. Hurray! by  Todd O. Klindt  on 5/21/2013 1 ...

  7. Windows程序消息机制浅析

    1.消息  消息是由MSG结构体来表示的.如下: typedef struct tagMSG { HWND hwnd; UINT message; WPARAM wParam; LPARAM lPar ...

  8. Cocos2D创建项目

    创建项目 配置好开发环境后, 用CMD切换到~\cocos2d\cocos2d-x-2.2.2\tools\project-creator目录上执行以下脚本 python create_project ...

  9. CentOS-6.5安装配置JDK-7和JDK-8

    安装说明 系统环境:centos-6.5 软件:jdk-7-linux-x64.rpm , jdk-8u5-linux-i586.tar.gz  下载地址:http://www.oracle.com/ ...

  10. ruby 格式化当前日期时间

    ruby 格式化当前日期时间 ruby 用Time类获取当前时间. t = Time.new puts t 可以看到输出的是(我现在运行的时间): Sat Jan 29 10:45:22 +0800 ...