首页
学习
活动
专区
圈层
工具
发布

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

所以mobile web,在HBuilder 里新建项目时,属于web 项目。不要放置到移动App 项目。mobile web 项目也不能真机联调和打包....原理 上面说过的原理,再次说一遍: html负责页面,也就是的内容和框架; js负责调用方法,也就是调用一些移动端原生; ui负责样式,比较有名的bootstrap,amazeui,jquery mobile...jquery mobile:专门对移动端做定制,看起来就像手机应用一样,js+css,国外的,不推荐,有坑。..., 区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html 2.子页面适用于侧滑菜单 子页面有其特点,特别适用与index.html+list.html这种情况..., 如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随, 而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑

5.3K21

有了phonegap你还android吗?

会简单使用这些平台后,就可以安装PhoneGap的平台了,可以参考:http://www.phonegap.com/start 1.4 PHONEGAP的得力助手 开发PhoneGap的程序,jQuery...Mobile不是必备,但是有了jQuery Mobile,可以使你的程序美观很多。...jQuery Mobile其实是一堆的样式集和JAVA事件。比如写一个按钮,iOS和android的是不同的,用HTML做出来的往往很丑。...一般的处理方式是重新定义按钮的样式,使它变得更像手机平台上的按钮。jQuery Mobile为你提供了这一套框架,你可以通过很简单的属性设置就可以做出跟手机平台下车差不多的按钮,相当方便。...3.1.1 基于Web技术开发移动设备客户端应用 用您熟悉的JavaScript、HTML技术,或者结合移动Web UI框架jQuery Mobile、Sencha Touch 开发跨平台移动客户端。

1.6K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动端app开发,框架的选择。

    Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。...和Mac版,它还提供了很多个开发框架,比如Twitter bootstrap, jQuery Mobile 和 Topcoat....2.支持世界上最好的设备。Beta版兼容Android和iOS,Android上的开发人员还可以使用一些专为Android定制的主题。 3.增强的触摸事件。...PhoneGap PhoneGap 恐怕是最老的一个框架了,相信很多人都已经听说过甚至使用过它,但是PhoneGap是基于开源的 Cordova 商业版本。...就在那一年,PhoneGap获了奖并开始支持Android平台,对人数不断增长的移动开发人员变得越来越有用,这些人员需要在更多的平台上获得代码支持。

    4.6K10

    HTML5移动开发的10大移动APP开发框架

    Titanium框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架   1.jquery mobile框架   jQuery Mobile...jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。   ...Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。   ...(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...• 侧滑导航   mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。

    8.2K10

    用于H5的移动开发框架

    框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架 1 jquery mobile框架   jQuery Mobile是jQuery 在手机上和平板设备上的版本...jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。...(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...• 侧滑导航   mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。

    6.5K40

    用于H5的移动开发框架

    Titanium框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架 1 jquery mobile框架   jQuery Mobile是jQuery...jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。...(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...• 侧滑导航   mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。

    6.2K10

    那些年我们一起用过的Hybrid App

    了解过在Android机器上面的Web开发就知道这个痛了。比如前些年在Android设备上面写圆角,border-radius:10px,在Android的设备上面会出现毛边。...Jquery Mobile 如果你暂时还没有一个设计师,但是又急于构造一个应用出来。jquery mobile就提供了多套不同风格的模板,供你使用,而且还含有不同的交互动画等。而且也是跨平台的。...下面就用一句话来说说整个应用的运作过程吧: 打开PhoneGap应用 ->进入 index.html ->运行require.js ->加载应用资源 -> app.js 控制整个应用 -> angular.js...根据需求,选择工具 如果你使用过Jquery Mobile,你做过过场动画(就是从一个view去到另一个view),过场动画在iOS的navigationController中很常见,而且很简单,效果很好很流畅...在Jquery Mobile中使用ajax,css去实现了,核心代码可能就几十行。可能跟iOS里面的差不多(如果包含动画),但是实际出来的效果却差强人意。

    1.5K80

    sencha touch结合phonegap开发android下的文件浏览器

    大家好,今天我给大家介绍一下通过两个新的html5技术sencha touch 和phonegap来开发android应用。...首先,众所周知,sencha touch是结合了extjs和jquery mobile这两个javascript神器而开发的一个js库,其诞生的目的就是为了使webapp成为nativeapp,甚至使其更像...文件,所以这里有一个我自己写的pdf插件,这也是phonegap强大之处,因为如果你在开发时觉得js和phonegap的功能不能满足自己应用时,可以开发出自己的phonegap插件,而关于如何制作插件,...根据phonegap官网的开始指导,我们首先要把phonegap的库加载,phonegap的库包括js和jar,可以到以下地址下载:phonegap与sencha touch的js库,phonegap1.8...phonegap库准备,然后我们请求android的文件系统,requestFileSystem,第一个参数为sdcard的根目录,第三个参数是成功请求的回调函数,该函数的参数是phonegap里面的FileSystem

    1.2K50

    客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析

    HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台 2011年10月4日Adobe公司收购了PhoneGap和PhoneGap Build的新创公司Nitobi Software...Mobile OS就是具体的手机操作系统层 Cordova预先帮我们预先封装了各种mobile os上最常用的本地api调用,然后以统一的JavaScript api形式提供给webapp开发者调用。...这个loadUrl实际上就是加载webapp的启动页(默认是index.html)。 IOS具体参看《Cordova 工作原理(IOS篇)》,这里关于原理这是简介。...Xamarin Xamarin ['zæmərɪn]是一个开放源代码平台,用于通过 .NET 构建适用于 iOS、Android 和 Windows 的新式高性能应用程序。...Xamarin最为关键的技术Xamarin.Forms,把IOS、android、UWP等平台的GUI进行了一统地抽象,开发者只需要写一套代码,编译器会在编译时将界面映射到原先控件上,从而获得原生平台的外观和性能

    15.7K30

    Hybrid App开发 四大主流平台「建议收藏」

    PhoneGap(Cordova) 产品功能: PhoneGap是一款国外的开源移动开发平台。...目前已经将核心代码贡献给Apache cordova,最新版本是2.6.0, 它是基于HTML,CSS和JavaScript的,可以使用一些开源的框架比如jQuery Mobile,Dojo Mobile...暂时只支持iOS,Android两大平台,不知道什么时候推出Windows Phone 8? 4. 许多功能需要企业版才能实现,不过是收费的。...跟PhoneGap 同样,国外框架,技术支持困难。 3. 支持Android,iOS,黑莓平台。 4. 环境需要用户自己搭建比较复杂。...目前已经有很多移动开发公司把PhoneGap进行了封装,提供打包、快速模板等开发环境。但是由于PhoneGap本身的局限性,如果要做长 期的商业项目还有很长的路要走。

    2.9K10

    phonegap入门实战

    优缺点 PnoneGap的优点 1.跨平台   PhoneGap目前支持的移动平台有: Android, iOS, Windows Phone、 Windows 8、 Firefox OS、 Amazon...plugin add cordova-plugin-network-information 3.PhoneGap生成android项目,我们可用以下命令: phonegap build android...ps:本文中所讲的内容都是基于android平台。 项目   我们就带大家来感受一下创建一个自己的phonegap程序,实现功能很简单就是点击返回按钮时,弹出“hello world”。...4.插件添加完成以后,就可以在创建的目录中,进入www目录下,然后对index.html进行编辑,在这里面实现点击返回按钮时,弹出“hello world”,保存文件。...系统事件由系统激发,如时间每隔24小时,银行储户的存款日期增加一天。用户事件由用户激发,如用户点击按钮,在文本框中显示特定的文本。事件驱动控件执行某项功能。

    1.9K20

    目前主流的app开发方式

    今天就简单总结一下目前的三大主流移动应用开发类型。 APP,一般认为是 mobile application,也就是移动移动应用程序。...目前流行的四种跨平台app打包方式 发展历程: 在国外,最大的是Cordova(PhoneGap,2011年广泛流行),在2012年12月开源。...其前身是PhoneGap,由Nitobi开发,2011年10月,Adobe收够了Nitobi,并且PhoneGap项目也被贡献给Apache软件基金会。...同时,其在使用jQuery Mobile、Sencha Touch等前端框架的时候,有特效启动慢、页面切换慢、数据请求慢的特点。...MUI是一款不错的前端框架,性能比 jQuery Mobile、Bootstrap好很多,主要区别: 设计思路不同,MUI坚持用原生JS做,不依赖jQuery或者Angularjs。

    1.6K20

    互联网时代,如何成为优秀的web前端开发者?

    步骤1 打好基础,关注前沿 HTML5与CSS3 优秀的前端开发者,除了必须掌握传统的HTML、div+css布局,还要熟悉最新的HTML5以及CSS3 2、PS基础不可缺 photoshop...cs6 优秀的前端开发者需要懂一些PS的知识,至少会使用PS进行切图。...3、掌握各种库和框架 JQuery 熟练掌握Javascript、JQuery、JQuery UI、JQuery mobile等Javascript库和前端框架。...6、最好会搭建Android、iOS等开发环境,进行混合开发 android studio 目前的移动前端开发,混合模式盛行,不仅要精通HTML5开发技术,还需要熟悉原生开发的流程以及环境搭建等知识。...phonegap Xcode7 7、最好熟悉一门服务器端语言Java或是PHP Java Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念

    75080

    《Learning Scrapy》(中文版)第4章 从Scrapy到移动应用选择移动应用框架创建数据库和集合用Scrapy导入数据创建移动应用创建数据库接入服务将数据映射到用户界面映射数据字段和用户组

    跨平台开发移动应用的框架很多,例如PhoneGap、Appcelerator和Appcelerator云服务、jQuery Mobile和Sencha Touch。...本章会使用Appery.io,因为它可以让我们用PhoneGap和jQuery Mobile快速开发iOS、Android、Windows Phone、HTML5移动应用。...我们会使用它的在线工具,你可以随时下载app作为PhoneGap项目,使用PhoneGap的全部特性。 使用Appery.io,你需要连接网络。...映射数据字段和用户组件 前面列表中的数字可能在你的例子中是不同的,但是因为每种组件的类型都是唯一的,所以连线出错的可能性很小。通过映射,我们告诉Appery.io当数据库查询成功时载入数据。...下面是最后一步,就是加载UI时调用服务取回数据。我们打开startScreen作为组件,事件的默认选项是Load。

    1.2K50

    phonegap + Framework7 之 ios 推送跳转测试

    先说说项目情况:使用phonegap创建的ios项目,然后在使用html + css开发网页中又使用了一个框架Framework7(Framework7是一个构建仿原生ios和android应用的框架...所以开始的思路是先把参数传到index.html页面,然后再根据参数从index.html跳转到其他页面上。...如果UIWebView加载的网页是远程页面(比如:http://xindongai.com/mobile/index.html)而不是本app里面的网页(www/index.html),那么一切好说,直接把参数拼到远程页面后面...,然后加载远程index.html后,执行js脚本,跳到对应目标页面上。...我想应该是UIWebView加载idnex.html页面后,还把”try{pushSkip('%@');}catch(e){}“代码添加到index.html页面上了,导致一直死循环一直执行。

    1.2K30
    领券