Question

当我创建基本应用程序并使用#include <pebble.h> static Window *s_main_window; static TextLayer *s_time_layer; static TextLayer *s_date_layer; static GFont s_time_font; static BitmapLayer *s_background_layer; static GBitmap *s_background_bitmap; static void update_time() { // Get a tm structure time_t temp = time(NULL); struct tm *tick_time = localtime(&temp); // Create a long-lived buffer static char buffer[] = ">00:00"; // Write the current hours and minutes into the buffer if(clock_is_24h_style() == true) { //Use 2h hour format strftime(buffer, sizeof(">00:00"), ">%H:%M", tick_time); } else { //Use 12 hour format strftime(buffer, sizeof(">00:00"), ">%I:%M", tick_time); } // Display this time on the TextLayer text_layer_set_text(s_time_layer, buffer); } static void update_date(){ time_t temp = time(NULL); struct tm *tick_time = localtime(&temp); static char buffer[] = ">00/00/00"; strftime(buffer, sizeof(">00/00/00"), ">%D", tick_time); text_layer_set_text(s_date_layer, buffer); } static void main_window_load(Window *window) { //Create Gbitmap, then set to created bitmap layer s_background_bitmap = gbitmap_create_with_resource(RESOURCE_ID_lenny); s_background_layer = bitmap_layer_create(GRect(0, 0, 144, 168)); bitmap_layer_set_bitmap(s_background_layer, s_background_bitmap); layer_add_child(window_get_root_layer(window), bitmap_layer_get_layer(s_background_layer)); // Create time TextLayer s_time_layer = text_layer_create(GRect(5, 90, 144, 50)); text_layer_set_background_color(s_time_layer, GColorClear); text_layer_set_text_color(s_time_layer, GColorBlack); text_layer_set_text(s_time_layer, ">00:00"); //Create date TextLayer s_date_layer = text_layer_create(GRect(5, 115, 144, 50)); text_layer_set_background_color(s_date_layer, GColorClear); text_layer_set_text_color(s_date_layer, GColorBlack); text_layer_set_text(s_date_layer, ">00/00/00"); //Create GFont s_time_font = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_arial25)); //Apply to TextLayer text_layer_set_font(s_time_layer, s_time_font); text_layer_set_text_alignment(s_time_layer, GTextAlignmentLeft); text_layer_set_font(s_date_layer, s_time_font); text_layer_set_text_alignment(s_date_layer, GTextAlignmentLeft); // Add it as a child layer to the Window's root layer layer_add_child(window_get_root_layer(window), text_layer_get_layer(s_time_layer)); layer_add_child(window_get_root_layer(window), text_layer_get_layer(s_date_layer)); // Make sure the time is displayed from the start update_time(); update_date(); } static void main_window_unload(Window *window) { //Unload GFont fonts_unload_custom_font(s_time_font); // Destroy TextLayer text_layer_destroy(s_time_layer); //Destroy Gbitmap gbitmap_destroy(s_background_bitmap); //Destroy BitmapLayer bitmap_layer_destroy(s_background_layer); //Destroy datelayer text_layer_destroy(s_date_layer); } static void tick_handler(struct tm *tick_time, TimeUnits units_changed) { update_time(); } static void tick_handler_date(struct tm *tick_time, TimeUnits units_changed){ update_date(); } static void init() { // Create main Window element and assign to pointer s_main_window = window_create(); // Set handlers to manage the elements inside the Window window_set_window_handlers(s_main_window, (WindowHandlers) { .load = main_window_load, .unload = main_window_unload }); // Show the Window on the watch, with animated=true window_stack_push(s_main_window, true); // Register with TickTimerService tick_timer_service_subscribe(MINUTE_UNIT, tick_handler); tick_timer_service_subscribe(DAY_UNIT, tick_handler_date); } static void deinit() { // Destroy Window window_destroy(s_main_window); } int main(void) { init(); app_event_loop(); deinit(); }命令对其进行初始化时，它会向我显示一个空白窗口，稍后会加载内容。

在内容完全加载后，应该使用哪个事件和哪个对象来显示窗口？

electron对象上的

did-finish-load？或者也许window.webContent？或者别的什么？

app.js ：

dom-ready

Answer 1

好的，我自己找到了答案。正确的事件是did-finish-load，应该像这样使用：

var Window = new BrowserWindow({ width: 600, height: 400, show: false });
Window.loadUrl('file://somefile.html');
Window.webContents.on('did-finish-load', function() {
    Window.show();
});

对于找到这个答案的人 - 在这里你可以查看官方电子文档on this topic：

在加载页面时，如果窗口尚未显示，则渲染器进程首次呈现页面时将发出准备好显示的事件。在此事件之后显示窗口将没有视觉效果：

let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
  win.show()
})

Answer 2

这种方式有效，但最佳做法是使用API文档中声明的ready-to-show：

在加载页面时，如果窗口尚未显示，则渲染器进程首次呈现页面时将发出准备好显示的事件。在此事件之后显示窗口将没有视觉效果：

请注意：

此事件通常在did-finish-load事件之后发出，但对于具有许多远程资源的页面，可能会在did-finish-load事件之前发出。

最后，您应该更新背景颜色以匹配窗口的内容背景。这是一个例子：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false, backgroundColor: '#420024'})
win.once('ready-to-show', () => {
  win.show()
})

您还可以添加快速css淡入淡出以减少内容捕捉。只需添加你的css并将.ui.container设置为你的根DOM元素所在的任何类。请注意，如果将其设置为<body/>

，则无效

  @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .ui.container {
    animation: fadein 0.420s;
  }

请参阅以下链接以获取更多信息： https://electron.atom.io/docs/all/#using-ready-to-show-event https://www.christianengvall.se/electron-white-screen-app-startup/

Answer 3

您可以尝试在不可见的iframe中加载内容，然后创建窗口并将内容从iframe传输到窗口。

完全加载后显示窗口

3 个答案: