Kraken App

{/* 块级 */}

{/* 行内 */}

{/* 块级 */}

{/* 行内 */}

``` -------------------------------- ### Switch to Required Flutter Version Source: https://openkraken.com/guide/contribute/environment Switch the local Flutter repository to the specific version required by Kraken. ```bash git checkout ``` -------------------------------- ### Kraken 页面可见性控制 Source: https://openkraken.com/guide/advanced/check-widget-visibility 展示了如何通过 RouteObserver 自动管理页面可见性，以及如何手动调用 pause 和 resume 方法来控制 Kraken 实例的执行状态。 ```APIDOC ## 自动监测 (RouteObserver) ### Description 通过将 RouteObserver 传入 Kraken 组件，当页面跳转导致 Kraken 被隐藏时，定时器 (setTimeout, setInterval) 和 requestAnimationFrame 将自动暂停，返回时自动恢复。 ### Implementation ```dart final RouteObserver> routeObserver = RouteObserver>(); // 在 MaterialApp 中注册 MaterialApp(navigatorObservers: [routeObserver]); // 在 Kraken 组件中传入 Kraken(routeObserver: routeObserver); ``` ## 手动控制 (pause/resume) ### Description 当无法使用 RouteObserver 监听路由时，开发者可以手动调用 controller 的方法来暂停或恢复页面的执行。 ### Methods - **pause()**: 暂停所有定时器和 requestAnimationFrame。 - **resume()**: 恢复所有定时器和 requestAnimationFrame。 ### Usage Example ```dart Kraken kraken = Kraken(); // 暂停执行 kraken.controller.pause(); // 恢复执行 kraken.controller.resume(); ``` ``` -------------------------------- ### Kraken.registerMethodCallHandler Source: https://openkraken.com/guide/advanced/communicate-with-native 在 Native (Objective-C/Swift/Java/Kotlin) 环境中注册回调，以处理来自 JavaScript 的调用请求。 ```APIDOC ## Kraken.registerMethodCallHandler(handler) ### Description 在 Native 端注册处理程序，用于响应 JS 的 invokeMethod 调用。 ### Parameters - **handler** (function) - Required - 接收 (call, result) 的回调函数，通过 result 返回执行结果 ``` -------------------------------- ### 对比 Web HTML 入口与 Kraken JSBundle Source: https://openkraken.com/guide/basic/difference-to-web 展示了传统 Web HTML 文档结构与 Kraken 使用 JS DOM API 构建视图的差异。 ```html

Hello World!

``` ```javascript const root = document.createElement('div'); root.appendChild(document.createTextNode('Hello World!')); document.body.appendChild(root); ``` -------------------------------- ### 通过 Node API 转换 JavaScript Source: https://openkraken.com/guide/advanced/use-quickjs-bytecode 使用 qjsc Node.js 模块将 JavaScript 字符串编译为字节码缓冲区并写入文件。 ```javascript const Qjsc = require('qjsc'); const qjsc = new Qjsc(); // Dump bytecode from javascript source; let buffer = qjsc.compile('function hello() { return 1 + 1};'); // fs.writeFileSync('/path/to/sample.kbc1', buffer); ``` -------------------------------- ### Dart 环境处理 JS 调用 Source: https://openkraken.com/guide/advanced/communicate-with-native 通过 KrakenJavaScriptChannel 的 onMethodCall 属性设置回调，支持异步处理 JS 的请求。 ```dart KrakenJavaScriptChannel javaScriptChannel = KrakenJavaScriptChannel(); javaScriptChannel.onMethodCall = (String method, dynamic arguments) async { Completer completer = Completer(); Timer(Duration(seconds: 1), () { completer.complete('helloworld'); }); return completer.future; }; Krake kraken = Kraken( bundlePath: 'assets/bundle.js', javaScriptChannel: javaScriptChannel, ), ``` -------------------------------- ### Clone Flutter Repository Source: https://openkraken.com/guide/contribute/environment Use this command to clone the Flutter SDK repository to your local machine. ```bash git clone https://github.com/flutter/flutter ``` -------------------------------- ### 查看 DevTools 连接日志 Source: https://openkraken.com/guide/native/embedded-devtools 服务启动后，控制台会输出 WebSocket 地址，用于在 Chrome 或 Edge 浏览器中进行调试。 ```text flutter: Kraken DevTool listening at ws://0.0.0.0:9222 flutter: Open Chrome/Edge and paste following url to your navigator: flutter: devtools://devtools/bundled/inspector.html?ws=0.0.0.0:9222 ``` -------------------------------- ### Establish WebSocket Connection Source: https://openkraken.com/guide/basic/network Implements full-duplex communication using the WebSocket API. Requires the WebSocket plugin to be loaded. ```javascript const ws = new WebSocket('wss://echo.websocket.org'); ws.onopen = function(evt) { console.log('Connection open ...'); ws.send('Hello WebSockets!'); }; ws.onmessage = function(evt) { console.log('Received Message: ' + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log('Connection closed.'); }; ``` -------------------------------- ### 引入外部样式与 CSS 类选择器 Source: https://openkraken.com/guide/basic/difference-to-web Kraken 支持通过 link 标签引入样式，但 CSS 解析仅支持 class 选择器。 ```html ``` ```css /* common.css */ .logo { width: 100px; object-fit: contain; } ``` -------------------------------- ### 实现跨端兼容的 ScrollView 组件 Source: https://openkraken.com/guide/advanced/high-performance-list 通过检测 kraken 环境对象，动态切换 display 属性以实现代码在 Kraken 和浏览器间的复用。 ```javascript // ScrollView 组件的部分实现 const isKraken = typeof kraken !== 'undefined'; // ... const defaultStyle = { // ... }; export default function ScrollView(props) { const { children, style } = props; const styleToRender = { display: isKraken ? 'sliver' : 'block', ...defaultStyle, ...style, }; return (

{props.children}

); } ``` -------------------------------- ### Implement onTouch Gesture Listener Source: https://openkraken.com/guide/advanced/gesture-to-native Use onTouch listeners to capture touch interaction propagation. Avoid heavy logic in onTouchMove to prevent performance degradation. ```dart Kraken( bundleURL: 'xxxxxxx', GestureListener: gestureListener( onTouchStart: (TouchEvent touchEvent) { //... }, onTouchEnd: (TouchEvent touchEvent) { //... }, onTouchMove: (TouchEvent touchEvent) { //... } ), ) ``` -------------------------------- ### Implement Custom HttpClientInterceptor Source: https://openkraken.com/guide/advanced/network-intercept Demonstrates how to intercept, modify, and mock network requests using the HttpClientInterceptor interface. ```dart import 'dart:typed_data'; import 'package:kraken/foundation.dart'; class CustomHttpClientInterceptor implements HttpClientInterceptor { DateTime? _startTime; DateTime? _endTime; @override Future beforeRequest(HttpClientRequest request) async { request.headers.set('x-foo', 'bar'); print('beforeRequest, request headers: ${request.headers}'); if (request.uri.path == '/posts/1') { _startTime = DateTime.now(); } return null; } @override Future afterResponse(HttpClientRequest request, HttpClientResponse response) async { print('afterResponse, response headers: ${response.headers}'); if (request.uri.path == '/posts/1') { _endTime = DateTime.now(); print('/posts/1 cost: ${_endTime!.millisecondsSinceEpoch - _startTime!.millisecondsSinceEpoch}ms'); } return null; } @override Future shouldInterceptRequest(HttpClientRequest request) async { if (request.uri.path == '/posts/1') { // Direct output string, transform to stream. String replaced = '{ "foo": "bar" }'; Uint8List data = Uint8List.fromList(replaced.codeUnits); Stream stream = Stream.value(data); return HttpClientStreamResponse('text/html', 'utf8', stream, responseHeaders: { 'x-kraken': 'hey', 'hello': 'world' }); } return null; } } void main() { runApp(Kraken( bundleContent: ''' fetch('https://jsonplaceholder.typicode.com/posts/1') .then(function(response) { return response.json(); }) .then(function(data) { // This is the object from API. console.log('LOG:', data); }) .catch(err => { console.error('error:', err); }); ''', httpClientInterceptor: CustomHttpClientInterceptor(), )); } ``` -------------------------------- ### iOS 环境集成与通信 Source: https://openkraken.com/guide/advanced/communicate-with-native 在 Objective-C/Swift 环境中引入 SDK，并使用 registerMethodCallHandler 处理 JS 调用或 invokeMethod 调用 JS 函数。 ```objective-c #import ``` ```swift // 初始化 Kraken 插件 let kraken = Kraken.init(flutterEngine: flutterViewController.engine) // 注册一个处理 JS 调用的回调函数 kraken.registerMethodCallHandler({ (call: FlutterMethodCall, result: FlutterResult) in // 调用 JS 的函数 result("method: " + call.method) }) ``` ```swift kraken.invokeMethod(call.method, arguments: call.arguments) ``` -------------------------------- ### Add Kraken dependency Source: https://openkraken.com/guide/native/interpolation-flutter Include the Kraken package in the pubspec.yaml file. ```yaml dependencies: kraken: '>= 0.0.1' # 会安装最新的 kraken 依赖 ``` -------------------------------- ### Configure navigation delegate Source: https://openkraken.com/guide/native/widget Customizes behavior during Kraken view loading and navigation requests. ```dart KrakenNavigationDelegate navigationDelegate = KrakenNavigationDelegate(); navigationDelegate.errorHandler = (Object error, Object stack) {}; navigationDelegate.setDecisionHandler((KrakenNavigationAction action) async { // ... return KrakenNavigationActionPolicy.cancel; }); Kraken kraken = Kraken( navigationDelegate: navigationDelegate, ); ``` -------------------------------- ### Load local bundle Source: https://openkraken.com/guide/native/widget Loads a JavaScript or Bytecode script from a local asset path. ```dart Kraken kraken = Kraken( bundle: KrakenBundle.fromUrl('assets://assets/bundle.js') ); ``` -------------------------------- ### JS 环境处理 Native 回调 Source: https://openkraken.com/guide/advanced/communicate-with-native 使用 addMethodCallHandler 注册处理函数，以响应来自 Native 端的调用。 ```javascript kraken.methodChannel.addMethodCallHandler((method, args) => { switch (method) { case 'foo': handleFoo(args); break; case 'bar': handleBar(args); break; } }); ``` -------------------------------- ### 编写 BDD 风格测试用例 Source: https://openkraken.com/guide/contribute/test 使用 Jasmine 语法定义测试套件，并通过 snapshot() 函数验证渲染结果。 ```typescript describe('block-in', () => { it('inline-003-ref', async () => { let div; div = createElement( 'div', { style: { color: 'green', }, }, [createText(`There should be no red.`)] ); BODY.appendChild(div); await snapshot(); }); } }); ``` -------------------------------- ### Retrieve Performance Report Source: https://openkraken.com/guide/advanced/measure-performance Call the performance.__kraken_navigation_summary__() API to access the collected performance data after enabling profile mode. ```javascript setTimeout(() => { console.log(performance.__kraken_navigation_summary__()); }, 2000); // 2s 后获取报告 ``` -------------------------------- ### Listen to Custom Events in JavaScript Source: https://openkraken.com/guide/advanced/widget-custom-element Demonstrates how to create a custom element and attach an event listener to handle events dispatched from the Flutter side. ```javascript const flutterButton = document.createElement('flutter-button'); flutterButton.addEventListener('buttonpress', e => { console.log(e.detail); // helloworld document.body.appendChild(document.createTextNode(e.detail)); }); document.body.appendChild(flutterButton); ``` -------------------------------- ### Enable Profile Mode via Environment Variable Source: https://openkraken.com/guide/advanced/measure-performance Set the ENABLE_PROFILE environment variable during the bridge build process to enable performance tracking. ```bash ENABLE_PROFILE=true npm run build:bridge:all:release ``` -------------------------------- ### Kraken 全局通信接口定义 Source: https://openkraken.com/guide/advanced/custom-js-api Kraken 注入的全局 kraken 对象提供的通信方法签名。 ```typescript // 调用 Dart 函数 kraken.invokeModule: (module: string, method: string, params?: Object | null, fn?: (err: Error, data: any) => void) => string; // 监听 Dart 触发的 Module 事件 kraken.addKrakenModuleListener: (fn: (moduleName: string, event: Event, extra: string) => void) => void; ``` -------------------------------- ### 集成 KrakenDevTools Source: https://openkraken.com/guide/native/embedded-devtools 在 Kraken 构造函数中配置 devToolsService 以启用 Chrome DevTools 支持。 ```dart import 'package:kraken/devtools.dart'; Kraken( // ... devToolsService: ChromeDevToolsService(), ); ``` -------------------------------- ### kraken.methodChannel.invokeMethod Source: https://openkraken.com/guide/advanced/communicate-with-native 在 JavaScript 环境中调用 Native 端实现的函数。第一个参数为方法名，后续参数为传递给 Native 的数据。 ```APIDOC ## kraken.methodChannel.invokeMethod(method, ...args) ### Description 在 JS 环境中调用 Native 端实现的函数，并返回一个 Promise 以获取执行结果。 ### Parameters - **method** (string) - Required - 要调用的 Native 方法名 - **...args** (any) - Optional - 传递给 Native 的参数 ### Response - **result** (any) - Native 方法执行后的返回值 ``` -------------------------------- ### Configure JavaScript channel Source: https://openkraken.com/guide/native/widget Sets up a communication channel for exchanging information with JavaScript. ```dart KrakenJavaScriptChannel javaScriptChannel = KrakenJavaScriptChannel(); javaScriptChannel.onMethodCall = (String method, dynamic arguments) async { Completer completer = Completer(); Timer(Duration(seconds: 1), () { completer.complete('helloworld'); }); return completer.future; }; Krake kraken = Kraken( javaScriptChannel: javaScriptChannel, ), ``` -------------------------------- ### Dart 层实现 Module 逻辑 Source: https://openkraken.com/guide/advanced/custom-js-api 通过继承 BaseModule 实现业务逻辑，并使用 moduleManager 处理回调与事件触发。 ```dart import 'package:kraken/module.dart'; import 'package:kraken/dom.dart'; import 'dart:async'; class AlarmClockModule extends BaseModule { AlarmClockModule(ModuleManager moduleManager) : super(moduleManager); @override String get name => 'AlarmClock'; @override void dispose() {} @override String invoke(String method, dynamic params, InvokeModuleCallback callback) { try { if (method == 'setTime') { dynamic time = params; Timer(Duration(seconds: time.toInt()), () { Event alarmEvent = Event('alarm'); moduleManager.emitModuleEvent(name, event: alarmEvent, data: 'Wake Up!'); callback(data: 'success'); }); } return null; } catch (e, stack) { String errmsg = '$e\n$stack'; callback(errmsg: errmsg); } return null; } } void main() { ModuleManager.defineModule((moduleNamager) => AlarmClockModule(moduleNamager)); } ``` -------------------------------- ### onTouch Source: https://openkraken.com/guide/advanced/gesture-to-native The onTouch listener captures touch interaction events. It is recommended to avoid heavy logic in onTouchMove to maintain performance. ```APIDOC ## onTouch ### Description Listens for touch events (onTouchStart, onTouchMove, onTouchEnd) passed to the widget. ### Parameters - **touchEvent** (TouchEvent) - The touch event data. ### Note Avoid frequent heavy calculations within onTouchMove to prevent performance degradation. ``` -------------------------------- ### Load JavaScript bytecode content Source: https://openkraken.com/guide/native/widget Executes JavaScript provided as bytecode. ```dart Kraken kraken = Kraken( bundle: KrakenBundle.fromBytecode(bytecode), ); ``` -------------------------------- ### Manage State with Hooks Source: https://openkraken.com/guide/development/rax Use the useState hook to manage local component state in a Rax application. ```javascript import { useState } from 'rax'; function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return (

You clicked {count} times

); } ``` -------------------------------- ### Implement Custom UriParser Source: https://openkraken.com/guide/advanced/network-intercept Shows how to override the default URI resolution logic by extending the UriParser class. ```dart class MyUriParser extends UriParser { @override Uri resolve(Uri base, Uri relative) { Uri uri = super.resolve(base, relative); // custom parse uri. return uri; } } void main() { runApp(Kraken( uriParser: MyUriParser(), )); } ``` -------------------------------- ### Display an Image in Kraken Source: https://openkraken.com/guide/basic/multimedia Use the tag to render images. Kraken supports standard formats including JPEG, PNG, GIF, and WebP. ```jsx

``` -------------------------------- ### Load JavaScript string content Source: https://openkraken.com/guide/native/widget Executes JavaScript provided as a string. ```dart Kraken kraken = Kraken( bundle: KrakenBundle.fromContent('console.log(1)'), ); ``` -------------------------------- ### Android 环境集成与通信 Source: https://openkraken.com/guide/advanced/communicate-with-native 在 Java/Kotlin 环境中引入 SDK，通过 registerMethodCallHandler 注册回调或使用 invokeMethod 与 JS 通信。 ```kotlin import com.openkraken.kraken.Kraken; ``` ```kotlin class MainActivity: FlutterActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) var kraken = Kraken(flutterEngine) kraken.registerMethodCallHandler { call, result -> print("method " + call.method) // helloworld result.success("helloworld") } } override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } ``` ```kotlin kraken.invokeMethod("helloworld", "1234") ``` -------------------------------- ### Listen to gesture events Source: https://openkraken.com/guide/native/widget Configures a listener for interaction events like drag and touch. ```dart Kraken( GestureListener: gestureListener( onDrag: (GestureEvent gestureEvent) { if (gestureEvent.state == EVENT_STATE_START) { //... } else if (gestureEvent.state == EVENT_STATE_UPDATE) { //... } else if (gestureEvent.state == EVENT_STATE_END) { //... } }, onTouchStart: (TouchEvent touchEvent) { //... }, onTouchEnd: (TouchEvent touchEvent) { //... }, onTouchMove: (TouchEvent touchEvent) { //... } ), ) ``` -------------------------------- ### Enable Profile Mode via Flutter CLI Source: https://openkraken.com/guide/advanced/measure-performance Use the --profile flag when running the Flutter application to enable performance data collection. ```bash flutter run --profile ``` -------------------------------- ### 使用 HTML 标签搭建页面结构 Source: https://openkraken.com/guide/basic/style 使用原生 HTML 标签定义博客文章的基本布局结构。 ```html

Kraken 入门教程

2021-1-1

Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。

{/* 横向排版: 水平等间距 & 垂直居中 */}

{/* 横向排版: 换行 & 行间等间距 & 水平等间距 */}

{/* 纵向排版: 垂直等间距 & 水平居中 */}

{/* 横向排版: 子项宽度按比例拉伸 & 子项高度自动拉伸 */}

``` -------------------------------- ### 设置颜色与背景样式 Source: https://openkraken.com/guide/basic/color 展示如何通过 style 属性设置字体颜色、背景颜色以及背景图片。 ```javascript