HBuilder开发App教程

2024-04-30 01:47:55

奇妙的前端，奇妙的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

qiao.ng.toast = function(msg){
// for ios
if(window.WebViewJavascriptBridge){
WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);
}else{
document.addEventListener('WebViewJavascriptBridgeReady',function onBridgeReady(){
WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);
}, false);
}
// for android
if(typeof android != 'undefined'){
android.showSystemToast(msg);
}
};

也就是封装了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

HBuilder开发App教程相关推荐

HBuilder开发App教程01-推开前端开发App的大门
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
HBuilder开发App教程06-首页
实战前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行讲解, 有兴趣的可以先行下载体验一下,或者下载源码研究下. 新建项目打开HBuilder,在项目管理器中右键--新建- ...
Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
Hbuilder开发app实战-识岁01-actionsheet实例
前言之前写了HBuilder开发App入门-滴石.相信大家看完后应该能够入门了, 之后会做一些简单的app.把nativejs一些经常使用的功能都过一遍,这样以后做app就没什么难的了. 识岁借助 ...
WordPress+Flutter开发APP教程：2.创建项目
说明本小节教程,将教您如何使用 Android Studio 创建一个 APP 目录说明开始 1.打开 Android Studio,并点击新建flutter 项目如下: 2.选flutte ...
MUI+H5plus+HBuilder开发app（android，ios）介绍
前言现在介绍一款只需要懂html+css+js就能开发app的框架,不需要懂原生语言,完全只需要前端web工程师就能独立开发出android和ios的应用,且一套代码搞定,效率很高.(其实更省事可以 ...
mui开发app教程-1
上一篇:前言目录创建项目方式功能1:引导页引导页显示引导页代码模板引导页全屏显示设置引导页跳转首页功能2:首页选项卡设计选项卡依赖文件选项卡代码模板选项卡更改图标使用成果展示和 ...
mui hello html5 安装,HBuilder开发App Step1——环境搭建，HelloMUI 以及真机调试(示例代码)...
No1. 必须搭建java环境只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
python开发app教程_知到APP_数据库应用与开发_答案教程
知到APP_数据库应用与开发_答案教程更多相关问题 [单选题]下列选项中,属于sendRedirect(java.lang.String url)方法所在接口的是( ) A. HttpSession ...
html打包app方案,HBuilder开发APP（前端APP打包方案）
前端涉及app的两种方式适应移动端的网页大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表, 说的简单点就是对移动端做了适配,是的布局样式组件都适合移动端展示, 我的 ...

最新文章

热门文章