精华内容
下载资源
问答
  • HTML5+MUI+HBuilder 之初探情人

    万次阅读 多人点赞 2014-12-22 18:19:24
    先简单介绍下MUI: MUI(Mobile User Interface)是一套基于Html5的,遵循Html5+规范的,中国团队(是否有老外我不知道哦)开发的,开源的(遵循MIT 条款),用于手机端界面开发的一套框架。以下内容摘自MUI在Github...

    07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以我的大学都献给了C/C++和Java。当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的崛起了。小弟不才,反映略慢,加上观念陈旧,(C++程序员的通病——觉得前端=低端&移动端=前端),因此并没有打好移动APP的基础。这给后来我和我们兴趣小团队做些创意式项目也带来了难以逾越的坎。现在这会儿,哪个web应用没有移动APP客户端,就好比飞机没有机翼,帅哥没房没车没学历,美女不能生育一样,让人无法接受,且火不起来。令人欣慰的是,我的团队里有人会Android开发,所以我所要担心的就是IOS开发了,于是我自学了IOS上的Xcode开发。现在的我只能说是入门。入门的我发现,IOS的开发太繁琐了,毕竟我不是专门做这个的,要成为熟练的开发者,需要花大量的时间研究开源控件,改写代码等,当然令人费心的还有Xcode奇葩的MVC逻辑(MVC用在web开发很好,但是用在本地应用开发真的适合吗?小弟作为一个Xcode新人吐槽一句:这就相当于当年VC中的MFC!用过Delphi和CBuilder这些RAD的都会喜欢BCB的界面开发,入手简单,所见即所得。所以在Delphi的Anders Hejlsberg去了微软之后开发出了微软至今最伟大的语言——C#及相关组件,当我第一次使用C#做Windows窗体应用开发的时候,我感觉到了Delphi界面开发的灵魂)。

    言归正传,当我正迷茫自己诸多想法皆要毁于巨大的App开发成本时,MUI的出现真正的解放了我的负担。先简单介绍下MUI:

            MUI(Mobile User Interface)是一套基于Html5的,遵循Html5+规范的,中国团队(是否有老外我不知道哦)开发的,开源的(遵循MIT 条款),用于手机端界面开发的一套框架。以下内容摘自MUI在Github上的项目介绍:

     

    性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。——摘自MUI在Github上的项目介绍

    MUI的出现绝非偶然,小弟就曾经有过类似的完整的设计,所以当MUI出现在我的视野中时,更多的是那种“英雄所见略同”的快感。我曾想过并初探过Xamaria的使用,这玩意一是收费,二是感觉有点半成品,开发环境很繁琐,不适合新手作为一个业余爱好使用。

    Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单。Xamarin的产品简化了针对多种平台的应用开发, 包括iOS、Android、Windows Phone和Mac App。Xamarin由许多著名的开源社区开发者创立和参与,而且也是Mono项目的主导者——C#与·NET框架的开源、跨平台实现。——摘自百度百科。

    年初时,我就想过为啥不可以出来一款类似于JVM的,可以运行在安卓,IOS上的虚拟机,然后开发者只需要使用一门语言(Java,Javascript,python等)就可以开发出运行在任何移动平台的软件呢?然后再使用拖拽+事件编程(等于用BCB/Delphi开发windows应用)的方式来开发APP界面呢?到那个时候,用户只需要拖拖控件,双击添加事件,修改修改样式等属性就可以完成通用的应用。而且,APP的安装包会很小,我们把一些规范的样式和基础控件都放到这个虚拟机中,运行时只需要按照ID来调用。当然,草民肯定是没有这个能力,时间,金钱来做这个的。。。

    MUI包括同类软件的诞生,绝对是我今年听到的对我最有用的软件行业的消息之一了!它将极大的提高了草根程序员开发web产品的单兵作战能力。虽然我不熟悉原生APP的开发,或对于HTML,CSS和JS并不能说是精通,但是不虚!!至少有经验,了解原理。跟Xcode的学习成本比已经好了太多!虽然我是xcode菜鸟,不应该黑xcode,不过之前的swfit的出现,让我看到了猪跑···(没吃过猪肉,还没见过猪跑吗?)

    MUI是移动端开发的革命者之一(同类的产品已经陆续出现)!终将革掉那些高富帅,“土豪劣绅”,大地主才能用的起的开发方式的命。也许MUI之后还有更加优秀的类似框架产生,目前(2014年年底)MUI是基于H5的最方便的App开发框架之一!

    MUI框架的原理图如下:

               

     

    HTML5+ Runtime即H5的运行环境,它的功能其实就是手机上Web browser,不过要加上一个形容词:高效的! 它执行JS和HTML的速度比IOS自带的Safari可要高多了。通过高效执行HTML5和JS,MUI框架才能实现和Native媲美的速度。

            MUI框架目前的产品——HBuilder,也是遵循了H5+规范的H5 IDE。通过HBuilder,我们可以快速开发出H5网页,而它跑在MUI框架中的速度非常快,您不用担心他看起来不像native。另外,HBuilder号称史上最牛的Html+js IDE,提供了各种快捷键,和缩写方式。小弟体验了下,感觉确实不错。不过这个工具做的再好,毕竟意义没有MUI本身大,不过还是非常值得鼓励的。

    要使用HBuilder开发和调试移动端APP(且容忍小弟这么称呼吧),只需要:

    (1)下载手机端软件:http://dcloud.io/hellomui/

    (2)下载Hbuilder,安装,打开。

    ————————下面是开发阶段了——————

    (3)新建,编写一个项目(html,js,css,图片等组成的)。

    (4)插上您的手机,连接到电脑,点击运行按钮(具体的方式参见教程),进行调试。

    (5)打包发布!

    咋样?就这么简单。这快感!!!啧啧。

            再来谈谈我对MUI的发展预测:

    一开始,MUI最为一个吊丝框架,肯定不敢大摇大摆的大谈行业规范,所以只能把自己的runtime打包到任何一个发布的应用中。所以如果一个用户的手机里装了多个Hbuilder开发的APP,那么会有多个重复的基本库。不过MUI框架是很小的,不用很担心。

    随着MUI的推广,样式的丰富,对Runtime和核心包作出了更大更复杂的要求,因此这个包应该会变大,从而推动了H5 + Runtime的平台化和固件化(软件固件),也许过几年,每个手机的操作系统都会自带这个运行环境,基于它开发的APP可能只有几百KB。

            至于MUI的钱途命运,要么自成一家,为各大手机商提供服务,索要服务费用,又或者被Apple,三星这样的巨头以重金收购。总之,这项技术是很好的,但是盈利模式和最终命运会和Java类似。

    希望MUI的同志再接再厉,做好后续的服务和工作。刚使用了下语音输入功能,好像有点小BUG。

     

        (本文纯属饭后闲话,勿对号入座,口水满屏) 

     

     

     

    展开全文
  • Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery课件及素材
  • iscroll5+html5+css3+js上/下拉刷新

    热门讨论 2014-04-24 17:56:13
    iscroll5+html5+css3+js上/下拉刷新
  • html5+css3+JS代码

    千次下载 热门讨论 2012-05-22 13:55:26
    《精通html5+css3+JavaScript页面设计》代码
  • HTML5+CSS3 精美登陆界面源码

    千次下载 热门讨论 2016-01-19 09:52:44
    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。
  • 精心整理的手册集合 包含html5+javascript+jQuery+php5+smarty完全中文手册+ThinkPHP快速入门手册 需要的可以下载
  • notepad++ html5+css3 插件

    2014-01-15 14:48:34
    notepad++ 支持html5+css3 的插件
  • mui、HTML5+、5+Runtime的关系说明

    千次阅读 2019-04-20 09:23:24
    mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。 有点类似于bootstrap、w3c和chrome os的关系。 HTML5+规范隶属于http://www.html5plus.org,定义了HTML5规范...

    mui、HTML5+、5+Runtime的关系说明

    mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。

    有点类似于bootstrap、w3c和chrome os的关系。

    HTML5+规范隶属于http://www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。

    DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。

    为了提升体验,mui势必会调用一些5+Rutime的增强能力,主要是plus.webview和plus.nativeUI。

    但mui不是要替代HTML5Plus,以后也无计划替代把所有5+的webview api都包一层。

    展开全文
  • mui开发app之html5+,5+Runtime,5+sdk,native.js

    千次阅读 2017-05-01 23:09:21
    说说几个名词html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它html5+:所谓“+”,扩充了html5原本没有的app功能对象,“中国html5+产业联盟”规范了html5+并且...

    说说几个名词

    html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它

    html5+:所谓“+”,扩充了html5原本没有的app功能对象,“中国html5+产业联盟”规范了html5+并且实现他们,html5+是对常用的原生API的js封装,包括相机,陀螺仪等31个常用API(android和ios通用),这些html5是没有的!

    native.js:native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。上面的html5+就是他的一个实现好的子集。native.js不是js框架,是技术!

    如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机App的原生世界。

    5+Runtime:native.js的运行时,相当于.net对C#,JRE对于JAVA,是一个运行环境,有把Native.js映射到java,oc代码的原生API功能,从而实现原生的调用。

    对于5+Runtime和native.js的关系可以理解成:native.js是一种语言(语法基于js),5+runtime是这语言的运行环境!

    html5+sdk:软件开发工具包,它和android sdk,ios sdk一样

    HTML5+ 的SDK,是把5+ runtime封装为原生SDK,它有3个用途。
    1. 使用HTML5+ SDK实现本地打包。
    2. 通过原生代码扩展HTML5+ runtime的功能。
    3. 在现有原生项目中使用HTML5+ SDK替换原有的webview,以获得更强的web增强表现。

    这里写图片描述

    然后:当我们使用dcloud的mui框架做应用开发的时候

    有这么几种情况!

    仅仅使用html5的语法:

    即浏览器级的html5+js+css,不需要打包成app,可以使用mui框架里的css样式和部分js,与开发传统的wap手机页面相同,相似的其他框架有诸如:jquery mobile,amazeui等等。

    这样开发只适合制作微信公众号,手机网页等等,并且只能在浏览器中使用应用,不过相比于html4已经强大不少。

    需要在mui.init()之后才能使用mui这个对象,调用其中部分的js方法,为什么说部分是因为。。。请往下看!

    使用html5+提供的plus对象

    mui中有个plus对象,他不是简单的使用html5的功能,而是提供了一个叫html5+的API集,并且将他们封装在了这个plus对象中,里面有陀螺仪,map,定位,相机,文件流等等的原生功能调用接口!

    plus这里面的对象就必须在mui.plusReady()之中使用,,而上面说浏览器级别的只能使用mui部分的js对象和方法就是这个原因!如果不是用html5+,你并不需要使用plusReady方法,只需要在用mui之前mui.init()一下就可以,这也是经常有人问的mui.init()和plusReady()的区别。

    mui.plusReady()是为“html5+”而生的,最终通过“html5+sdk”打包成了app级别才能使用,因为这plus对象里面的东西最终会被映射成为java(android sdk),objective-c(ios sdk)的代码,这也是native.js的技术咯!

    说太多也不好理解,这些底层的实现都已经由dcloud团队领导的“中国html5+产业联盟”(社区)实现了,我们只要知道我们写的plus对象的js代码都会被转化为原生代码,app就能实现很多原生功能的调用。

    注意:plus这些东西在浏览器级别是不支持的,所以不可以在普通浏览器中调用这个plusReady,以及plus.xxx.xxx方法等,浏览器用mui框架只是一部分可用的而已(刚刚说过了,再啰嗦一下)!

    要使用html5+就要求我们打包成app(使用html5+sdk),有5+Runtime,这样即可运行plus对象下的对象和方法,这个打包可以由hbuilder实现。(称之为:调试基座,html5+的功能要在调试基座中实现,即5+runtime)

    这些都是app级别的了

    html5+规范也不够用了

    完全有这种可能,毕竟html5+是规范性的,不能什么原生API都往里面塞对吧,他实现的是基本的,常用的一些原生API调用,比如相机,定位,陀螺仪,文件流等等等。。。
    (有31个,详细请看:http://www.html5plus.org/doc/h5p.html

    其实真正的原生语法有几十万个,提供API数不胜数,不可能一一调出来,html5+把几个常用的被规范化提出来而已。

    要使用其他的原生语法并映射成为js就要用到比html5+更厉害的native.js了

    native.js是对html5+的扩展(超集),是映射到原生代码的原理,交给原生代码去实现原生开发的功能,可以简单说成是把js代码转化为java代码了,当然java也不过是JVM虚拟机上跑的,最终还被转换了二进制,计算机编程实现就是这样一层一层往下丢的啦!

    注意:native.js不是一个js框架,和node.js命名一样,是一种技术实现,专门把js映射成底层代码,或者说是js在app开发上的一种实现!就像node把js带入了服务器和系统领域一样的道理。

    使用native.js需要对原生语法,api十分的了解,你至少要学过android或者ios开发,否则你只能copy别人代码也不知道为什么这么写!

    下面举个例子,就懂了为什么你不懂原生就不能搞native.js:

    function plusReady(){
        // 导入Native.js需要的原生对象
        Activity = plus.android.runtimeMainActivity();
        BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");
        StringBuffer = plus.android.importClass("java.lang.StringBuffer")
        Byte = plus.android.importClass("java.lang.Byte");
        CompressFormat = plus.android.importClass("android.graphics.Bitmap.CompressFormat");
        bBitmap = plus.android.importClass("android.graphics.Bitmap");
        ByteArrayOutputStream = plus.android.importClass("java.io.ByteArrayOutputStream");
        Base64 = plus.android.importClass("android.util.Base64");
        //viewClass = plus.android.importClass("android.view.View");
    
        document.getElementById("btGetCapture").disabled="";
    }

    看到没这是一个html5+没有的截屏功能,是通过native.js扩展实现的

    里面出现了大量的importClass,写过java就明白了,这不是java在导入包吗??

    是的,native.js就是实现了js导入java包,并且最终使用java的代码来实现功能

    总之
    1. native.js使得开发html5 app更加接近原生,因为他可以用原生一样的语法调用原生的对象(映射)
    2. 要懂原生开发才能自由定义或者使用已有的API功能实现
    3. 个人建议是能不用native.js则不用,多用已经实现的html5+(其实这些也是native.js实现了,不过被封装好了不用自己去import什么的)

    参考别人做好的native.js对原生功能实现:http://ask.dcloud.net.cn/article/114

    展开全文
  • CSS3+HTML5+从入门到精通

    热门讨论 2014-07-03 12:44:13
    CSS3+HTML5+从入门到精通 CSS3+HTML5+从入门到精通》-中文学习教程
  • 为弥补HTML5能力的不足,在W3C中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。 HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头

    前端开发APP,从HBuilder开始~

    通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。

     

    HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

     

    HBuilder 的手机原生能力调用分2 个层面:

     

    a) 跨手机平台的能力调用都在HTML5+ 规范里,比如二维码、语音输入,使用plus.barcode 和plus.speech。编写一次,可跨平台运行。

     

    b) JS Bridge是另一项创新技术,通过js 可以直接调ios 和android 的原生API,这部分就不再跨平台,比如调ios game center,或在android 手机桌面创建快捷方式。

    JSB 的用法是var obj = plus.android.import("android.content.Intent");将一个原生对象android.content.Intent 映射为js 对象obj,然后在js 里操作obj对象的方法属性就可以了。

     

    注:使用 HTML5+开发的移动App 并非mobileweb页面。这是新手最容易混淆的地方。mobileweb 的文件存放在web 服务器上,而移动App 的文件存放在手机本地,编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。

     

    当然这些移动 App 里某些页面也可以继续从服务器端以网页方式运行。所以mobile web,在HBuilder 里新建项目时,属于web 项目。不要放置到移动App 项目。mobile web 项目也不能真机联调和打包.

    内容简介

    介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~

    无所不能的js

    最开始js仅仅局限于网页上一些效果,操作网页内容等,但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。

     

    前端涉及app的两种方式

    适应移动端的网页

    大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,说的简单点就是对移动端做了适配,布局样式组件都适合移动端展示。

     

    缺陷:毕竟不是app,不管怎样也没办法取代app的便捷和功能强大。

     

    js+html+css+打包技术

    比较有名的就是phonegap了,国内的是hbuilder,大概的意思是html负责页面内容,js负责效果以及调用原生app方法,ui框架负责样式,最后打包成apk或者ipa

     

    hbuilder(http://www.dcloud.io/)

    不谈phonegap,不适用国内国情,是的,你没有看错,这是一个开发的ide,其实就是对eclipse进行了深度定制。

     

    特点是快捷键比较多,支持移动app开发(h5+方式)。

     

    h5+(http://www.html5plus.org/#home)

    可以说nodejs将js带到后端,h5+将js带到移动端。

     

    原理

    上面说过的原理,再次说一遍:

     

    html负责页面,也就是的内容和框架;

     

    js负责调用方法,也就是调用一些移动端原生;

     

    ui负责样式,比较有名的bootstrap,amazeui,jquery mobile,mui

     

    ui比较

    上面说的几个ui,做下简单比较,仅代表个人观点,

     

    Amazeui:功能和bootstrap重复,官方解释是对中文排版做了优化,个人觉得有点多余,bootstrap就很好。

     

    Bootstrap:适合移动端浏览网页适配,移动端浏览效果不错,但是还是网页。

     

    jquery mobile:专门对移动端做定制,看起来就像手机应用一样,js+css,国外的,不推荐,有坑。

     

    Mui:这个是推荐的,比较了jqmobile和mui,显然mui效果样式好点,估计也会有坑,但是支持国产吧。

     

    前端开发app

     

    搭建开发环境

    不需要搭建ios和android的开发环境,只需要下载hbuilder(估计需要java环境支持)。

     

    选定ui

    目前推荐mui,效果不错

     

    写事件

    通过js调用原生方法实现app效果

     

    写业务逻辑

    环境搭建

    前言

    本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios),

     

    感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结。

     

    HBuilder

     

    说明

    用h5+开发app的环境,也是ide,对eclipse做了深度定制,以前使用过eclipse或者myeclipse的童鞋可以直接上手。

     

    官网

    http://www.dcloud.io/

     

    下载

    在官网上点击下载,安装好后可以自己将文件夹压缩成zip,方便以后使用,解压就可以用。

     

    依赖

    估计会需要jre环境,没有试过,如果需要请自行百度搜索jre安装方法。

     

    上手

    打开HBuilder之后默认会有一个项目“HelloHBuilder”,里面有HBuilder使用的介绍。

     

    快捷键

    HBuilder一大亮点是快捷键,但是如果习惯了自己之前的快捷键会很别扭,需要自己在工具——选项——常规——快捷键中修改。

     

    插件

    HBuilder将插件做了下优化,提供了最长用的一些插件,并且使用dcloud网站下载,速度很快,eclipse自带插件安装需要翻墙。

     

    打开工具——插件安装,安装自己需要的插件,例如我安装了如下插件:

     

     

    完成

    环境搭建就完成了,这应该是所有开发环境搭建中最简单的了。

     

     

    原理介绍

    原理

    html5+开发app的原理大概是这样:

     

    html页面负责内容;

     

    ui负责页面样式;

     

    js负责调用原生app方法。

     

    html5

    html5这部分负责页面,也就是app中你看到的东西,大概的架构和内容

     

    ui

    ui负责页面样式,既然要做移动app,那做出的效果就得和移动端靠近,这里并没有局限于用哪种ui,比较常见的适配移动端的ui框架有:

     

    bootstrap

    介绍:Twitter开发的ui框架,特点是可以简介美观,可以适配移动端(例如本站:http://uikoo9.com/

     

    中文官网:http://v3.bootcss.com/

     

    amazeui

    介绍:国人模仿bootstrap做的一个ui框架,个人感觉有点多余,有兴趣的可以看看。

     

    官网:http://amazeui.org/

     

    jquery mobile

    介绍:HBuilder其实是模仿国外的phonegap,通用mui是模仿jquery mobile,但是感觉也不错

     

    官网:http://jquerymobile.com/

     

    mui

    介绍:和HBuilder相搭配的移动ui,也和nativejs相搭配,感觉还不错,模仿的ios7界面风格。

     

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

     

    framework7

    介绍:国外一块模仿ios7的ui框架,赞

     

    官网:http://www.idangero.us/framework7/

     

     

    nativejs

    介绍:一个可以调用android和ios原生方法的js

    入门:http://ask.dcloud.net.cn/article/88

     

    搭配

    选择:目前比较好的搭配是mui+nativejs+hbuilder,你也可以尝试其他的组合,例如jqmobile+nativejs等

     

    mui-demo:http://www.dcloud.io/hellomui/

     

    nativejs-demo:http://www.html5plus.org/#case#/case/id/4.html

     

    mui开发示例

    前言

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

     

    下面就开始一个简单的例子,以及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 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公用证书,如下:

     

    参数配置

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

     

     

    等待

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

     

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

    mui中几种open页面的区别

    使用hbuilder+mui做app一段时间,期间遇到问题不少,自己摸索,做了个app,详见:http://uikoo9.com/dishi/download

     

    如果您水平比这个高,那就不用看了,直接跳过。

     

    【水平】

     

    由于用hbuilder+mui出于兴趣,也就没有去看源码,停留在使用总结层次,所以有说的不对的地方还请见谅。

     

    【几种打开页面的方式】

     

    1.初始化时创建子页面

     

    2.直接打开新页面

     

    3.预加载页面

     

    【示例】

     

    1.初始化时创建子页面

     

    mui.init({  

        subpages: [{  

            url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址  

            id: your - subpage - id, //子页面标志  

            styles: {  

                top: subpage - top - position, //子页面顶部位置  

                bottom: subpage - bottom - position, //子页面底部位置  

                width: subpage - width, //子页面宽度,默认为100%  

                height: subpage - height, //子页面高度,默认为100%  

                ......  

            },  

            extras: {} //额外扩展参数  

        }]  

    });  

     

    2.直接打开新页面

     

    mui.openWindow({  

        url: new - page - url,  

        id: new - page - id,  

        styles: {  

            top: newpage - top - position, //新页面顶部位置  

            bottom: newage - bottom - position, //新页面底部位置  

            width: newpage - width, //新页面宽度,默认为100%  

            height: newpage - height, //新页面高度,默认为100%  

            ......  

        },  

        extras: {  

            ..... //自定义扩展参数,可以用来处理页面间传值  

        }  

        show: {  

            autoShow: true, //页面loaded事件发生后自动显示,默认为true  

            aniShow: animationType, //页面显示动画,默认为”slide-in-right“;  

            duration: animationTime //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;  

        },  

        waiting: {  

            autoShow: true, //自动显示等待框,默认为true  

            title: '正在加载...', //等待对话框上显示的提示内容  

            options: {  

                width: waiting - dialog - widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度  

                height: waiting - dialog - height, //等待框背景区域高度,默认根据内容自动计算合适高度  

                ......  

            }  

        }  

    })  

     

    3.预加载页面

     

    // 方式1  

    mui.init({  

        preloadPages: [{  

            url: prelaod - page - url,  

            id: preload - page - id,  

            styles: {}, //窗口参数  

            extras: {}, //自定义扩展参数  

            subpages: [{}, {}] //预加载页面的子页面  

        }]  

    });  

      

    // 方式2  

    var page = mui.preload({  

        url: new - page - url,  

        id: new - page - id, //默认使用当前页面的url作为id  

        styles: {}, //窗口参数  

        extras: {} //自定义扩展参数  

    });  

     

     

     

    【一些区别】

     

    1.子页面和非子页面

     

    以上三种方式中,2,3打开的页面非子页面,

     

    区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html

     

    2.子页面适用于侧滑菜单

     

    子页面有其特点,特别适用与index.html+list.html这种情况,

     

    如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随,

     

    而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑,还得单独处理新页面。

     

     

    3.子页面使用频繁切换的情况

     

    如果频繁左滑右滑,在配置较低的手机上会出现list.html遮住index.html的情况,采用子页面模式就不会,采用新页面模式几率很大。

     

    4.子页面适用与下拉刷新和上拉加载

     

    之前做向下拉刷新的时候,采用的是新页面的形式,按照官网教程,怎么搞都不成功,后来看了下源码,发现下拉刷新必须采用子页面的形式,也就是你的list.html必须是index.html的子页面,才可以下拉刷新。

     

    5.新页面适用于新页面

     

    open一个新页面,适用于查看详情之类的,需要打开一个新页面的情况,并且mui自己封装了新页面的back方法,你就不需要去操心了。

     

    6.预加载页面的两种方式

     

    第一种是在初始化的时候预加载,这种情况适合在你这个页面在很久之后才会用,如果你要立即到的页面并使用,那么你会得到null。第二种方式类似与open,个人感觉没有什么太大的区别,唯一的区别是open就直接打开了,preload只是加载,你可以之后选择打开的时机。

     

    7.总结

     

    需要下拉刷新上拉加载请使用子页面,需要打开一个新页面请使用新页面方式,需要加载一个页面但是暂时不使用请使用预加载方式。

     

    展开全文
  • HTML5+jQuery+Canvas调用手机拍照功能上传图片

    千次下载 热门讨论 2014-10-29 15:00:48
    HTML5+Canvas+jQuery调用手机拍照功能,本地压缩上传图片。以上都是测试通过了的。
  • TML5、CSS3和JavaScript技术是网页设计的精髓,《精通HTML5+CSS3+JavaScript网页设计》以应用实例和综合实战案例的形式逐一详解了HTML5网页设计的文档结构、文本、图像、用HTIdL5创建超链接、表格、使用表单;...
  • 基于HTML5+css+JS的精美登陆注册界面
  • HTML5+ API

    千次阅读 2019-05-21 19:52:49
    HTML5+ API:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getLaunchWebview
  • html5+学习

    千次阅读 2019-01-13 21:46:49
    1、HTML5+ 介绍 HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载...
  • HTML5+实战

    2018-08-21 17:55:38
    HTML5+ 介绍 HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载。...
  • HTML5+jQuery Mobile模板两套

    千次下载 热门讨论 2013-03-19 21:39:33
    HTML5+jQuery Mobile模板两套
  • HTML5+CSS3+JavaScript资源

    2019-09-29 23:41:54
    HTML5+CSS3+JavaScript资源 https://pan.baidu.com/s/1NH_FMhCNjkcW3yzDfhULsA JavaScript资源 https://pan.baidu.com/s/1gzCtK3Reg4v_QWIaxFBrFg CSS3+DIV网页样式与布局资源 ...
  • HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌PDF及源代码HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌PDF及源代码HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌PDF及源代码...
  • 测试之路-HTML5+CSS3实战

    千人学习 2018-07-05 16:13:55
    测试工程师技能之:HTML5+CSS3实战。由浅入深以项目实战的方式对各个知识点进行讲解剖析。
  • HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip
  • html5+css3视频教程(全227讲)

    热门讨论 2018-05-16 16:38:03
    html5+css3视频教程(全227讲html5+css3视频教程(全227讲)
  • 全网最全Html5+css+js基础总结 内含文件

    千次阅读 多人点赞 2019-01-15 13:45:46
    全网最全Html5+css+js基础总结HTML的基本使用css及JS基本使用文件放置在此,有需要的自己拿吧 学会这些,起码网页就算入门了,今后能飞多高就看你们的了! 大家可以去我的博客页面,下面我就把代码文件贴一下,代码...
  • html5+css3基础+高级视频教程

    千次阅读 2018-07-28 21:50:58
    html5+css3基础+高级视频教程   下载地址;百度网盘
  • HBuilder HTML5+ API帮助文档

    热门讨论 2014-08-26 11:22:16
    HBuilder HTML5+ API 帮助文档,根据HBuilder H5+官方示例代码中的API页面打包而成,方便查看。不然每次都要打开示例代码,点击相应的功能页面打开对应的帮助文档,太麻烦啦,这样看着方便
  • HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf
  • HTML4+CSS2与HTML5+CSS3区别

    千次阅读 2016-04-20 12:31:25
    HTML4+CSS2与HTML5+CSS3区别? 互联网发展越来越快,这估计是摩尔定律下的作用,有些东西总会要被取代;HTML4+CSS2将渐渐退出舞台,而HTML+CSS3将取而代之,这只是一个过程;那么提早的学习新的技术,是一个技术...
  • 美团APP html5+css+js 写城市列表,请高手指点 中央的提示框随页面上下滚动而变化。![图片说明](https://img-ask.csdn.net/upload/201508/03/1438579019_782123.png)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,794
精华内容 15,517
关键字:

html5+