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

Hbuilder开发移动App(1)的更多相关文章

  1. HBuilder开发移动App——manifest.json文件解析

    以前做过Android App开发,对于各项配置都是在AndroidManifest.xml文件中完成的,包括权限的设定.图标.标签.App的名字.Activity注册等等 使用HBuilder开发移 ...

  2. 使用HBuilder开发移动APP

    前言 HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于 ...

  3. 使用HBuilder开发移动APP:开发环境准备(转)

    一直想开发个APP玩玩的,但是作为一个PHP码农,需要新学习JAVA或者Object C,这也是一直没能实现这个目标的原因.但是现在HTML5+.APPCAN.apicloud很多工具利用前端技术就能 ...

  4. 使用HBuilder开发移动APP:ajax调用接口数据

    既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...

  5. Hbuilder开发HTML5 APP之WebView

    WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用,结构如图: 也可以实现这样的结构: 注意:WebView的使用属性HTML5+规范,所以必须等 ...

  6. Hbuilder开发HTML5 APP之侧滑菜单

    1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plus ...

  7. Hbuilder开发HTML5 APP之打开新页面

    mui.openWindow({ url: 'examples/info.html', id:'info' }); 要在页面间传递参数,需要使用一个extras:{}对象另外打开的页面显示的内容必须装 ...

  8. Hbuilder开发HTML5 APP之创建子页面

    折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({   subpages:[{    id:"list",   url: ...

  9. Hbuilder开发HTML5 APP之向导页制作

    研究了下,向导页的制作还是比较简单的,主要使用的是mui控件中的”图片轮播“组件,组件的标签写法手册中有,中间发现个有趣的东西,如果要作全屏,可以加个样式mui-fullscreen 滑动图片时会自动 ...

随机推荐

  1. IOS中Hybird中数据驱动与脚本驱动的实现

    现在Hybird这块,网上也有很多文章,最近小有研究了下,分享给大家. 什么是Hybird技术? 1.一般是指WebView和Native技术混合而成的一套技术方案 2.也可以理解成,非Native技 ...

  2. github学习(二)

    Git学习(一) 学习github一定要学会git,否则在后续的github运用中会出现很多问题. 1.安装Git: Mac自带Git,Windows需要自己安装. 2.配置git: 配置user.n ...

  3. Dev使用技巧

    1.  dev调试 I.建工程,选择console application II.设置断点(F4),并按F5,(完成输入后,)其它功能如Next line可运作 2.  修改字体大小:Tools-&g ...

  4. x86主机搭建家庭智能路由系统 ---- Proxmox虚拟化实现一机多用

    Proxmox VE简介 Proxmox VE(Proxmox Virtual Environment) 是一款完全开源虚拟化管理平台,可以管理QEMU/KVM虚拟机和LXC容器.事实上它只是一个前端 ...

  5. 3407: [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题

    3407: [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit:  ...

  6. 转换器5:参考Python源码,实现Php代码转Ast并直接运行

    前两个周末写了<手写PHP转Python编译器>的词法,语法分析部分,上个周末卡文了. 访问器部分写了两次都不满意,没办法,只好停下来,参考一下Python的实现.我实现的部分正好和Pyt ...

  7. [译]Selenium Python文档:一、安装

    1.1.简介 Selenium Python为使用Selenium WebDriver来编写功能/验证测试提供了一个简单的API接口.通过Selenium Python API,你可以以一种非常直观的 ...

  8. Struts2(二)之封装请求正文、数据类型转换、数据验证

    一.封装请求正文到对象中(重点) 1.1.静态参数封装 在struts.xml文件中,给动作类注入值,使用的是setter方法 1.2.动态参数封装 通过用户表单封装请求正文参数 1.2.1.动作类作 ...

  9. CSS -- 练习(待续优化)

    啊啊啊  错误百出啊 错点总结: 字符全角半角.清楚浮动.结尾</div>有点乱找不到对应的了.注释要写好. <!DOCTYPE html> <html lang=&qu ...

  10. 读书笔记 effective c++ Item 38 通过组合(composition)为 “has-a”或者“is-implemented-in-terms-of”建模

    1. 什么是组合(composition)? 组合(composition)是一种类型之间的关系,这种关系当一种类型的对象包含另外一种类型的对象时就会产生.举个例子: class Address { ...