前端开发APP，从HBuilder开始~
内容简介
介绍目前前端人员开发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
搭建开发环境
不需要搭建iOS和Android的开发环境，只需要下载hbuilder（估计需要Java环境支持），
选定ui
目前推荐mui，效果不错
写事件
通过js调用原生方法实现app效果
写业务逻辑
如题
代码和图片（简单示例）
文字说再多感觉也不是很大，下面来代码和图片，
文件结构：
你没有看错，仅仅需要一个html页面，加一些js，css，这个例子使用的jquery mobile
页面代码：
head部分，仅仅引入一些必须的js和css
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <title>hello world</title>
- <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
- <script src="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
- <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
- <script type="text/javascript">
- function helloworld(){
- alert("hello world!")
- }
- document.addEventListener('plusready', function(){
- alert("welcome to Html5plus!");
- });
- </script>
- </head>
body部分，普通的页面
调试
手机连接电脑，然后在hbuilder下运行——手机运行——在设备上运行，
就直接可以在手机上看效果了
效果
打包
在hbuilder中发型——app打包，然后交给云端去打包，打包好后会自动下载，例如
心动了吗？
现在，如果你会html+js+css，那你只需要一个hbuilder就可以开发app了，通吃android和ios
原文链接：http://blog.csdn.net/uikoo9/article/details/43451377
前端开发APP，从HBuilder开始~的更多相关文章
- 前端开发APP，从HBuilder开始~ 【转】
内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了 ...
- 前端开发app
1.如果是 Angular 那就选 Ionic (一对好 CP) 2.如果是 Vue 那就选 Vux (基于 WeUI)3.如果是 jQuery 那就选 Framework7 (iOS 和 Andro ...
- 在做APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
- APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
- Web程序员开发App系列 - 认识HBuilder
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- HBuilder开发App Step1——环境搭建，HelloMUI 以及真机调试
No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
- HBuilder开发App教程06-首页
实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建 ...
- 优秀前端开发教程：超炫的 Mobile App 3D 演示
今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...
- HBuilder开发App教程04-最难搞定的是mui
前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开 ...
随机推荐
- Java基础笔记（十）—— 数组
数组是具有相同类型的数据的集合,是一种引用数据类型,一般具有固定的长度,并且在内存中占据连续的空间. 数组声明:数据类型[ ] 数组名; 数据类型 数组名[ ]; 如:int[ ...
- 论js里面的for循环
首先搞懂执行的顺序: 对,执行顺序就是这样的. for循环的作用: 1.在编写代码时,你常常希望反复执行同一段代码. 2.遍历数组,可以用forEach();对于DOM对象(nodelist)的话,比 ...
- 基于SSL加密的vsftpd 服务器搭建和配置
基于SSL加密的VSFTPD 服务器搭建和配置 1.安装 ubuntu系统:apt-get install vsftp lftp centos系统:yum install -y vsftpd ftp ...
- Sorted Subsegments
https://www.hackerrank.com/contests/101hack38/challenges/sorted-subsegments/problem 首先要注意到可以二分答案,比如当 ...
- Unity UGUI暂停按钮切换图片代码
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
- Http报文长度的计算
客户机与服务器需要某种方式来标示一个报文在哪里结束和在下一个报文在哪里开始. 一般使用Content-Length表示body报文体的长度,这样往后截取即可获得整个报文.对于普通的页面.图片皆可使用. ...
- js中快速的访问某个url
在做项目中经常会遇到这样的需求,自动向后台发送统计日志,也不需要关心返回值,当然了方法有很多,其中一个方法就是使用Ajax. 在这里我要介绍的方法的原理是使用图片,给这个图片符url,这样就会自动的触 ...
- 深入理解jvm jdk1,7（1）
java 虚拟机管理的内存模型包含以下几个运行时数据区域: 程序计数器: 程序计数器是一块较小的内存空间,它可以看成当前线程执行的字节码的行号指示器.在虚拟机的概念模型里(仅是概念模型,各种虚拟机可能 ...
- C++中构造函数的写法
class Circle { public: Circle(float r); private: float radius; }; Circle::Circle(float r) { radius = ...
- [Unity3D] 如何识别屏幕边缘
出现的问题 Unity3D中长度单位是米 使用Screen.resolutions获取的屏幕信息单位是像素 也就是说,即使获取了屏幕相关信息及参数,也无法把信息转换成可在editor中使用的信息.当时 ...