前端开发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

  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

使用Hbuild打包APP的更多相关文章

  1. vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题

    vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外 ...

  2. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  3. python （3）：wxPython打包app，报错

    1,打包app报错 如图: 使用py2app,mac下打包成app.异常.程序直接退出. 没有详细的错误信息,client程序直接崩溃了. 2.原因 代码没有几行: #!/usr/bin/python ...

  4. 2017最新xcode打包APP详细图文

    网上的xcode打包ipa教程大多太旧而且又不完整,所以整理了一个最新的完整详细的xcode打包APP的图文教程分享给小白到大神路上前进的你我. xcode打包IPA包之前先申请iOS证书,然后导入证 ...

  5. vue打包app嵌入h5，区分app进入和android，ios显示不同的下载链接

    vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...

  6. vue 用huilder打包APP时，安卓按返回键就退出App改为按两次再退出App

    做vue项目时,用Hbuilder打包APP,在安卓下按返回键就是退出了APP,百度了下.都是使用到MUI来解决的,自己也记录下. 在main.js里面引入mui.js并使用. import mui ...

  7. 企业版证书打包APP发布，安装后闪退问题解决。

    企业版证书打包APP发布,安装后闪退问题解决. 我现在就碰到这个问题,只要项目与Swift沾上边的,都会出问题. 如果我们是直接使用开发者证书进行真机调试,那么就不会出现问题,像往常一样好.但如果我们 ...

  8. 使用 Cordova 打包 app

    1.安装nodejs 2.安装 cordova npm install -g cordova 3.Cordova 打包成安卓APK需要用到ANT打包工具,首先配置好java环境: 下载安装Java J ...

  9. ionic打包app——以安卓版本为例 辛苦之路~~~

    最近同事做了个angular项目,因为要离职,所以项目我就来接手了,用ionic打包app,然后无数配置的坑就等着我了~~~ 环境安装 1.nodejs 因为自己刚接触做angular项目,就更新到了 ...

随机推荐

  1. LeetCode 887.鸡蛋掉落（C++）

    每个蛋的功能都是一样的,如果一个蛋碎了,你就不能再把它掉下去. 你知道存在楼层 F ,满足 0 <= F <= N 任何从高于 F 的楼层落下的鸡蛋都会碎,从 F 楼层或比它低的楼层落下的 ...

  2. 最新版本dede与discuz通过ucenter完美整合

    人合租虚拟主机.然后到相关的官方网站上面下载相关的程序,我下载的是DedeCmsV5.7-GBK+Discuz_X2_RC_SC_GBK+UCenter_1.6.0_SC_GBK这个程序组合.涉及到怎 ...

  3. 虚拟机复制操作CentOS6导致eth0转为eth0以至于网络服务启动失败的解决方案

    CentOS6复制到虚拟机中eth0转为了eth1 原因: CentOS6硬盘上的信息保存着操作系统的信息, 将该硬盘上的信息拷贝到另一开新的硬盘上时, 硬件的环境就会一定会发生变化, 就那网卡来首, ...

  4. 保护REST API/Web服务的最佳实践

    在设计REST API或服务时,是否存在处理安全性(身份验证,授权,身份管理)的最佳实践? 在构建SOAP API时,您可以使用WS-Security作为指导,有关该主题的文献很多.我发现了有关保护R ...

  5. REST API 自动化测试 利器Rest Assured（API接口自动化测试框架体系）

    现在,越来越多的 Web 应用转向了 RESTful 的架构,很多产品和应用暴露给用户的往往就是一组 REST API,这样有一个好处,用户可以根据需要,调用不同的 API,整合出自己的应用出来.从这 ...

  6. intellijidea课程 intellijidea神器使用技巧 6-1 Spring的关联

    待学完spring之后再来看 Spring的关联位置:菜单->File->Project Structure->Facets功能:帮助管理Spring容器.还提供了很多其他的管理,比 ...

  7. Python常用模块(二)

    一.json与pickle json与pickle模块是为了完成数据的序列化. 序列化是指把对象(变量)从内存中变成可存储或传输的过程,在Python中叫picking,在其他语言中也由其他的叫法,但 ...

  8. 【工作中学习2】Map的使用及排序（第三个参数）

    项目进行中,使用到Map(std::map),Map要点整理如下: 1. Map,也叫关联数组,提供key/value(键/值对),key用来索引,value是被存储和检索的数据. 2. key值唯一 ...

  9. django orm 多对多自定义第三张表

    # -*- coding: utf-8 -*-# Generated by Django 1.11.11 on 2018-09-02 08:07from __future__ import unico ...

  10. Java—运算符和流程控制语句

    运算符优先级: siwtch语句注意事项: switch 后面小括号中表达式的值必须是整型或字符型 case 后面的值可以是常量数值,如 1.2:也可以是一个常量表达式,如 2+2 :但不能是变量或带 ...