HBuilder开发App教程
2016-03-25 14:26
423 查看
![](http://uikoo9-ueditor.qiniudn.com/@/images/20150701/1435757190374098521.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
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
相关文章推荐
- Android 工具类积累
- Android 自定义WheelView
- swift之向ftp服务器传文件
- [Android分享] 通过蓝牙,在两台设备之间传递音频(包括音乐,通话)
- Android开发优化建议
- Android 动画机制 之 属性动画
- android的消息处理机制(图+源码分析)——Looper,Handler,Message
- Android系统性能优化备忘
- Android程序中输入法弹出的时候如何不遮挡输入,与布局相配
- Cocos2d-js Chipmunk的使用,实现一根绳子
- iOS完整App资源收集
- Github上的600多个iOS开源类库
- Android WebView开发问题及优化汇总
- iOS 项目的目录结构能看出你的开发经验
- iOS--xcode调试神技!直接crash在代码
- MDM 用itms-services给ios设备推送应用 ios8以上版本 更新安装失败
- App架构经验总结
- iOS--xcode调试神技!直接crash在代码
- Android Studio动态模板——少写即多写
- Android5.0 之 ToolBar与DrawerLayout配合使用