精华内容
下载资源
问答
  • webapp开发框架选择需要注意: 第一步:开发支持的语言类型 根据前端开发人员的能力,来选择webapp开发框架。 例如:前端人员只会写react 就要求webapp开发框架支持react。 第二步:查看webapp开发框架文档是否...

    webapp开发框架选择需要注意:

    第一步:开发支持的语言类型

    根据前端开发人员的能力,来选择webapp开发框架。

    例如:前端人员只会写react 就要求webapp开发框架支持react。

    第二步:查看webapp开发框架文档是否齐全

    例如:功能性API的详细使用文档和示例等

    插件功能

    示例代码

    第三步:确认webapp开发框架能否满足项目需求

    确认APP的功能是否都能满足,开发难易程度

    开发的APP复杂度、功能是否能满足,交互比较多,业务逻辑比较复杂,找到对应功能点,提前确认。

    例如:开发身份证识别功能,查看webapp开发框架API能否支持


    第四步:确认webapp开发框架调试功能是否完善

    1.调试工具

    2.调试功能使用文档和使用示例

    3.调试工具的使用难易程度

    例如:需要调试页面查看“获取app相关信息”接口的返回数据

    调试工具文档

    页面调试

    调试结果

    第五步:确认webapp开发框架测试完成是否可以打包发布

    测试完成的APP是否有完整的打包流程,上架流程

    例如:测试完成的webapp需要打包

    应用打包

    打包完成

    下载安装包(.apk和.ipa)直接上传应用市场,就可以了。

    展开全文
  • webapp开发框架

    万次阅读 2017-11-13 14:29:53
    介绍几个移动web app开发框架     jQuery Mobile  jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery ...

       快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业APP开发企业,和APP服务提供商。 安卓和IOS的操作方式,开发模式,界面UI显示方面的差别,也使得原生APP的不同版本体验有很大的区别,光是做兼容性调测,都要花费开发企业不少的时间。
    
       近年来,另一种应用形态——基于HTML5技术的Web App也如雨后春笋般出现,于是关于原生APP与HTML5 APP 谁将成为未来的王者,APP开发者们一直争论不休。
    
    html5最主要的优势: 
    1、一套HTML5 APP 即可同时适用安卓及IOS平台,甚至WP平台,适配性和统一体验较好。
      2、版本服务器端更新,用户永远看到的都是最新的APP端信息。
      3、手机客户端及存储数据较少,节约用户手机空间
      4、技术难度较低,开发工作量小,开发成本低。
     **局限性:**
     用户体验大幅落后于原生APP,操作的流畅度,程序的执行效率,与原生APP都有较大差距;HTML5 APP 受网速的影响较大,在网络情况较差的情况下,HTML5 APP 往往连打开都困难,而原生程序,基本都能顺利打开运行(只是速度较慢)。
    
     因公司项目需求,近端时间研究html5 app开发框架,发现有很多,查资料总结下。
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    介绍那些app适合html5开发:http://www.educity.cn/wenda/11971.html

    1.框架:PhoneGap 
    官网:http://phonegap.com/ 
    简介: PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用。 
    优点:1.可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器,或者说中间件。 
    2.提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知(警告、声音和振动)、存储。 
    3.可利用成熟javascript框架。如:Ext js、jQuery。 
    缺点:1.性能差。运行速度慢,UI反应延时——这是个致命伤。(高端机影响不大) 
    2.不能完全跨平台。不同平台代码需要微调。 
    3.内存消耗大。 
    4.调试难度大。

    2.框架:Ionic 
    官网:http://ionicframework.com/ 
    简介: Ionic 是一个强大的 HTML5 应用程序开发框架,号称 Advanced HTML5 Hybrid Mobile AppFramework 是 AngularJS 移动端解决方案 可以帮助您使用 Web 技术,比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。 
    优点:1.追求性能 运行速度快 
    2.轻量级框架 
    3.基于 Angularjs,支持 Angularjs的特性, MVC ,代码易维护 
    4.通过 SASS 构建应用程序。它提供了很多 UI 组件来帮助开发者开发强大的应用。 
    5.接近原生。 
    6.强大的命令行工具 
    3.可利用成熟javascript框架。如:Ext js、jQuery。 
    缺点:1.Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用 
    2.需要结合插件使用。

    3.框架:Hbuilder(国产) 
    官网:http://dcloud.io/ 
    简介: HBuilder是DCloud推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率。 
    优点:1、HTML5语法、HTML5+语法、三大浏览器扩展语法,尽收HBuilder中。 
    2、每个浏览器发布新版后,一周内,其新增语法就收录入HBuilder。 
    3、强大到令你震惊的Jquery语法提示! 
    4、每个语法在哪个浏览器、哪个版本上是否可运行,这里都有。 
    5、没有比这里更全的语法库,也没有比这里更全的浏览器兼容性数据库。 
    缺点:1.云端编译,无法保证安全性。 
    2.不能完全跨平台。不同平台代码需要微调。

    4.框架:appcan(国产) 
    官网:http://www.appcan.cn/ 
    简介:AppCan是国内Hybrid App混合模式开发的倡导者,AppCan应用引擎支持Hybrid App的开发和运行。并且着重解决了基于HTML5的移动应用”不流畅”和”体验差”的问题。使用AppCan应用引擎提供的Native交互能力,可以让HTML5开发的移动应用基本接近Native App的体验。 
    与Phonegap支持单一webview使用div为单位开发移动应用不同。AppCan支持多窗口机制,让开发者可以像最传统的网页开发一样,通过页面链接的方式灵活的开发移动应用。基于这种机制,开发者可以开发出大型的移动应用,而不是只能开发简易类型的移动应用。 
    AppCan提供强大的设备调用能力,电话、短信、相机、LBS、传感器、数据库等常用的手机功能,开发者可以通过JS接口调用,轻松构建移动应用。 
    优点:1.跨平台:同时支持iOS、Android、Symbian、Windows Phone 
    2.原生体验:引入原生UI控件与交互支持(如Action Sheet等) 
    3.开发工具:基于Eclipse的开发工具,集成UI控件与应用管理 
    4.UI框架:提供强大的UI框架,更加易于实现页面布局与交互 
    5.设备API:支持各种手机设备调用,如电话、相机、传感器、定位等 
    6.本地打包:无需配置环境,无需编译,本地一键打包 
    7.插件机制:支持第三方原生插件,支持JS插件 
    8.代码加密:基于密钥的加密方式,无法破解,像混编一样保护html代码 
    统计分析:应用分平台安装数统计,应用启动和使用情况统计 
    9.开放平台:更具本土优势,已经对接Sina、QQ、百度等开放平台 
    10.技术支持:技术支持及时响应,重视开发者建议和反馈 
    缺点:1.AppCan免费版因需要把源代码上传到厂商的服务器上打包,对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决,但企业版稳定尚待观察。 
    2.AppCan采用封装的组件,依赖性比较高。不是开源代码。 
    3.AppCan 不能很好的解决原生代码的功能。

    5.框架:Wex5(国产) 
    官网:http://wex5.com/ 
    简介:WeX5应用快速开发框架(含完整的SDK API及全部源码),一次开发、跨端运行。 
    【定位】开发面向消费者和公众的开放应用系统 
    【适用】一般app、电商app、客服app、会员app、微店微商等 
    【前端】安卓app/苹果app/微信服务号/PC web app 
    【后端】后端数据处理组件,对接各主流技术平台 
    【费用】完全开源,彻底免费,无任何限制 
    优点:1.高效精致的UI组件体系,基于jquery和bootstrap技术,采用增强的RequireJS模块化技术。 
    2.基于phonegap(cordova)框架,如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。 
    3.可视化拖拽式集成开发环境IDE,全能力的调试支持和智能代码提示 
    缺点:1.使用范围有限:适用:一般app、电商app、客服app、会员app、微店微商等 
    2.用户量小,存在不稳定因素。

    6.框架:ApiCloud(国产) 
    官网:http://www.apicloud.com/ 
    简介:APICloud是中国领先的“云端一体”的移动应用云服务提供商。APICloud推行“云端一体”的理念,重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。 
    APICloud致力成为中国领先的移动垂直领域云服务商,帮助传统软件公司从B/S架构成功走向APP,帮助中国数百万web开发者转化成移动APP专家!。 
    优点:1.提供开发的IDE。 
    2.提供数据云API、统计云API、推送云API 
    缺点:与Hbuilder存在版权问题,抄袭Hbuilder

    7、JQuery Mobile 
    1.官方网站:http://jquerymobile.com/ 
    2.性质:UI框架 
    3.说明:这个大名鼎鼎的JQuery的移动版本。跟JQuery一样是一个轻量级的JS库,一样使用HTML5+CSS+JS的技术。应为轻量级,所以在web加载时比Sencha有一点优势。缺点显而易见,UI控件太少了。因为JQuery Mobile 太普及了,也有很多第三方的扩展控件库例如JQuery Mobile Touch。比较有意思的是Sencha Touch 也融合了JQuery Mobile Touch。 
    4.授权:完全开源,放心使用


    14年之前用过一段时间,全是html5+js的,过了2年了,出现了一些比较好的原生效果的开发框架:react native 和fuse

    不同的开发框架有不同的优缺点,使用哪个还需要根据需求针对性的选用

    展开全文
  • 感觉现在开发网页比写安卓应用简单多了,至少对我是这样,我安卓跟没学一样,于是在某次需求中需要写个简单的APP,我就想能不能弄成网页的,网页做出手机版,用手机访问不就是app了吗?...介绍实用Hbuilder打包成安...

           感觉现在开发网页比写安卓应用简单多了,至少对我是这样,我安卓跟没学一样,于是在某次需求中需要写个简单的APP,我就想能不能弄成网页的,网页做出手机版,用手机访问不就是app了吗?于是去网上找了下资源,发现Hbuilder 还真可以这样做,它自动可以生成一套关于App的配置文件,你改了url让他默认访问到你网站的主页即可,一切如此美好。

    本文提纲:

    介绍实用Hbuilder打包成安卓app的详细过程。

    详细内容:

    1.首先你得有Hbuilder软件,可以去官网下载,地址

    2.安装后如果先要打包app,是需要注册一个账号的;

    3.创建一个项目,新建移动APP项目,这里介绍两种选择的结果,

    一种是选择空模板(如果只是想为自己的网页封装成app,推荐这个);

    一种是选择hello H5+模板(自带的模板跑起来效果很好,介绍了可以实现的所有功能,想系统的学的可以看看)。

    3.1 如果选择hello H5+, 他会默认帮你生成一个模板,当然如果实用他生成的模板,他里面会带很多东西,你可以跑下它玩玩,

    自动生成的文件是完善的,但是manifest.json可能会报错,因为你没有填写app的数据信息,在应用信息里面获取appid, 填入响应的sdk配置,其它没有的参数可以将选中的勾去掉,暂时不用那些权限。

    之后就可以发行了:

    一路默认即可完成,最后生成的apk在项目的unpackage目录下,发送到手机,安装测试即可。

    3.2 如果选择空模板,生成的项目框架,进行封装也很简单:

     但是需要修改index.html文件,添加内容的目的是保证,app运行后,直接打开我们的web主页,并且手机的返回键能起作用。

    将index.html中的js部分内容替换为下面内容:

    <script type="text/javascript">
    			document.addEventListener('plusready', function() {
    				var page = plus.webview.create("http://10.139.250.130:8080/MyWords/index", "main")
    				page.show();
    
    				ws = plus.webview.currentWebview();
    				// Android处理返回键
    				plus.key.addEventListener('backbutton', function() {
    					('iOS' == plus.os.name) ? plus.nativeUI.confirm('确认退出?', function(e) {
    						if(e.index > 0) {
    							plus.runtime.quit();
    						}
    					}, null, ['取消', '确定']): (confirm('确认退出?') && plus.runtime.quit());
    				}, false);
    			});
    		</script>

    如果你直接打包还会有问题,就是只在主页面时,手机的返回键有用,其他界面不行,所以需要在每个web页面添加一个js函数,我是直接写了一个js文件,名为:appreturn.js,然后引入到每个web页面(<script src="${pwd }/static/app/js/appreturn.js"></script>),appreturn.js中内容如下:

        document.addEventListener("plusready", function() { 
            // 注册返回按键事件 
            plus.key.addEventListener('backbutton', function() { 
                // 事件处理 
                window.history.back();
            }, false); 
        });

    4.提示,软件的名称启动图片、软件图标都可以在manifest.json文件中根据自己的需要设置。

     

    至此,应该可以将网站转为APP了吧,反正我认为写web比写安卓爽多了!!!

    下面给一个我打包的例子吧,如果有需要可以看看,里面就是我上面的写的两种模板的代码,基本就改了一点点index.html中js内容。下载地址(csdn默认积分,没积分可以下方留言留下邮箱地址)

    如果有什么问题,欢迎下面留言评论!

     

     

     

     

     

    展开全文
  • 目前的手机APP有三类:原生APP、WebAPP、HybridApp;HybridApp结合了前两类APP各自的优点,越来越流行。 Ionic Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合...

    目前的手机APP有三类:原生APP、WebAPP、HybridApp;HybridApp结合了前两类APP各自的优点,越来越流行。

     

    Ionic

    Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。

    Ionic宣称他们极度强调性能,并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

    Ionic同时它是基于 AngularJs的。

    AngularJs

    AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。

    Cordova

    Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能。

    Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台应用程序,其原名称之为PhoneGap,Adobe收购Nitobi公司后,PhoneGap商标保留,代码贡献给了Apache基金会,而Apache将其命名为ApacheCallback,其后发布新版本时,定名为ApacheCordova。

    Cordova是一个行动设备的API接口集,利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架,如jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码。

    注意到因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。

     

    本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。

    关于Android开发环境的搭建,以及Cordova的安装教程:http://www.cnblogs.com/webapi/p/5519468.html

    这一篇,我们来使用 AngularJS+Ionic+Cordova 快速地做出我们第一个HybridAPP,开始吧!

    开始步骤网站上有: http://ionicframework.com/getting-started/

    官网css组件: http://ionicframework.com/docs/components/#header

    1 安装Ionic和Cordova

    官网 http://ionicframework.com/

    国内 http://www.ionic.wang/

    命令行安装ionic

    $ npm install -g cordova ionic
    

    2 新建一个Ionic项目

    $ ionic start myApp tabs
    

    3 运行我们刚才创建的Ionic项目

    $ cd myApp
    $ ionic platform add android
    $ ionic build android
    $ ionic emulate android
    

    4 在浏览器预览并实时刷新

    $ ionic serve
    

    我们选择localhost,并把浏览器调成mobile模式;

    然后我们进入编辑器修改项目文件夹www中的代码,看到,浏览器已经可以跟着我们的保存实时刷新,非常好用!!!

    转载于:https://www.cnblogs.com/webapi/p/5669124.html

    展开全文
  • 最重要的需求就是能够随时调整APP的绝大部分内容,所以,打算使用webapp的方式开发。在这个大前提下,开始了前期技术选型的工作。 看了uni-app,wex5,AppCan,Apicloud,下面就对边看下这几个项目的优劣,帮助大家可以...
  • 为什么需要转战WebApp开发随着移动端设备越来越多, 微信应用号即将发布, 越来越多的页面需要被移动浏览器承载, HTML5开发大热, 我们需要掌握Web开发的技能来...合适的WebApp框架AndroidUI4Web是一个高性能的WebApp框架
  • 1.5 版本更新说明 BUI 1.5版本以后变化很大,统一新的风格,新的规范750,新增基于Dom的数据驱动,完善了单页路由页面的生命周期等等,在...后续我们还会整理一些实战类的教程,欢迎关注BUI Webapp专栏。 一...
  • cordova打包webapp

    2017-05-05 18:12:00
    cordova打包webapp 在项目开发中,需要将h5页面打包成app,这个时候我们可以使用cordova来打包。在官方文档中,我们可以了解到创建一个app十分简单,你的电脑上有nodejs就行,我们可以跟着官方文档一步一步来,添加...
  • 为什么需要转战WebApp开发随着...合适的WebApp框架AndroidUI4Web是一个高性能的WebApp框架, 在移动浏览器上有与原生App一致的体验.对Android开发者们来说, 更重要的是:框架移植自Android, 开发方式和API调用与A...
  • 本篇文章主要介绍了详解cordova打包webapp的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • hbuilder打包webApp入门课

    千人学习 2019-06-25 14:25:06
    讲解如何使用Hbuilder打包App的使用。
  • 我在之前呆过一家公司,他们前端封装了一套基于JQuery和bootstrap的单页面WebApp框架,虽然技术栈方面可能比较落后了,且是基于CSS,Html,JavaScript分层的。与现在的模块化开发有些不同。但是它的一些封装思想是...
  • 基于Vue2 搭建移动端 webapp 框架

    万次阅读 2018-02-23 18:36:11
    Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述。搭建框架步骤如下:安装Node.js搭建框架需要使用最新稳定版Node.js,请选择LTS版本。tip1:如果本机有其它项目需要早期版本,...
  • 一、安装Cordova 安装node.js 安装Android SDK 安装Xcode ... cordova platform ls cordova requirements 打包项目: cordova build android cordova build ios 二、BUI官方demo http://www.easybui.com/demo/#main
  • 这本身是属于第三方平台的事, 既然有开发者在问, 那我们针对这个问题, 也想对Webapp打包做个总结, 本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单. 最后会有不同平台的打包效果对比, 可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,968
精华内容 3,987
关键字:

webapp打包框架