奇妙的前端,奇妙的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中的原生方法,
Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。
如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机App的原生世界。
HTML/JS/Css全部语法只有7万多,而原生语法有几十万,Native.js大幅提升了HTML5的能力。
NJS突破了浏览器的功能限制,也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。
NJS编写的代码,最终需要在HBuilder里打包发行为App安装包,或者在支持Native.js技术的浏览器里运行。目前Native.js技术不能在普通手机浏览器里直接运行。
- NJS大幅扩展了HTML5的能力范围,原本只有原生或Hybrid App的原生插件才能实现的功能如今可以使用JS实现。
- NJS大幅提升了App开发效率,将iOS、Android、Web的3个工程师组队才能完成的App,变为1个web工程师就搞定。
- NJS不再需要配置原生开发和编译环境,调试、打包均在HBuilder里进行。没有mac和xcode一样可以开发iOS应用。
- 如果不熟悉原生API也没关系,DCloud官网汇总了很多NJS的代码示例,复制粘贴就可以用。http://ask.dcloud.net.cn/article/114
再次强调,Native.js不是一个js库,不需要下载引入到页面的script中,也不像nodejs那样有单独的运行环境,Native.js的运行环境是集成在5+runtime里的,使用HBuilder打包的app或流应用都可以直接使用Native.js。
总结一下,就是js去调用android或iso中的原生方法。
点这里去下载官方nativejs-app:http://www.dcloud.io/helloh5/
关于Native.js的文档可以参见:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88
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://dev.dcloud.net.cn/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