内容简介

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

无所不能的js

最开始js仅仅局限于网页上一些效果,操作网页内容等,

但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,

native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。

前端涉及app的两种方式

适应移动端的网页

大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,

说的简单点就是对移动端做了适配,是的布局样式组件都适合移动端展示,

我的个人网站(uikoo9.com)就是使用bootstrap3做的,手机浏览效果也很好。

缺陷:毕竟不是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(300k),国外的,不推荐,有坑。

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

前端搞app

搭建开发环境

不需要搭建iOSAndroid的开发环境,只需要下载hbuilder(估计需要Java环境支持),

选定ui

目前推荐mui,效果不错

写事件

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

写业务逻辑

如题

代码和图片(简单示例)

文字说再多感觉也不是很大,下面来代码和图片,

文件结构:

你没有看错,仅仅需要一个html页面,加一些js,css,这个例子使用的jquery mobile

页面代码:

head部分,仅仅引入一些必须的js和css

  1. <head>
  2. <meta charset="utf-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  4. <title>hello world</title>
  5. <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
  6. <script src="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
  7. <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
  8. <script type="text/javascript">
  9. function helloworld(){
  10. alert("hello world!")
  11. }
  12. document.addEventListener('plusready', function(){
  13. alert("welcome to Html5plus!");
  14. });
  15. </script>
  16. </head>

body部分,普通的页面

调试

手机连接电脑,然后在hbuilder下运行——手机运行——在设备上运行,

就直接可以在手机上看效果了

效果

打包

在hbuilder中发型——app打包,然后交给云端去打包,打包好后会自动下载,例如

心动了吗?

现在,如果你会html+js+css,那你只需要一个hbuilder就可以开发app了,通吃android和ios

原文链接:http://blog.csdn.net/uikoo9/article/details/43451377

前端开发APP,从HBuilder开始~的更多相关文章

  1. 前端开发APP,从HBuilder开始~ 【转】

    内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了 ...

  2. 前端开发app

    1.如果是 Angular 那就选 Ionic (一对好 CP) 2.如果是 Vue 那就选 Vux (基于 WeUI)3.如果是 jQuery 那就选 Framework7 (iOS 和 Andro ...

  3. 在做APP前端开发时应注意的一些问题

    在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...

  4. APP前端开发时应注意的一些问题

    在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...

  5. Web程序员开发App系列 - 认识HBuilder

    Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...

  6. HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试

    No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...

  7. HBuilder开发App教程06-首页

    实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建 ...

  8. 优秀前端开发教程:超炫的 Mobile App 3D 演示

    今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...

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

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

随机推荐

  1. elasticsearch常用工具及使用

    1. 数据库工具:https://github.com/jprante/elasticsearch-jdbc 2.数据展示:https://github.com/mobz/elasticsearch- ...

  2. 关于MySQL AUDIT(审计)那点事

    2017年06月02日MySQL社区版本最新版为MySQL_5.7.18,但是该版本不带AUDIT功能(MySQL Enterprise Edition自带AUDIT功能),因此需要加载plugin( ...

  3. PHPExcel探索之旅---阶段一

    类似于Java,php也有操作Excel的方法,其中需要下载PHPExcel插件,将其中的Classes文件夹改名为PHPExcel并提取到根文件夹外面,将两个文件夹一起放在所需项目中 使用PHPEx ...

  4. PHP var_export

    var_export可以将一个数组转为一个字符串 不同于var_dump,var_export并不会输出数据的类型以及字符大小等,只会简单把数组的key跟value拼接成一个字符串 <?php ...

  5. Telerik RadPropertyGrid 设置显隐 Combox选择

    Telerik RadPropertyGrid 的排序按钮.搜索框和描述面板的显隐只要设置SortAndGroupButtons.SearchBox.DescriptionPanel的属性值改为Vis ...

  6. (转)linux自定义开机启动服务和chkconfig使用方法

    原文:https://www.cnblogs.com/jimeper/archive/2013/03/12/2955687.html linux自定义开机启动服务和chkconfig使用方法 1. 服 ...

  7. Storm概念学习系列之Topology拓扑

    不多说,直接上干货!   Hadoop 上运行的是 MapReduce 作业,而在 Storm 上运行的是拓扑 Topology,这两者之间是非常不同的.一个关键的区别是:一个MapReduce 作业 ...

  8. [PHP]php发布和调用Webservice接口的案例

    分两步走:1.服务端发布接口;2.客户端调用方法 1.服务端发布接口: 需要nusoap工具,下载地址:http://sourceforge.net/projects/nusoap/ 下载完和要发布接 ...

  9. (一)Redis简介和安装

    1       Redis介绍 1.1      什么是NoSql 为了解决高并发.高可扩展.高可用.大数据存储问题而产生的数据库解决方案,就是NoSql数据库. NoSQL,泛指非关系型的数据库,N ...

  10. Android入门:Activity生命周期

    一.Activity生命周期介绍 我们在学Java Web时会学到Servlet的生命周期,因此对生命周期的概念已经有一定了解,简单地说就是某个事物从出生到死亡的过程. Activity也存在声明周期 ...