account-book

Run

In the project directory, run the Tabris CLI command:

tabris serve

This will start a JavaScript app code server at a free port and print its URL to the console.

The JavaScript app code can be side-loaded in the developer app if the default config.xml was not changed. Otherwise, the JavaScript app code must be side-loaded in a debug build of this app.

Build

The app can be built using the online build service at tabrisjs.com or locally using Tabris.js CLI.

See Building a Tabris.js App for more information.

tabris.js的使用

初步搭建

必备条件

• node版本 >= 6.0
• 全局安装tabris-cli
• 手机调试app：Tabris.js 2

git上创建一个空项目，随后克隆下来git clone xxxxx.git，之后执行tabris init初始化项目，最后执行tabris serve，项目启动。
中文文档
官网文档

使用

• 绑定两元素使用: baseline: '#{id}'
• 弹层使用：AlertDialog
• 想要获取参数使用：Page、NavigationView
• http请求
• page跳到page，跳回

绑定元素

const { TextView, ui, TextInput } = require('tabris');
new TextView({
	id: 'test',
	left: '10%', 
	top,
	text: text,
	font: '20px'
})
.appendTo(ui.contentView);

new TextInput({
    baseline: '#test',
    id: 'username',
    left: '35%', 
    right: '20%',
    height: 35
})
.appendTo(ui.contentView);
    

弹层

const { AlertDialog } = require('tabris');
new AlertDialog({
	buttons: {
	    cancel: '取消'
	},
	message: 'test'
})
.open();

想要获取参数

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

let navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
})
.appendTo(ui.contentView);
	
const page = new Page({
    title: 'test'
})
.appendTo(navigationView);

new TextInput({
    id: 'test',
    left: '35%', 
    right: '20%',
    height: 35,
    text: 'test'
})
.appendTo(page);

// 获取input框信息
page.find('#test').get('text');

http请求

const data = JSON.stringify({});

let myHeaders = new Headers();

myHeaders.append('Content-Type', 'application/json; charset=utf-8');
myHeaders.append('Content-Length', data.length);

const request = new Request('http://xxxx', {
  method: 'POST', 
  mode: 'no-cors',
  body:data,
  headers:myHeaders
});

fetch(request)
	.then((response) => response.json())
	.then((result) => {
	  console.log(result);
	})
	.catch((err) => {
	  console.error(err);
	});

page跳到page，跳回

// 当前页调用，即可跳回上一页
navigationView.pages().dispose();
或者
page.dispose();

在同一个navigationView中的可自带跳回按钮
const {Button, NavigationView, Page, ui} = require('tabris');

let pageCount = 0;

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

createPage();

function createPage(title) {
  let page = new Page({
    title: title || 'Initial Page'
  }).appendTo(navigationView);
  new Button({
    left: 16, top: 16, right: 16,
    text: 'Create another page'
  }).on('select', () => createPage('Page ' + (++pageCount)))
    .appendTo(page);
  new Button({
    left: 16, top: 'prev() 16', right: 16,
    text: 'Go back'
  }).on('select', () => page.dispose())
    .appendTo(page);
  new Button({
    left: 16, top: 'prev() 16', right: 16,
    text: 'Go to initial page'
  }).on('select', () => {
    navigationView.pages().dispose();
    createPage();
  }).appendTo(page);
  return page;
}