如此精致的龙芯桌面应用! nw.js方案利用web技术编写高体验界面-网上捕鱼网络版

新闻与活动
加入网上捕鱼网络版
联系网上捕鱼网络版
请输入搜索条件
邮箱登录
忘记密码
11-15 2018

如此精致的龙芯桌面应用! nw.js方案利用web技术编写高体验界面

nw.js是使用web语言开发桌面图形应用程序的优秀编程环境,近期已经由龙芯开发者移植到龙芯电脑上。传统桌面应用开发要求使用c/c 这样的高级编程语言以及qt等专门的图形库。有了nw.js,可以将现有web开发技术运用到桌面编程,仅仅使用html、css和javascript就能开发桌面图形应用,达到现代界面体验水平。这种方案的最大优势还在于,开发出来的应用程序是完全平台无关的脚本语言,所以能够在龙芯和x86等所有cpu,以及windows、mac和linux等所有操作系统中跨平台运行,显著减少了应用开发、维护和迁移的时间。本文介绍nw.js在龙芯平台上的移植过程,为龙芯平台上的桌面图形应用程序提供参考,推进龙芯生态建设。

  • nw.js背景

nw.js是一种跨平台桌面应用软件开发平台,原来的项目名称是node-webkit。这是一种支持使用所有web技术编写应用程序界面的新方法。简单来说nw.js就是使用html、css、javascript语言编写在桌面端运行的程序界面。

▲ nw.js项目网上捕鱼网络版主页

nw.js主要具备如下特性:
1. 使用web技术(html5, css3和webgl)编写本地应用程序
2. 完全支持浏览器中的所有功能
3. 完全支持node.js api和所有第三方模块
4. 直接从dom和web workers调用node.js模块
5. javascript源代码保护
6. 适用于linux,mac os x和windows

 

下图说明“nw.js能做什么”。

▲ nw.js应用程序的结构
 

下图说明“怎么用nw.js完成任务”的问题。

▲ nw.js应用程序的运行过程
 
nw.js网上捕鱼网络版主页:
源代码项目地址:
  • nw.js快速创建应用程序实例
下面创建一个最简单的“hello world”程序,展示在nw.js平台中的运行效果。
使用任何文本编辑器,编写两个文件,分别是index.html和package.json。
index.html文件内容如下:

package.json文件内容如下:

在package.json所在的当前目录下,使用下面的命令运行应用程序:
$ nw .
 
运行界面如下图所示:
▲ 第一个nw.js应用程序“hello world”界面
可以看到,nw.js的源代码不需要编译,直接运行就出现了界面。
  • nw.js的大型应用
nw.js由于具有多方面优点,现在已经很流行,开发出的应用已经涵盖了许多领域:
  1. 经典的聊天应用;
  2. 种子下载,以及视频播放器;
  3. 代码编辑器,甚至还有一款markdown编辑器;
  4. 类似evernote的笔记类应用程序;
  5. 数据库管理应用。
来欣赏一下界面截图,可以看到使用nw.js开发出的应用界面,相比以前使用传统的qt图形库开发的应用界面更加美观。
▲ 基于nw.js的mongo management studio数据库管理应用程序界面
 
  • nw.js在龙芯上的移植过程
nw.js越来越普及,但是目前官方仅提供编译好的x86二进制,在龙芯上并不能直接运行。为了龙芯生态应用的发展,本文完成nw.js在龙芯上的移植适配工作。
移植过程参照了官方文档:
本文移植的nw.js版本为:nwjs-0.33.3 、chromium-69.0.3497.100 、nodejs-v10.10.0。
移植的软硬件环境是龙芯3a3000台式机,龙芯社区版操作系统loongnix。
nw.js在龙芯上的适配主要分成如下几个步骤:
1、获取nw.js相关代码
主要是完成chromium.src、nw.js、node以及v8这四个部分代码的获取。
需要使用gclient命令,来自于depot_tools,获取方式如下:
$ git clone
$ export path=$path:$home/depot_tools-dir
 
这样,在终端任何地方都可以调用使用gclient命令。
获取chromium.src模块,先创建nwjs目录,进入nwjs目录后通过如下命令生成.gclient文件。
$ gclient config --name=src
接着运行如下命令进行chromium.src代码获取:
$ gclient sync --with_branch_heads
 
nw.js、node以及v8这三个模块的获取主要按照如下地址checkout到对应正确的分支,放入chromium.src正确的位置中:

▲ nw.js、node以及v8这三个模块的项目地址
 
2、配置编译选项
龙芯上设置nwjs_sdk=false,主要进行normal版编译。具体gn_configs设置如下:
$ export gn_configs={
    is_debug = false
is_clang = false
is_component_ffmpeg = true
use_sysroot = false
use_gold = false
proprietary_codecs = true
enable_widevine = false
fatal_linker_warnings = false
link_pulseaudio = true
treat_warnings_as_errors = false
nwjs_sdk = false
}
 
由于在loongnix上编译,需要设置mips_arch_variant="loongson3",但是该参数针对nwjs编译并不识别,目前只能在build/config/mips.gni中默认将mips_arch_variant改成loongson3进行编译。
接下来通过gn生成ninja构建文件:
$ gn gen out/nw --args="${gn_config[*]}"
 
  1. 编译nwjs模块
$ ninja-build -c out/nw nwjs
 
  1. 编译配置选项以及编译node模块

编译前需要进行如下配置:

$ export gyp_defines="target_arch="mips64el" debug=false clang=false sysroot=false host_arch="mips64el""
$ gyp_chromium_no_action=0 ./build/gyp_chromium -i third_party/node-nw/common.gypi -d building_nw=1 third_party/node-nw/node.gyp
 

编译:

$ ninja-build -c out/release node
$ ninja -c out/nw copy_node
 

5、完成nw.js整体移植适配,成功启动nw.js

 
$ cd out/nw
$ ./nw
 

在龙芯电脑上运行nw.js的默认界面如下图:


▲ 在龙芯上运行nw.js应用程序
 

至此,nw.js在龙芯上可以成功启动了!

  • 编译好的成品

为了方便龙芯开发者使用nw.js,作者已经在龙芯社区版操作系统loongnix中制作了二进制成品rpm包,后面会上传到网络源中。开发者不再需要从头执行编译过程,只需要通过下面的命令直接安装nw.js的软件包(需要使用管理员权限执行):

# yum install nwjs
 

就样就可以方便的进行nw.js应用开发。

nw.js适配过程中总体来说是比较顺利的,主要的问题还是在于chromium以及node的编译适配,而这些方面龙芯已有充足的经验,所以这次的适配过程没有遇到无法解决的问题,代码改动量很少,基本上实现了无障碍迁移。

通过本文的nw.js的适配过程表明,龙芯软件生态环境已经非常完善,在打造龙芯平台软件丰富性的过程中,龙芯公司已经走出了一条坚实的道路,希望产业链能够一起把龙芯的软件生态完善起来!

网上捕鱼网络版 copyright © 2008- 龙芯中科技术股份有限公司

本网站由龙芯3b4000/3c5000服务器提供强劲动力