HBuilder开发App教程

转载 2016年03月25日 14:26:00

1.png

奇妙的前端,奇妙的js

众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序,

随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟,

自从2008年国外推出phonegap后,前端人员又踏上开发app的路程,

今年来国内也对应推出了一些可以让前端人员开发app的ide,

不过大部分是收费的,强定制的,这里就不一一列举了。

这里推荐DCloud推出的HBuilder,一句话谁用谁知道。


一次开发两种app

通过HBuilder的云端打包技术(也可以放到本地),

你只需要写html+js+css即可开发出app,

并且是一次开发,即可生成android和ios两种对应app。


原理介绍-ui层

app中的ui对应html中的ui,你可以自行选择ui框架,

无论是bootstrap还是amazeui,还是jquery mobi(phonegap推荐ui),

还是HBuilder推荐的mui都可以,

这里建议使用HBuilder推荐的mui,

因为封装了一部分nativejs的东西,

而且HBuilder也封装了mui的快捷键,使用起来很方便。

总结一下,就是用html层次的ui框架来实现(模拟)app中的ui。

点这里下载官方mui-app:http://www.dcloud.io/hellomui/


原理介绍-nativejs

HBuilder开发app,不可避免的是调用android和ios中的原生方法,

大概原理如下:

[js] view plain copy
  1. qiao.ng.toast = function(msg){  
  2.     // for ios  
  3.     if(window.WebViewJavascriptBridge){  
  4.         WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);  
  5.     }else{  
  6.         document.addEventListener('WebViewJavascriptBridgeReady',function onBridgeReady(){  
  7.             WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);  
  8.         }, false);  
  9.     }  
  10.   
  11.     // for android  
  12.     if(typeof android != 'undefined'){  
  13.         android.showSystemToast(msg);  
  14.     }  
  15. };  

也就是封装了js调用android和ios的方法,

据HBuilder官网说法是封装了40w+的原生方法,

总结一下,就是js去调用android或iso中的原生方法。

点这里去下载官方nativejs-app:http://www.dcloud.io/helloh5/


DCloud,HBuilder,mui,nativejs,html5+的关系

DCloud

DCloud是一家公司

hbuilder

DCloud推出的可以开发app的前端IDE,是基于eclipse二次开发而来,

所以熟悉eclipse或者myeclipse的开发人员可以很快的上手。

类似IDE,有phonegap等等。

mui

DCloud推出的模拟原生app的ui框架,

类似框架有:bootstrap,amazeui,jquery mobi, framework7等

nativejs

广义上的nativejs是指可以调用android,ios原生方法的js,

这里专指DCloud退出的nativejs,官方称封装40w方法。

html5+

据说是w3c旗下的组织,目标是退出适合开发app的加强版html5,

相关参与的机构有很多,但是感觉主力还是DCloud


相关链接:

1.html5+:http://www.html5plus.org/

2.hbuilder:http://www.dcloud.io/

3.mui:http://dcloudio.github.io/mui/

4.nativejs:http://www.dcloud.io/docs/api/

5.bootstrap(国内):http://v3.bootcss.com/

6.amazeui:http://amazeui.org/

7.jquery mobi:http://jquerymobile.com/

8.framework7(类ios):https://github.com/nolimits4web/Framework7

9.material-ui(android):https://github.com/callemall/material-ui


更多教程:

HBuilder开发App教程:http://uikoo9.com/book/detail/3

更多学习笔记:http://uikoo9.com/book

前端开发APP,从HBuilder开始~

内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是node...
  • uikoo9
  • uikoo9
  • 2015年02月03日 16:23
  • 177920

介绍hbuilder开发打包app

无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃, native.js(以及其他js,稍...
  • mayadon
  • mayadon
  • 2016年07月12日 14:50
  • 11769

借助HBuilder快速开发APP入门

首先这次博客是真正的入门大部分都主要是概念讲解,后面可能会有一些自己的代码练习。然而为什么要用HBuilder来开发呢,这是首先要说明下的。 编码比其他工具快5倍够不够?对极客而言,追求快,没有止境!...
  • StevenTQP
  • StevenTQP
  • 2016年06月03日 22:33
  • 5382

HBuilder开发App教程12-详情页,删除和退出

接近尾声 本节讲讲详情页,删除和退出,然后基本接近尾声了,希望大家有所收获。 详情页 说明 点击待办事项,我跳转到详情页,可以看到事项的详情 detail.html ...
  • uikoo9
  • uikoo9
  • 2015年08月05日 21:59
  • 10042

HBuilder开发APP(二)——网络请求

mui框架中给我们封装好了常用的Ajax函数,是基于XMLHttpRequest,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型。         ...
  • chengxu_hou
  • chengxu_hou
  • 2017年06月03日 13:41
  • 1774

HBuilder webApp开发(八)微信/QQ/新浪登录

接着昨天的《HTML5 WebApp开发(七)微信/QQ/新浪分享》 继续写了一下第三方登录。 首先是去官方文档和Demo找,发现官方文档基本就是那些配置的说明,但是Demo就需要去github上...
  • zhuming3834
  • zhuming3834
  • 2016年06月19日 10:54
  • 9625

hbuilder开发移动app入门

  • 2016年01月11日 10:17
  • 1.54MB
  • 下载

HBuilder开发App教程01-推开前端开发App的大门

奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的...
  • uikoo9
  • uikoo9
  • 2015年07月01日 22:02
  • 8172

HBuilder webApp开发(一)新建项目

一 关于HBuild去DCloud官网下载最新的Hbuild.关于Hbuild的介绍可以去官网看看。二 新建移动App 打开HBuild新建移动App项目 文件–>新建–>移动App 勾选mui...
  • zhuming3834
  • zhuming3834
  • 2016年05月22日 21:46
  • 9052

MUI+H5plus+HBuilder开发app(android,ios)介绍

前言现在介绍一款只需要懂html+css+js就能开发app的框架,不需要懂原生语言,完全只需要前端web工程师就能独立开发出android和ios的应用,且一套代码搞定,效率很高。(其实更省事可以w...
  • rth362147773
  • rth362147773
  • 2017年08月12日 21:01
  • 3202
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HBuilder开发App教程
举报原因:
原因补充:

(最多只允许输入30个字)