移动应用开发框架Tabris.js简介（附Tabris.js中文文档）

注：我翻译了Tabris.js中文文档，欢迎star。

Tabris.js是一个移动应用开发框架，支持完全用JavaScript实现的一套代码来开发iOS、Android、Windows应用；个人观点，如果React Native的上手难度系数是8，那么Tabris.js的上手难度系数应该不到6。

• 文档清晰，非常适合前端开发人员的开发思路
• 支持线上构建，不需要做复杂的本地环境配置，只需要安装一个开发者app就可以调试应用
• 不需要webview
• 支持npm包，并以Node.js的方式引入模块
• 支持cordova插件（开发者app默认内置摄像头调用、扫码、陀螺仪、谷歌服务等cordova插件）
• 支持fs，支持ES6、TypeScript和JSX，支持WebSocket等W3C API
• 对于ui定制性不太强的应用，几乎只需花点时间浏览文档，就可以撸起袖子开干了

快速开始

详情参考快速开始指南

初始化工程

npm install -g tabris-cli // 安装tabris的命令行工具
tabris init // 初始化工程
tabris serve // 开启开发服务器，开启成功后会打印服务器地址

然后需要下载Tabris.js的开发者app，用于预览你本地开发的app；iOS直接在app store下载，Android下载需要翻墙，如果不想翻墙，可以在这里下载Tabris.js开发者app。Tabris.js也支持在线编辑代码，然后本地预览，参考Play with the Playground。
接着在开发者app中连接你本地的服务器，连接成功后就可以看到你的app界面了，如下图所示。随意修改app.js，在开发者app的控制台中点击刷新按钮，查看你的修改结果（修改结果加载到开发者app中可能有一定延时）。

创建原生控件

详情参考控件基础知识

创建控件

Tabris.js使用JavaScript来声明控件（也可以在TypeScript中使用JSX）

let button = new Button({
  left: 10,
  top: 10,
  text: 'OK'
});

事件

用on()方法为控件绑定事件，用off()方法注销事件

button.on('select', (event)=>{
    console.log(event.target);
});
button.off('select')

将控件加入视图

为了使控件可见，每个控件都必须有一个父控件（除了根控件）。将控件添加进父控件：

button.appendTo(parent);
parent.append(button);

遍历

支持选择器表达式：*、Type、.class、#id

parent.find('Button');
parent.find('#id');
parent.children().last();

布局

直接使用top、bottom、left、right属性等来布局，参考布局

动画

button.animate({
  opacity: 0,
  transform: {
    translationX: 200,
    scaleX: 0.1
  }
}, {
  duration: 1000,
  easing: 'ease-out'
}).then(() => label.dispose());

可以看到，这完全是在写操作DOM的前端代码嘛；但Tabris.js里没有DOM，Tabris.js根据JavaScript代码，完全用原生控件来渲染界面。

UI模型

详情参考UI模型

ui对象是所有控件的顶级父控件（可以简单地理解为web里的body），ui对象包含一些固定的子控件，Tabris.js app的用户界面主要由这些控件搭建起来：

• ui.statusBar - 状态栏，显示时间和一些系统图标

• ui.navigationBar - 在Android中，用于包含Back、Home等按钮

• ui.contentView - app的主界面（内容界面）
• ui.drawer - 可以从左侧滑入的抽屉

通常app用ui.statusBar和ui.contentView两部分组成就行了。

页面导航（路由）

Tabris.js有两种导航模式，即Page（分页）和 Tab（选项卡）。
Page可以简单地理解为子页面的容器，一般配合NavigationView（一个覆盖了整个ui.contentView的容器）以及一个Action（顶部导航）来达到导航的目的。如下是一个简单示例：

const {Button, NavigationView, Action, Page, ui} = require('tabris');

const navigationView = new NavigationView({
    left: 0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView);
navigationView.append(new Action({}));

const button = new Button({
    text: 'Create another page'
}).on('select', () => {
    new Page({title: 'another page'}).appendTo(navigationView);
});

const index = new Page({title: 'index'});
index.append(button);

navigationView.append(index);

效果如图：

Tab用app顶部或底部的导航选项卡来导航，每一个Tab可以理解为一个页面。Tab需要一个TabFolder来作为其容器。Page和Tab可以组合使用，比如在上述代码中的index页面中添加一个Tab导航：

const {TabFolder, Tab} = require('tabris');
const tabFolder = new TabFolder({
    left: 0, top: 0, right: 0, bottom: 0,
    tabBarLocation: 'bottom'
});
index.append(tabFolder);
creatTab('tab1');
creatTab('tab2');
creatTab('tab3');

function creatTab(name) {
    new Tab({
        title: name,
        image: {src: 'src/img/girl.png'}
    }).appendTo(tabFolder);
}

效果如图：

杂项

触摸事件

支持通用的tap、longpress、pan、swipe事件，参考触摸事件

W3C API

支持console、计时器、XMLHttpRequest、Fetch、WebSocket、localStorage等W3C API，可以无障碍使用。

Cordova插件

在Tabris.js开发者app中默认集成了摄像头调用、扫码、陀螺仪、谷歌服务等Cordova插件。要集成其他Cordova插件，只需要在./cordova/config.xml文件中添加<plugin />标签，以添加相机插件为例：

<plugin name="cordova-plugin-camera" spec="^2.3.0" />

为了在添加其他插件后，方便调试，可以在添加插件后，到免费在线构建平台构建一个包含你的插件的调式版本（相当于自定义的Tabris.js 开发者app）。

构建app

Tabris.js支持在线免费构建，这是最吸引我的一点，不用做任何本地配置就可以调试、打包（对于前端工程师来说，复杂的本地配置既麻烦还容易出各种问题，并且我没有Mac来构建iOS应用，哭）。构建配置也非常简单，参考构建app。

app补丁

Tabris.js支持热更新。你只需要提供一个目录结构和app目录结构相同的zip文件，然后提供一个下载补丁的url，然后执行app.installPatch，Tabris.js就会下载你的补丁并替换对应目录中的文件。

app.installPatch(patchUrl, (error, patch) => {
  if (error) {
    // show error dialog
  } else {
    // confirm reload
    app.reload();
  }
});

总结

总的来说，个人认为，在不需要webview的js app开发框架中（如React Native、NativeScript、weex等），该框架是最易上手的，调试、打包、发布一条龙。
但也有缺点，框架中简单易用的控件可定制性不强，开发过程中有点束手束脚的感觉，有时只能妥协使用其固有样式，或者只能取巧来实现某些逻辑（从另一个角度说，这也省去了很多设计的工作，反正我是不会设计）。如果业务场景稍复杂或者样式比较特别，还是需要自己介入原生代码开发组件。