下面就开始一个简答的例子，以及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. c#读写注册表示例分享

    c#读写注册表示例,示例中有详细注释. 代码: //写注册表RegistryKey regWrite;//往HKEY_CURRENT_USER主键里的Software子键下写一个名为“Test”的子键 ...

  2. WordPress 主题开发 - (三) 开发工具 待翻译

    Before we get started building any WordPress Theme, we’re going to need to get our development tools ...

  3. 扩展 delphi 线程 使之传递参数.

    新delphi的线程TThread有了CreateAnonymousThread方法,如果再为它加一个可传递的参数不就更好了吗?代码如下: TAnonymousThreadX<T> = c ...

  4. 【转载】Powershell获取世纪互联Office365中所有用户的OWA时区

    get-mailbox -resultsize unlimited | Get-MailboxRegionalConfiguration | select Identity,TimeZone | wh ...

  5. 导入导出Android手机文件

    1.获得root权限:adb root: 如提示adbd cannot run as root in production builds,参见我的另一篇文章:http://www.cnblogs.co ...

  6. Mysql 数据分组取某字段值所有最大的记录行

    需求: 表中同一个uid(用户)拥有多条游戏等级记录,现需要取所有用户最高等级(level)的那一条数据,且时间(time)越早排越前.这是典型的排名表 +------+-------+------- ...

  7. JqueryMoblie 之 loading

    显示“正在加载........”等字样,并且带有加载图片的显示. //显示加载器function showLoader() { $.mobile.loading('show', { text: '正在 ...

  8. 微软职位内部推荐-SDE2 (Windows driver)

    微软近期Open的职位: SDE2 (Windows driver) Job title: Software Development Engineer 2 Location: Shanghai, Ch ...

  9. 原型prototype -- 深入理解javascript

    /* 原型Prototype */ //一.原型 //原型使用一 var calculator = function (dlg, tax) { this.dlg = dlg; this.tax = t ...

  10. CROSSTOOL-NG建立交叉编译工具链

    CROSSTOOL-NG建立交叉编译工具链 因为考试和学习的原因我已经一段时间没有玩我的JZ2440,现在终于考完试了,我再次找出了我的JZ2440.我之前学习的时候使用的是韦东山老师提供的开发工具, ...