Appearance

目录

Hummer 页面 ​

最简页面示例 ​

js
class RootView extends View {
    constructor() {
        super();
        this.style = {
            width: '100%',
            height: '100%',
            backgroundColor: "#CCCCCC",
        }
    }
}
Hummer.render(new RootView());

页面生命周期 ​

  • onCreate - 页面创建
  • onAppear - 页面显示
  • onDisappear - 页面隐藏
  • onDestroy - 页面销毁
  • onBack - 页面返回事件
js
class RootView extends View {
    constructor() {
        super();
        this.style = {
            width: '100%',
            height: '100%',
            backgroundColor: "#CCCCCC",
        }
    }

    onCreate() {
        // 页面创建
    }

    onAppear() {
        // 页面显示
    }

    onDisappear() {
        // 页面隐藏
    }

    onDestroy() {
        // 页面销毁
    }

    onBack(): boolean {
        // 页面返回事件
        // 返回true表示要拦截返回事件，不做页面关闭；
        // 返回false表示不做拦截，可以正常关闭页面。
    }
}
Hummer.render(new RootView());

页面跳转 ​

使用 Navigator组件 进行页面跳转。

页面间数据传递 ​


页面A -> 页面B ​

js
// 页面A，通过Navigator打开页面B
let pageInfo = {
    id: '222',
    url: 'http://x.x.x.x:8000/PageB.js',
    animated: true,
    params: {
        aaa: 111,
        bbb: 222,
    }
};
Navigator.openPage(pageInfo, (result) => {
    console.log('Navigator result: ' + JSON.stringify(result));
});
js
// 页面B，接收页面A传递过来的数据
let pageInfo = Hummer.pageInfo;
console.log('Page info: ' + JSON.stringify(pageInfo));

页面A <- 页面B ​

js
// 页面B，设置需要传递给页面A的数据
let result = {
    key1: 111,
    key2: 222,
}
Hummer.pageResult = result;
js
// 页面B关闭，回到页面A时，页面A接收页面B传递过来的数据
Navigator.openPage(pageInfo, (result) => {
    console.log('Page result: ' + JSON.stringify(result));
});

Native容器页面传递数据给JS页面 ​

可以把数据挂载到Hummer上，或者其他任意变量上都可以，下面给一个示例：

java
// 在Native容器中调用（Android）
mJsContext.getJSValue("Hummer").set("nativeData", data);

// 在Native容器中调用（iOS）
context[@"Hummer"][@"nativeData"] = data;
js
// JS页面取出数据（这里的"nativeData"字段名对应上面容器设置的字段名）
let data = Hummer.nativeData;
console.log('native data: ' + JSON.stringify(data));