开源跨平台移动项目Ngui【入门】

Ngui简介

这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目,至此JavaScript成为了真正意义上前后端通吃的语言。

Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。

同宗不同派

这有点类似Reac-Native可能你们会问为什么你要写一个与React-Native一样的东西,虽然表面上看见确实有相似之处,都使用jsx语法,都是跨平台的,都能实现热更新,也都不是基于浏览器webview。 但不同之处是Ngui不依赖操作系统的GUI组件,完全调用标准OpenGLAPI进行绘图渲染,并且给它编写了一套布局引擎,这有点类似浏览器的div+css。几年前在开始构思这个框架时效率就一直做重中之重来考虑,虽然现在有很多地方不足,还达不到理想目标,但我相信在不久的将来一定可以。基于这几个特点做为一个GUI系统Ngui能快速的移植到任何操作系统,对操作系统做特例化处理的地方会很少,更重要的一点是基于此开发的应用代码能够做到真正意义上的跨平台。

当然在这里并不是抨击RN的不足,相反RN第一次用一种语言统一各端平台,这是非常了不起的,这也是我灵感的源泉。

开始使用Ngui

如果你从来没有使用过ngui你可以从这里开始,一步步创建你的第一个ngui程序。

先让给你们看一个简单的Hello World程序

import { GUIApplication, Root } from 'ngui'
new GUIApplication().start(
    <Root>hello world!</Root>
)

做过react开发的朋友一定会非常熟悉这种代码,对就是facebook发明的那个JavascriptXML简称jsx,这段代码能在你的设备屏幕上显示hello world!

安装 Ngui 工具包

首先你需要安装ngui提供的工具包,工具包是使用nodejs编写并且运行时依赖python2.7,所以必需先安装nodejspython,如果已经安装过那就可以跳过了

还有一个地方需要注意,这个工具暂时只能在mac系统下运行,因为我只在mac下做过测试,理论上也应该可以在linux下运行,大家可以可自行试试,但是我并不敢保证它运行不会出错,但有一点可以确定现在一定是不能在windows下运行的。最好是在mac下运行因为如果你要开发ios一定是需要mac的。

获得到这个工具包

  • 你可以使用nodejs自带的软件包管理器npm来安装它, 打开Terminal并执行以下命令: # shell $ sudo npm install -g ngui-tools

创建新Ngui项目

上一步你应该已经安装了工具包现在用它来创建你的第一个项目吧!

使用下面的shell命令创建一个新的ngui工程:

# shell
# 创建一个工程根目录
$ mkdir myproject
# 进入到工程根目录
$ cd myproject
# 使用ngui命令初始化工程目录
$ ngui init

现在myproject工程根目录结构应该如下:

  • myproject
    • examples
    • node_modules
    • app.keys
  • examples是一个实例程序也就是在goole playapp store上发布的那个实例程序,你可对照这个目录结构创建自己的应用程序目录,当前也可以删除它但需时同时删除app.keys下对应的键值。
  • node_modules目录是运行ngui程序所必要的库文件,库所提供的API可以查阅这里http://nodegui.org/doc/会有比较详细的说明
  • app.keys中描述的每一个key对应的目录都是一个app应用程序 。
  • .keysngui提供的一种数据格式文件,类似json格式可定义数组与对像,我会在以后的文章中对这种数据格式做详细说明,这里先略过现在只要知道它是一种类json格式就行了。

你现在所看到的目录结构就是ngui的标准项目结构,不管ngui以后支持多少种操作系统与平台,这个项目结构不会变。

构建Ngui项目

构建项目是专业术语,其实就是把你的应用程序进行编译打包,在这里会把你刚刚创建的ngui项目根目录下的jsjsx文件以及资源文件进行压缩打包。

在项目根目录下执行下面的shell命令进行构建:

# shell
$ ngui build

执行完命令后你应该可以在项目根目录下看到多出了一个out目录,对这就是你刚刚执行命令自动生成的文件,这个目录的详细说明留到以后的章节中,今天在这里这不是重点。

导出项目

导出XcodeorAndroid Studio工程,有人会问为什么还要导出第三方工程不是跨平台吗?我指的跨平台是在运行与编码上是跨平台并,并且你最终输出的是一个.apk包或苹果公司的.dmg.ipa所以这种基本的导出工作还是要做的,抱歉现阶段我还无法为大家提供IDE,只能是稳妥的把核心做好。那么既然要导出三方工程,那么你就去百度下安装它们吧,这并不困难并且这些都是免费的。

在项目根目录下执行下面的命令:

# shell
# 导出 ios Xcode 项目
$ ngui export ios
# 导出 android stodio 项目
$ ngui export android

执行完命令后会在项目根目录下生成project/iosproject/android分别对应Xcode工程与Android Stodio工程。

有人想了解XcodeAndroid Stodio是怎么创建项目的请看这里:

导出工程后那么你就可以打开它们进行编译与调试了,如果你安装过Xcode导出命令执行后会自动打开Xcode

这是我mac机上项目目录的样子:

这是打开Xcode的样子:

这是打开Android Studio的样子:

Ngui调式服务器

Ngui Tools提供了一个远程测试http服务器,你不需要每次修改完jsjsx代码都进行重新安装。把你的应用启动地址设置成调试服务器地址,在导出项目时工具会自动把启动地址设置这个调式地址,所大部分情况下你不需要修改,除非你想连接到其它地方。

执行下面的代码可以启动它:

# shell
$ ngui

这个工具现在还不是很完善只能做简单的日志显示,并不能从终端主动干预你应用的运行状态,这是我在未来的版本中需要解决的问题。

下载

  • 这是我编译的Android实例程序apk包下载地址examples-release.apk 也可以去Google PlayApp Store中搜索AvocadoJSAvocadoJS是项目之前的名称,由于后来项目改名还没来得急上传商店中。
  • 这是在Github源码地址Examples Demo

谢谢大家,未完待续~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SDNLAB

LINC switch系列之安装指南

前言 LINC switch是一个由flowforwarding. org主导开发的一款基于Apache2.0协议开源的Openflow交换机软件。本文介绍了其...

3368
来自专栏运维一切

marathon和mesos的zookeeper数据加密和验证

###zookeeper设置用户验证访问权限 ####首先你要弄明白zookeeper的验证 先给一个例子

822
来自专栏闻道于事

Vue.js(一)了解Vue

什么是Vue? 1.Vue.js是一个构建数据驱动的web界面的库。类似于Angularjs,在技术上,他重点集中在MVVM模式的View层,非常容易学习,非常...

34312
来自专栏腾讯云数据库团队的专栏

在云端快速构建一个 ODOO 站点

ODOO 的前身是 OpenERP,是一款开源的 ERP 系统,使用 Python 开发,数据库采用PostgreSQL,系统以 LGPLv3 协议发布。ODO...

2.1K0
来自专栏程序员的SOD蜜

Vue.js 入门指南之“前传”(含sublime text 3 配置) 1,下载安装Node.js2,配置Vue环境3,Vue初探4,配置sublime Text

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指...

3019
来自专栏极客生活

从零开始用Vue+Flask开发知乎小视频下载工具

作为一个几乎从来没做过前端开发的程序员,我近期花了一个周从零开始学习Vue的知识,做了一个知乎小视频的下载Demo,并且成功部署到线上。

571
来自专栏Python

linux目录结构详细介绍

1663
来自专栏张戈的专栏

Windows 7下获取System权限

公司推 Win7 了,作为 IT 部门,铁定是先行测试的小白鼠。于是先给我们安装了 Win7 工作环境。一直以来,除了服务器,普通办公 PC 的管理员都是被桌面...

3244
来自专栏進无尽的文章

兼容-记录Xcode8.0恢复插件全过程

Xcode 的插件大大丰富了 Xcode 的功能,而且有了 Alcatraz ,插件的管理也非常容易,但是有个非常恼人的问题:一旦升级 Xcode ,插件就失效...

972
来自专栏王磊的博客

微信中通过页面(H5)直接打开本地app的解决方案

简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的。 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你...

38313

扫码关注云+社区