Smart home control method and system based on applet

By using coroutines and JSBridge in applets to optimize data transmission of view layers and logic layers, the high development cost and poor user experience of traditional smart home control methods are solved, faster startup and switching speed is achieved, and improved The smoothness and user experience of smart home control.

CN119270670APending Publication Date: 2025-01-07HUIYUXING TECH TIANJIN CO LTD
View PDF 18 Cites 0 Cited by

Patent Information

Application Number
CN202411604180.4
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-11-12
Publication Date
2025-01-07

AI Technical Summary

Technical Problem

Traditional smart home control methods require the development of independent applications, which are costly and have poor user experience, and the communication delay of the view layer and logic layer of the mini program leads to slow loading and switching delays, affecting real-time and fluency.

Method used

During the cold and hot startup of the applet, the view layer thread status is monitored through coroutines, and data is passed using JSBridge to generate a rendering tree based on global variable updates. The rendering process of the view layer is optimized and unnecessary rendering tree reconstruction is reduced. , improve the page display speed.

Benefits of technology

It improves the cold start speed of the applet and the view layer switching speed, reduces latency, improves the user experience, optimizes the generation of rendering trees, and enhances the smoothness of smart home control.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119270670A_ABST
    Figure CN119270670A_ABST
Patent Text Reader

Abstract

The invention relates to the field of intelligent control, in particular to a smart home control method and system based on an applet. When the smart home control applet is cold-started, starting a view layer thread and a coroutine of the applet; the coroutine monitors the state of the view layer thread, after the view layer thread is initialized, the view layer thread is put into the data of the global variable from the coroutine to obtain initial data, and the view layer thread completes first rendering; after the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is located in the foreground, the logic layer thread sends data to a coroutine corresponding to the view layer thread through JSBridge, the coroutine corresponding to the view layer stores the sent data into a global variable, the generation of a rendering tree is determined according to the updating condition of the global variable, and the generation of the rendering tree is completed. When the view layer is switched to the foreground, generating the view layer according to the rendering tree; and after the view layer is switched to the foreground, when a user controls the home or updates the home state through an applet, the view layer thread and the logic layer thread transmit data through the JSBridge.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of intelligent control, and in particular to a smart home control method and system based on mini-programs. Background Art

[0002] Smart home is to improve the convenience, comfort and safety of family life through intelligent means. Smart home system usually includes a variety of devices and sensors, such as smart lights, thermostats, security cameras, etc. These devices are interconnected through the network to form an organic home environment. Users can remotely control the devices in their home through mobile devices or even voice commands to achieve home automation and intelligent linkage between devices. However, the control methods of traditional smart homes often require the development of independent applications, which has high development costs, and users need to install applications, which is cumbersome to operate and difficult to guarantee user experience. Mini programs can be used without installation, and are lightweight and ready to use. At the same time, they can interact with smart devices directly through mobile phones, simplifying the operation process and effectively improving user experience.

[0003] Since the view layer and logic layer of the mini program rely on the host development framework in the underlying architecture, the view layer and logic layer are isolated. The view layer renders the page through WebView, and the logic layer is processed by the JavaScript core. The communication between the view layer and the logic layer needs to be passed through asynchronous messaging. This process will produce a certain delay, which causes the mini program to load slowly. Moreover, when there are multiple view layers, there will also be delays in switching view layers. These have seriously affected the real-time and smoothness of smart home control using the mini program. Summary of the invention

[0004] In order to improve the fluency of smart home control using mini-programs, in a first aspect, the present invention provides a smart home control method based on mini-programs, the method comprising: When the smart home control applet is cold started, the view layer thread and the coroutine of the applet are started, and the coroutine comes from the host thread; the coroutine monitors the state of the view layer thread, and after the view layer thread is initialized, the view layer thread obtains the initial data from the data put into the global variable by the coroutine, and the view layer thread completes the first rendering; After the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is in the foreground, the logic layer thread sends data to the coroutine corresponding to the view layer thread through JSBridge. The coroutine corresponding to the view layer saves the sent data to the global variable and determines the generation of the rendering tree based on the update of the global variable. When the view layer is switched to the foreground, the view layer is generated based on the rendering tree. After the view layer switches to the foreground, when the user controls the home through the applet or updates the home status, the view layer thread and the logic layer thread transfer data through JSBridge.

[0005] In an optional embodiment, determining the generation of the rendering tree according to the update status of the global variable is specifically as follows: When global variables change, determine whether to trigger a change in the DOM tree structure based on the update of the global variables. If the DOM tree structure is triggered to change, regenerate the DOM tree and CSSOM tree based on the content in the queue and the update of the global variables, and generate a rendering tree; Otherwise, determine whether to trigger CSSOM tree changes based on the update of global variables. If so, put the update of global variables into the queue.

[0006] In an optional embodiment, generating a view layer according to the rendering tree is specifically: Determine whether there is content in the queue. If so, modify the rendering tree according to the content in the queue, and render the rendering tree to generate a view layer; if not, directly render the rendering tree to generate a view layer.

[0007] In an optional embodiment, the method further includes: When the applet switches to the background, the view layer thread is triggered to send the rendering tree of the view layer currently displayed by the applet to the logic layer thread; When the smart home control applet is hot started, the logic layer thread obtains data from the smart home terminal and regenerates the rendering tree based on the data of the smart home terminal and the rendering tree sent by the view layer. The logic layer thread renders and displays the rendering tree. After the logic layer thread displays the view layer, the logic layer thread sends the regenerated rendering tree to the view layer thread. When there is data update, the logic layer thread sends the data to the view layer thread, and the view layer thread regenerates the rendering tree and renders the rendering tree to generate the view layer.

[0008] In an optional embodiment, after the view layer thread sends the rendering tree of the view layer currently displayed by the applet to the logic layer thread, the view layer thread and the logic layer thread are frozen; When hot starting the smart home control applet, first unfreeze the logic layer thread, and then unfreeze the view layer thread after the logic layer thread finishes rendering the render tree. If the view layer thread is unfrozen successfully, the logic layer thread is notified that the view layer thread is unfrozen successfully; if the view layer thread fails to be unfrozen, the logic layer thread continues to generate the render tree and render the render tree until the view layer is unfrozen successfully.

[0009] In a second aspect of the present invention, a smart home control system based on a mini-program is provided, the system comprising: A cold start module is used to start the view layer thread and coroutine of the applet when cold starting the smart home control applet, wherein the coroutine comes from the host thread; the coroutine monitors the state of the view layer thread, and after the view layer thread is initialized, the view layer thread obtains the initial data from the data put into the global variable by the coroutine, and the view layer thread completes the first rendering; The switching module is used to: after the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is in the foreground, the logic layer thread sends data to the coroutine corresponding to the view layer thread through JSBridge, and the coroutine corresponding to the view layer saves the sent data to the global variable, determines the generation of the rendering tree according to the update of the global variable, and generates the view layer according to the rendering tree when the view layer is switched to the foreground; The control module is used for transferring data between the view layer thread and the logic layer thread through JSBridge when the user controls the home through the applet or updates the home status after the view layer switches to the foreground.

[0010] In an optional embodiment, determining the generation of the rendering tree according to the update status of the global variable is specifically as follows: When global variables change, determine whether to trigger a change in the DOM tree structure based on the update of the global variables. If the DOM tree structure is triggered to change, regenerate the DOM tree and CSSOM tree based on the content in the queue and the update of the global variables, and generate a rendering tree; Otherwise, determine whether to trigger CSSOM tree changes based on the update of global variables. If so, put the update of global variables into the queue.

[0011] In an optional embodiment, generating a view layer according to the rendering tree is specifically: Determine whether there is content in the queue. If so, modify the rendering tree according to the content in the queue, and render the rendering tree to generate a view layer; if not, directly render the rendering tree to generate a view layer.

[0012] In an optional embodiment, the system further comprises a hot start module; The hot start module is used to trigger the view layer thread to send the rendering tree of the view layer currently displayed by the mini program to the logic layer thread when the mini program switches to the background; When the smart home control applet is hot started, the logic layer thread obtains data from the smart home terminal and regenerates the rendering tree based on the data of the smart home terminal and the rendering tree sent by the view layer. The logic layer thread renders and displays the rendering tree. After the logic layer thread displays the view layer, the logic layer thread sends the regenerated rendering tree to the view layer thread. When there is data update, the logic layer thread sends the data to the view layer thread, and the view layer thread regenerates the rendering tree and renders the rendering tree to generate the view layer.

[0013] In an optional embodiment, after the view layer thread sends the rendering tree of the view layer currently displayed by the applet to the logic layer thread, the view layer thread and the logic layer thread are frozen; When hot starting the smart home control applet, first unfreeze the logic layer thread, and then unfreeze the view layer thread after the logic layer thread finishes rendering the render tree. If the view layer thread is unfrozen successfully, the logic layer thread is notified that the view layer thread is unfrozen successfully; if the view layer thread fails to be unfrozen, the logic layer thread continues to generate the render tree and render the render tree until the view layer is unfrozen successfully.

[0014] In a third aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the method described in the first aspect is implemented.

[0015] In the present invention, when the applet is cold started, the initial data of the view layer is sent to the view layer thread by a coroutine to complete the first rendering, thereby avoiding multiple interactions between the view layer and the logic layer and improving the speed of cold start; in addition, when the view layers are switched to each other, the coroutine corresponding to the view layer thread is used to receive the data sent by the logic layer thread and save it in a global variable, and when there is a data change, a new rendering tree is generated, so that when the view layer is switched to the foreground, the view layer is directly generated according to the rendering tree, which speeds up the generation speed of the view layer, reduces latency, and thus improves the user experience. In addition, the present invention further optimizes the generation of the rendering tree, reduces unnecessary rendering tree reconstruction, and can also improve the page display speed. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 This is a flow chart of Embodiment 1; Figure 2 The relationship between the view layer, the logic layer and the host in the prior art; Figure 3 This is a schematic diagram of the first rendering process of the mini program view layer; Figure 4 Schematic diagram of the applet of the present invention. DETAILED DESCRIPTION

[0017] In the following description, exemplary embodiments will be described by way of example with reference to the accompanying drawings, however, additional embodiments created by arbitrarily modifying or improving the exemplary embodiments to be described below based on the common knowledge of those skilled in the art without departing from the spirit of the present disclosure are applicable.

[0018] Figure 1 The first embodiment of the present invention is shown. In this embodiment, a smart home control method based on a mini-program is provided. The method includes: S1, when cold starting the smart home control applet, start the view layer thread and coroutine of the applet, the coroutine comes from the host thread; the coroutine monitors the state of the view layer thread, after the view layer thread is initialized, the view layer thread obtains the initial data from the data put into the global variable by the coroutine, and the view layer thread completes the first rendering; There are two ways to start a mini program: hot start and cold start. A hot start is to switch the mini program in the background to the foreground, which is visible to the user. A cold start is to open the mini program for the first time or reopen it after it is logged out or destroyed.

[0019] When the smart home control applet is cold started, the view layer thread and coroutine of the applet are started, wherein the coroutine comes from the host. For example, if the host application of a applet is APP1, APP1 manages the coroutine, wherein managing the coroutine includes but is not limited to starting, destroying, pausing, allocating resources, etc. of the coroutine. In one embodiment, the logic layer thread is also started. The applet includes a view layer thread and a logic layer thread, wherein the view layer thread is responsible for rendering the interface, one page corresponds to one view layer thread, and the logic layer thread is responsible for processing data and sending the data to the view layer thread, which is rendered by the view layer thread. In the prior art, the relationship between the view layer, the logic layer, and the host is as follows: Figure 2 As shown, any data transferred between the view layer and the logic layer must pass through the host, which results in slow speed and unsmooth mini programs.

[0020] In the prior art, the data interaction between the view layer thread and the logic layer thread during the first rendering of the view layer is complex and requires the host to transfer data between the view layer and the logic layer multiple times, which results in a time-consuming cold start process. In the present invention, when cold starting, the host will also start a coroutine for the view layer thread. The coroutine monitors the state of the view layer thread. When the view layer thread is initialized, the coroutine will obtain the data of the first rendering of the view layer thread from the logic layer thread and put it into a global variable. This global variable can be directly accessed by the view layer thread. Once the view layer thread is initialized, the initial data of the first rendering is immediately obtained from the global variable, and the rendering is completed using the initial data. Figure 3As shown. And the coroutine monitors the view layer thread, notifies the logic layer thread when the first rendering is completed, and the logic layer thread can send data to the view layer through JSBridge.

[0021] S2: After the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is in the foreground, the logic layer thread sends data to the coroutine corresponding to the view layer thread through JSBridge. The coroutine corresponding to the view layer saves the sent data to the global variable, determines the generation of the rendering tree according to the update of the global variable, and generates the view layer according to the rendering tree when the view layer is switched to the foreground; After the view layer thread has finished rendering for the first time, the user may switch the view layer to the background when operating the mini program, for example, the user switches to another view layer of the mini program. In this case, even if the view layer thread is in the background, the mini program itself remains in the foreground. The logic layer thread of the mini program sends data to the coroutine corresponding to the view layer thread through JSBridge. JSBridge is a data communication bridge located in the host. The coroutine corresponding to the view layer thread receives the data sent by the logic layer thread and saves the data to global variables. These global variables store the status data that needs to be updated, such as the status change of home appliances or other content that needs to be updated. The coroutine will decide whether to generate or update the rendering tree based on the changes in the global variables. The rendering tree is a data structure used to display the interface, which defines the layout and style of the content displayed in the view layer. When the view layer switches back to the foreground, that is, when the user re-enters the page, the mini program will render the view layer based on the already generated rendering tree and present the latest interface content to the user. This avoids the process of obtaining data from the logic layer thread and regenerating the rendering tree for rendering after the user switches, thereby improving the response speed.

[0022] During rendering, if the DOM tree structure changes, the CSSOM tree will generally change as well. However, if the CSSOM tree changes, the DOM tree does not necessarily change. In generating the rendering tree, it is generated based on the DOM tree and the CSSOM tree. In order to avoid frequent generation of the rendering tree, in an optional embodiment, the generation of the rendering tree is determined based on the update status of the global variable, specifically: When global variables change, determine whether to trigger a change in the DOM tree structure based on the update of the global variables. If the DOM tree structure is triggered to change, regenerate the DOM tree and CSSOM tree based on the content in the queue and the update of the global variables, and generate a rendering tree; Otherwise, determine whether to trigger CSSOM tree changes based on the update of global variables. If so, put the update of global variables into the queue.

[0023] Monitor whether global variables have changed. If the change of global variables involves changes in the DOM tree structure, it will trigger the regeneration of the DOM tree and CSSOM tree according to the content in the queue and the update of global variables, and generate a rendering tree to re-render the page. DOM and CSSOM are the basis for building a rendering tree. When the DOM structure changes, CSSOM may also need to be re-matched and generated to ensure that the style and content are consistent. If the change of global variables does not affect the DOM structure, but only involves changes in style, such as color, layout, etc., the system does not need to rebuild the DOM tree. In this case, determine whether the CSSOM tree needs to be updated. If necessary, put the update operations of these global variables into the queue for batch processing later. In this way, multiple style updates can be merged and executed, and they will be put together with the DOM tree reconstruction to reduce the performance loss caused by frequent updates. The queue only contains data updates that do not cause changes in the DOM tree structure. These updates mainly involve changes in CSS styles, such as fonts, colors, margins, etc. For example, a switch in the applet is red to indicate that the smart home device is off, and blue to indicate that it is on. If the view layer that displays the switch is switched to the background and the applet is in the foreground, when the state of the smart home device changes, the color of the switch in the global variable will change from red to blue. Since only the style of the switch is changed in the view layer and the DOM tree is not changed, the global variable will be put into the queue. If another global variable causes the DOM tree to change, the DOM tree, CSSOM tree, and rendering tree will be regenerated based on the global variable that caused the DOM tree change and the global variable in the queue. In this way, when the user switches the view layer to the foreground, rendering is performed directly based on the rendering tree, which increases the speed.

[0024] However, when there is content in the queue and the DOM tree reconstruction has not been triggered, the generated rendering tree is caused by the previous DOM tree reconstruction, which will make some states unable to be displayed in time. To prevent this from happening, when the view layer switches to the foreground, it is determined whether there is content in the queue. If so, the rendering tree is modified according to the content in the queue, and the rendering tree is rendered to generate the view layer; if not, the rendering tree is directly rendered to generate the view layer.

[0025] S3, after the view layer switches to the foreground, when the user controls the home through the mini program or updates the home status, the view layer thread and the logic layer thread transfer data through JSBridge.

[0026] After the view layer switches to the foreground, the user can perform operations in the applet, such as controlling smart home devices such as turning lights on and off, adjusting the temperature, etc., or checking the latest status of the device, such as whether the current light is on or off, what the temperature is, etc. The view layer and the logic layer exchange data through JSBridge, so that the user's instructions can be executed and the latest status of the device can be updated to the interface in a timely manner.

[0027] In the prior art, when the applet is switched to the background, both the view layer thread and the logic layer thread are in a suspended state. When the applet is switched to the foreground, the logic layer obtains the status of the smart home device through the network, and then sends the data to the view layer thread through JSBridge, and then displays it. This process is time-consuming. In order to improve the response speed, in one embodiment, the method further includes: When the applet switches to the background, the view layer thread is triggered to send the rendering tree of the view layer currently displayed by the applet to the logic layer thread; When the smart home control applet is hot started, the logic layer thread obtains data from the smart home terminal and regenerates the rendering tree based on the data of the smart home terminal and the rendering tree sent by the view layer. The logic layer thread renders and displays the rendering tree. After the logic layer thread displays the view layer, the logic layer thread sends the regenerated rendering tree to the view layer thread. When there is data update, the logic layer thread sends the data to the view layer thread, and the view layer thread regenerates the rendering tree and renders the rendering tree to generate the view layer.

[0028] When the user switches the applet to the background, the view layer thread sends the currently displayed rendering tree to the logic layer thread. When the user hot-starts the applet, the logic layer thread obtains the latest control data from the smart home terminal. Based on the terminal data and the rendering tree sent by the view layer, the logic layer thread regenerates a rendering tree suitable for the current state. After the generation is completed, the logic layer immediately renders and displays the rendering tree, avoiding the data transmission between the logic layer and the view layer threads. The rendering tree is directly generated and displayed by the logic layer, which improves the response speed. After the logic layer thread renders and displays the view, the regenerated rendering tree is sent back to the view layer thread to ensure that the view layer can synchronize and update the rendering status of the logic layer in time. When the data in the applet changes, the logic layer thread sends the updated data to the view layer thread. The view layer thread regenerates the rendering tree based on the new data received, renders the rendering tree, and generates the view layer, ensuring that the view displayed by the applet is always kept up to date. Figure 4 A schematic diagram of a smart home control applet is shown.

[0029] In an optional embodiment, after the view layer thread sends the rendering tree of the view layer currently displayed by the applet to the logic layer thread, the view layer thread and the logic layer thread are frozen; When hot starting the smart home control applet, first unfreeze the logic layer thread, and then unfreeze the view layer thread after the logic layer thread finishes rendering the render tree. If the view layer thread is unfrozen successfully, the logic layer thread is notified that the view layer thread is unfrozen successfully; if the view layer thread fails to be unfrozen, the logic layer thread continues to generate the render tree and render the render tree until the view layer is unfrozen successfully.

[0030] When the mini program switches to the background, the view layer will pass the rendering tree to the logic layer. Then, the view layer and the logic layer will be temporarily frozen and stop executing, reducing the use of system resources. When the mini program is hot-started, the logic layer thread is first unfrozen to allow the logic layer to start processing the data and logic of the rendering tree. After the logic layer completes the processing of the rendering tree and displays it, the view layer thread is unfrozen. Once the view layer thread is successfully unfrozen, it will notify the logic layer thread that the view layer can render the interface normally, and the two will transfer data through JSBridge. If the view layer thread fails in the first attempt to unfreeze, the logic layer will take over and continue to generate the rendering tree and try to render until the view layer is successfully unfrozen. Even if the view layer cannot be displayed temporarily, the logic layer can still keep the mini program data updated.

[0031] In a second aspect of the present invention, a smart home control system based on a mini-program is provided, the system comprising: A cold start module is used to start the view layer thread and coroutine of the applet when cold starting the smart home control applet, wherein the coroutine comes from the host thread; the coroutine monitors the state of the view layer thread, and after the view layer thread is initialized, the view layer thread obtains the initial data from the data put into the global variable by the coroutine, and the view layer thread completes the first rendering; The switching module is used to: after the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is in the foreground, the logic layer thread sends data to the coroutine corresponding to the view layer thread through JSBridge, and the coroutine corresponding to the view layer saves the sent data to the global variable, determines the generation of the rendering tree according to the update of the global variable, and generates the view layer according to the rendering tree when the view layer is switched to the foreground; The control module is used for transferring data between the view layer thread and the logic layer thread through JSBridge when the user controls the home through the applet or updates the home status after the view layer switches to the foreground.

[0032] In an optional embodiment, determining the generation of the rendering tree according to the update status of the global variable is specifically as follows: When global variables change, determine whether to trigger a change in the DOM tree structure based on the update of the global variables. If the DOM tree structure is triggered to change, regenerate the DOM tree and CSSOM tree based on the content in the queue and the update of the global variables, and generate a rendering tree; Otherwise, determine whether to trigger CSSOM tree changes based on the update of global variables. If so, put the update of global variables into the queue.

[0033] In an optional embodiment, generating a view layer according to the rendering tree is specifically: Determine whether there is content in the queue. If so, modify the rendering tree according to the content in the queue, and render the rendering tree to generate a view layer; if not, directly render the rendering tree to generate a view layer.

[0034] In an optional embodiment, the system further comprises a hot start module; The hot start module is used to trigger the view layer thread to send the rendering tree of the view layer currently displayed by the mini program to the logic layer thread when the mini program switches to the background; When the smart home control applet is hot started, the logic layer thread obtains data from the smart home terminal and regenerates the rendering tree based on the data of the smart home terminal and the rendering tree sent by the view layer. The logic layer thread renders and displays the rendering tree. After the logic layer thread displays the view layer, the logic layer thread sends the regenerated rendering tree to the view layer thread. When there is data update, the logic layer thread sends the data to the view layer thread, and the view layer thread regenerates the rendering tree and renders the rendering tree to generate the view layer.

[0035] In an optional embodiment, after the view layer thread sends the rendering tree of the view layer currently displayed by the applet to the logic layer thread, the view layer thread and the logic layer thread are frozen; When hot starting the smart home control applet, first unfreeze the logic layer thread, and then unfreeze the view layer thread after the logic layer thread finishes rendering the render tree. If the view layer thread is unfrozen successfully, the logic layer thread is notified that the view layer thread is unfrozen successfully; if the view layer thread fails to be unfrozen, the logic layer thread continues to generate the render tree and render the render tree until the view layer is unfrozen successfully.

[0036] The embodiments of the present invention may also be implemented by providing software (program) for performing the functions of the above-described embodiments to a system or device via a network or various storage media, and a computer or a central processing unit (CPU) or a microprocessing unit (MPU) of the system or device reads and executes the program.

[0037] While the present invention has been described with reference to exemplary embodiments, it is to be understood that the invention is not limited to the disclosed exemplary embodiments.The scope of the following claims is to be accorded the broadest interpretation so as to encompass all such modifications and equivalent structures and functions.

[0038] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they are aware of the basic creative concepts. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present application. Obviously, those skilled in the art may make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A smart home control method based on applet, characterized in that: The method comprises: When the smart home control applet is cold started, the view layer thread and the coroutine of the applet are started, and the coroutine comes from the host thread; the coroutine monitors the state of the view layer thread, and after the view layer thread is initialized, the view layer thread obtains the initial data from the data put into the global variable by the coroutine, and the view layer thread completes the first rendering; After the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is in the foreground, the logic layer thread sends data to the coroutine corresponding to the view layer thread through JSBridge. The coroutine corresponding to the view layer saves the sent data to the global variable and determines the generation of the rendering tree based on the update of the global variable. When the view layer is switched to the foreground, the view layer is generated based on the rendering tree. After the view layer switches to the foreground, when the user controls the home through the applet or updates the home status, the view layer thread and the logic layer thread transfer data through JSBridge.

2. The method according to claim 1, characterized in that The generation of the rendering tree is determined according to the update status of the global variables, specifically: When global variables change, determine whether to trigger a change in the DOM tree structure based on the update of the global variables. If the DOM tree structure is triggered to change, regenerate the DOM tree and CSSOM tree based on the content in the queue and the update of the global variables, and generate a rendering tree; Otherwise, determine whether to trigger CSSOM tree changes based on the update of global variables. If so, put the update of global variables into the queue.

3. The method according to claim 2, characterized in that The generating of the view layer according to the rendering tree is specifically as follows: Determine whether there is content in the queue. If so, modify the rendering tree according to the content in the queue, and render the rendering tree to generate a view layer; if not, directly render the rendering tree to generate a view layer.

4. The method according to claim 1, characterized in that The method further comprises: When the applet switches to the background, the view layer thread is triggered to send the rendering tree of the view layer currently displayed by the applet to the logic layer thread; When the smart home control applet is hot started, the logic layer thread obtains data from the smart home terminal and regenerates the rendering tree based on the data of the smart home terminal and the rendering tree sent by the view layer. The logic layer thread renders and displays the rendering tree. After the logic layer thread displays the view layer, the logic layer thread sends the regenerated rendering tree to the view layer thread. When there is data update, the logic layer thread sends the data to the view layer thread, and the view layer thread regenerates the rendering tree and renders the rendering tree to generate the view layer.

5. The method according to claim 4, characterized in that After the view layer thread sends the rendering tree of the view layer currently displayed by the applet to the logic layer thread, the view layer thread and the logic layer thread are frozen; When hot starting the smart home control applet, first unfreeze the logic layer thread, and then unfreeze the view layer thread after the logic layer thread finishes rendering the render tree. If the view layer thread is unfrozen successfully, the logic layer thread is notified that the view layer thread is unfrozen successfully; if the view layer thread fails to be unfrozen, the logic layer thread continues to generate the render tree and render the render tree until the view layer is unfrozen successfully.

6. A smart home control system based on applet, characterized in that: The system comprises: A cold start module is used to start the view layer thread and coroutine of the applet when cold starting the smart home control applet, wherein the coroutine comes from the host thread; the coroutine monitors the state of the view layer thread, and after the view layer thread is initialized, the view layer thread obtains the initial data from the data put into the global variable by the coroutine, and the view layer thread completes the first rendering; The switching module is used to: after the first rendering of the view layer thread is completed, if the view layer is switched to the background and the applet is in the foreground, the logic layer thread sends data to the coroutine corresponding to the view layer thread through JSBridge, and the coroutine corresponding to the view layer saves the sent data to the global variable, determines the generation of the rendering tree according to the update of the global variable, and generates the view layer according to the rendering tree when the view layer is switched to the foreground; The control module is used for transferring data between the view layer thread and the logic layer thread through JSBridge when the user controls the home through the applet or updates the home status after the view layer switches to the foreground.

7. The system according to claim 6, characterized in that The generation of the rendering tree is determined according to the update status of the global variables, specifically: When global variables change, determine whether to trigger a change in the DOM tree structure based on the update of the global variables. If the DOM tree structure is triggered to change, regenerate the DOM tree and CSSOM tree based on the content in the queue and the update of the global variables, and generate a rendering tree; Otherwise, determine whether to trigger CSSOM tree changes based on the update of global variables. If so, put the update of global variables into the queue.

8. The system according to claim 7, characterized in that The generating of the view layer according to the rendering tree is specifically as follows: Determine whether there is content in the queue. If so, modify the rendering tree according to the content in the queue, and render the rendering tree to generate a view layer; if not, directly render the rendering tree to generate a view layer.

9. The system according to claim 6, characterized in that The system also includes a hot start module; The hot start module is used to trigger the view layer thread to send the rendering tree of the view layer currently displayed by the mini program to the logic layer thread when the mini program switches to the background; When the smart home control applet is hot started, the logic layer thread obtains data from the smart home terminal and regenerates the rendering tree based on the data of the smart home terminal and the rendering tree sent by the view layer. The logic layer thread renders and displays the rendering tree. After the logic layer thread displays the view layer, the logic layer thread sends the regenerated rendering tree to the view layer thread. When there is data update, the logic layer thread sends the data to the view layer thread, and the view layer thread regenerates the rendering tree and renders the rendering tree to generate the view layer.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the computer program implements the method according to any one of claims 1 to 5.

Citation Information

Patent Citations

  • Page rendering method and device based on applet, equipment and storage medium

    CN112861057A

  • Applet starting method and device, computer equipment and storage medium

    CN113448641A

  • Processing method and device for converting applet into application program

    CN114327446A

  • Page processing method and device

    CN115544409A

  • Small program running method and device, equipment and storage medium

    CN117492906A