内容简介

介绍目前前端人员开发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>
 <div data-role="page">
  <div data-role="header">
   <h1>首页</h1>
  </div>
  
  <div role="main" class="ui-content">
   <p>一些主体内容在这里。。</p>
   <form>
          <fieldset data-role="controlgroup">
           <label>
            <input type="radio" name="radio-choice-v-2" value="one" checked="checked">第一个
           </label>
           <label>
            <input type="radio" name="radio-choice-v-2" value="two">第二个
           </label>
           <label>
            <input type="radio" name="radio-choice-v-2" value="three">第三个
           </label>
       </fieldset>
   </form>
  </div>
  
  <div data-role="footer">
   <h4>uikoo9.com</h4>
  </div>
 </div>
</body>

调试

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

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

效果

打包

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

心动了吗？

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

前端开发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. 用U盘安装Ubuntu15.04

    用UltraISO刻录Ubuntu15.04到U盘安装,出现:Failed to load idlinux.c32错误,解决办法如下: source url: http://www.ubuntukyl ...

  2. mysql进阶(十二)常见错误汇总

    原因:外键名不能重复

  3. com.android.dex.DexException: Multiple dex files define（jar包重复引用） 错误解决

    前段时间开始转入Android studio,不料果真使用时候遇到些错误,在此记下! 出现这个错误往往是在libs目录下有个jar包,然后在gradle文件中又引用了,即: 共同引用了. 解决方法: ...

  4. Linux 套接字编程中的 5 个隐患（转）

    本文转自IBM博文Linux 套接字编程中的 5 个隐患. “在异构环境中开发可靠的网络应用程序”. Socket API 是网络应用程序开发中实际应用的标准 API.尽管该 API 简单,但是开发新 ...

  5. LIRe 源代码分析 4：建立索引（DocumentBuilder）[以颜色布局为例]

    ===================================================== LIRe源代码分析系列文章列表: LIRe 源代码分析 1:整体结构 LIRe 源代码分析 ...

  6. SpriteBuilder中如何简单的重置APP保存的数据

    在任意一款APP中,我们可能需要在磁盘上保存一些游戏数据,以便在下一次运行APP时恢复游戏数据. 但是由于在测试阶段,我们需要快速恢复初始状态的游戏数据,该如何做呢? 非常简单,只需要将APP从真机或 ...

  7. Github 错误合集：Failed connect to github.com:8080 || Failed connect to github.com:443; No error

    文/skay 地址:http://blog.csdn.net/sk719887916/article/details/40541199 开发中遇到github无法pull和push代码问题,原来git ...

  8. Linux - 设置Centos控制台模式的分辨率

    因为我的Centos是用VMware虚拟机安装的,所以这里和直接安装的Centos修改值不太一样. 修改文件: 注意是在启动的系统条目后面"quiet"字段的加上 vga=0x36 ...

  9. Linux - gcc 的简易用法 (编译、参数与链结)

    # 仅将原始码编译成为目标档,并不制作连结等功能: [root@www ~]# gcc -c hello.c # 会自动的产生 hello.o 这个文件,但是并不会产生 binary 运行档. # 在 ...

  10. PS 滤镜算法原理——碎片效果

    %%% Fragment %%% 对原图做四个方向的平移,然后对平移的结果取平均 %%% 碎片效果 clc; clear all; Image=imread('4.jpg'); Image=doubl ...