App.js 轻量级的 JavaScript UI 库

发布于 2020-02-22 13:14:37 字数 3553 浏览 1906 评论 0

App.js 是一个轻量级的 JavaScript UI 库，用来创建移动的 Web 应用，应用的外观跟原生的应用相同，性能也近乎一致。

特点

跨平台，支持 Android 2.2+、iOS 4.3+ 版本系统；
针对特定平台的 UI 设计可自定义主题；
类原生转换配置；
自动管理导航堆栈；
内置通用用例组件。

为什么选择 AppJS？

因为它简单而有力。使用 AppJS，您不需要担心编写跨平台代码或学习新的语言和工具。您已经熟悉 HTML、CSS 和 Javascript。有什么比这个堆栈更适合应用程序开发？此外，AppJS 使用的核心是 Chrome，所以您可以使用最新的 HTML5 API。因此放松并专注于应用程序应该完成的任务。

HTML5

AppJS 允许您使用 HTML5 API 创建有吸引力的应用程序，从文字处理器到 3D 游戏。您不再局限于默认的 GUI 小部件，它们迫使您使用 PlaForms。创建自定义UI现在仅限于您的想象力！

CSS3

使用 CSS，您可以随意装饰小部件。在 HTML 中创建一个自定义小部件，并通过装饰来完成您的工作。在 3D 空间中添加阴影、动画元素和转换对象是 CSS3 所能做的几个例子。

Node.js

AppJS 有趣的部分是它使用 Node.js 作为主干。构建 Node.js 是为了简化开发可伸缩网络应用程序的过程。但是今天，你几乎可以在任何地方看到 Node！它有一个很好的 API 和很多模块。

30 秒快速启动

下面的包包含了开始使用 AppJS 所需的一切，包括 Node.js、所有依赖项、二进制文件和一个随时准备就绪的启动程序。1.)解压缩到文件夹。2.)双击发射。3.)你好世界。

对于 Node.js 用户，还可以通过 NPM 安装 AppJS。

npm install appjs

在 OSX 上，AppJS 需要 32 位节点。它在 64 位 OSX 上工作，但节点必须是32位。。我们正在努力解决这个问题，但这是 Chrome 本身的一个限制，因此它是一项正在进行的工作。帮助我们获得牵引力通过主演这个铬问题。

一分钟使用概况

// load appjs

var appjs = require('appjs');

// serve static files from a directory
appjs.serveFilesFrom(__dirname + '/content');

// handle requests from the browser
appjs.router.post('/', function(request, response, next){
  response.send('Hey! How are you ' + request.post('firstname'));
})

// create a window
var window = appjs.createWindow({
  width: 640,
  height: 460,
  alpha: false,
});

// prepare the window when first created
window.on('create', function(){
  console.log("Window Created");
  // window.frame controls the desktop window
  window.frame.show().center();
});

// the window is ready when the DOM is loaded
window.on('ready', function(){
  console.log("Window Ready");
  // directly interact with the DOM
  window.process = process;
  window.module = module;

  window.addEventListener('keydown', function(e){
    // show chrome devtools on f12 or commmand+option+j
    if (e.keyIdentifier === 'F12' || e.keyCode === 74 && e.metaKey && e.altKey) {
      window.frame.openDevTools();
    }
  });
});

// cleanup code when window is closed
window.on('close', function(){
  console.log("Window Closed");
});

<!doctype html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <form action="/" method="POST">
      <input name="firstname" type="text" placeholder="Firstname"/>
      <input name="lastname" type="text" placeholder="Lastname"/>
      <input type="submit"/>
    </form>
  </body>
</html>