Android WebView 中的 Sencha Touch 2 白屏

Question

我正在将 JavaScript 应用程序从 Sencha Touch 1.x 迁移到 Sencha Touch 2.x。它在本机 Android 应用程序内的 WebView 中被指定为运行。该应用程序适用于 Sencha Touch 1.x。同时，在 Sencha Touch 2.x 上进行了大量重构和调试，使其成为运行。当前使用的 Sencha Touch 版本是 2.4.2.

我在桌面版 Firefox 中做了一些测试。它基本上成功了，但是测试是有限的，因为 Sencha Touch 应用程序高度依赖于本机 Android 应用程序通过 JS 接口提供的几个对象和方法。

现在，当谈到运行在 Android WebView 中设置它时，我遇到了一个奇怪的问题：启动和渲染后，我只能看到一个白屏，而所有 MVC 依赖项都已加载，并且 Ext.application 中的 launch() 被正确触发。控制台中根本没有 JavaScript 错误，所有 Ext classes/objects/methods 都可用。

这是我的 Ext.application 块的基本设置：

Ext.application({
    name: 'MyApp',
    models: [
        'TestModel',
        'UserModel',
        'HauptmenueModel',
        /* ... */
    ],
    controllers: [
        'MyController'
    ],
    views: [
        'Benutzer',
        'Startseite',
        /* ... */
    ],
    stores: [
        'TestStore',
        'UserStore',
        'HauptmenueStore',
        /* ... */
    ],
    launch: function () {
        Ext.Viewport.add(Ext.create('MyApp.view.Startseite'));

        console.log(document.body.innerHTML.length);
    }
});

视图（例如 MyApp.view.Startseite 视图）的定义非常传统：

Ext.define('MyApp.view.Startseite', {
    extend: 'Ext.Panel',
    config: {
        id: 'Startseite',
        layout: 'card',
        items: [
            /* ... */
        ]
    },
    /* ... */
});

有趣的是：Sencha Touch 确实根据我通过 Ext.Viewport.add() 加载的视图生成了很多 HTML 内容，我可以从 innerHTML.length 推断出我是记录。但是 WebView 中什么也没有显示。如果我创建不同的视图并通过 Ext.Viewport.add() 加载它，但视口保持白色，则大小会随之改变。

这可能是什么原因？我也非常感谢有关调试此问题或以某种方式隔离此问题的任何提示。

Answer 1

一个可能的原因可能是 WebView 的布局本身。请检查 WebView 的布局高度。将其设置为 MATCH_PARENT 应该可以完成工作。

It is recommended to set the WebView layout height to a fixed value or to MATCH_PARENT instead of using WRAP_CONTENT.

请参阅此处的 布局大小 部分： http://developer.android.com/reference/android/webkit/WebView.html

Android WebView 中的 Sencha Touch 2 白屏

Sencha Touch 2 White screen in Android WebView

android

webview

sencha-touch

android-webview

sencha-touch-2