WO2022078199A1 - 小程序控制方法、装置、设备及存储介质 - Google Patents

小程序控制方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2022078199A1
WO2022078199A1 PCT/CN2021/120995 CN2021120995W WO2022078199A1 WO 2022078199 A1 WO2022078199 A1 WO 2022078199A1 CN 2021120995 W CN2021120995 W CN 2021120995W WO 2022078199 A1 WO2022078199 A1 WO 2022078199A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
applet
selection
response
page
Prior art date
Application number
PCT/CN2021/120995
Other languages
English (en)
French (fr)
Inventor
李红波
Original Assignee
腾讯科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 腾讯科技（深圳）有限公司 filed Critical 腾讯科技（深圳）有限公司
Publication of WO2022078199A1 publication Critical patent/WO2022078199A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Definitions

  • the embodiments of the present application relate to the field of human-computer interaction, and in particular, to a small program control method, apparatus, device, and storage medium.
  • the applet is a program that depends on the host program to run.
  • the host program can run one or more applet programs.
  • the applet is designed for the touch screen usage scenario of the smartphone, so the applet on the vehicle terminal also adopts the human-computer interaction method based on the touch screen.
  • embodiments of the present application provide a method, apparatus, device, and storage medium for controlling an applet.
  • the technical solution is as follows:
  • a method for controlling an applet is provided, the method is executed by a terminal having a non-touch screen type hardware input peripheral, and the method includes:
  • the applet page includes at least two components
  • the selected first component of the at least two components is displayed as a focus selection style, and the focus selection style is used to indicate that the first component is selected The preselected state of the focus selection;
  • the first component In response to a confirmation operation triggered on the hardware input peripheral, the first component is set to a selected state, and/or a response event corresponding to the first component is executed.
  • an applet control device is provided, the applet control device is connected with a non-touch screen type hardware input peripheral, and the device includes:
  • a display module which displays an applet page, the applet page includes at least two components;
  • an interaction module configured to display a selected first component of the at least two components as a focus selection style in response to a selection operation triggered on the hardware input peripheral, and the focus selection style is used to indicate the first component A component is in a preselected state selected by the selection focus; in response to a confirmation operation triggered on the hardware input peripheral, the first component is set to a selected state, and/or a response event corresponding to the first component is executed.
  • an applet control method is provided, the method is executed by a terminal having a control chip, a display screen connected to the control chip, and a non-touch screen type hardware input peripheral, the method include:
  • the control chip controls the display screen to display an applet page, and the applet page includes at least two components;
  • control chip controls the display screen to display the selected first component of the at least two components as a focus selection style, and the focus selection The style is used to indicate that the first component is in a preselected state selected by the selection focus;
  • control chip In the case of receiving the confirmation event reported by the hardware input peripheral, the control chip sets the first component to a selected state, and/or executes a response event corresponding to the first component.
  • the hardware input peripheral includes a center console button of the terminal, and the center console button supports rotation control, toggle control, and push control;
  • Described selection event is the event that described center console button reports when receiving rotation operation; And/or, described selection event is the event that described center console button reports when receiving toggle operation;
  • the confirmation event is an event reported by the center console button when a pressing operation is received.
  • a terminal includes: a control chip, a display screen connected to the control chip, and a non-touch screen type hardware input peripheral;
  • the display screen is used to display the applet page under the control of the control chip, and the applet page includes at least two components;
  • the hardware input peripheral is used to report a selection event to the control chip in response to a selection operation, and to report a confirmation event to the control chip in response to a confirmation operation;
  • the control chip is configured to, when receiving the selection event, control the display screen to display the selected first component of the at least two components as a focus selection style, and the focus selection style is used for indicating that the first component is in a preselected state selected by the selection focus;
  • the control chip is further configured to, when receiving the confirmation event, set the first component to a selected state according to the confirmation operation, and/or execute a response event corresponding to the first component.
  • the hardware input peripheral includes a center console button of the terminal, and the center console button supports rotation control, toggle control, and push control;
  • the center console button is used to perform at least one of the following steps:
  • the confirmation event is reported when a press operation is received.
  • a terminal includes a memory and a processor
  • a computer program is stored in the memory, and the computer program is loaded and executed by the processor to implement the applet control method as described above.
  • a computer-readable storage medium where a computer program is stored in the storage medium, and the computer program is loaded and executed by a processor to implement the above-mentioned applet control method .
  • a computer program product or computer program comprising a computer program.
  • the processor of the computer device executes the above-mentioned computer program, so that the above-mentioned computer device executes the applet control method described above.
  • a control chip includes a programmable logic circuit and/or program instructions, which are used to implement the above-mentioned applet control method when the control chip is running .
  • the operation interaction mode of the touch screen is transformed into the operation interaction mode of the physical buttons, so as to realize the operation interaction mode of the terminal.
  • the security control of the applet can be adapted to the use of all the applet at the level of the applet platform on the terminal without a touch screen without the need for the developers of the applet to modify the applet to specific specifications, providing a low-cost solution.
  • the hardware input peripheral when the hardware input peripheral is set on the center console or steering wheel of the car, since the user can semi-blind or blindly operate the applet in the process of using the hardware input peripheral, the user will focus more on the front. on the road. Therefore, it can provide the driver with a safer operation mode of the vehicle and the machine.
  • FIG. 1 is a schematic diagram of a scenario of a terminal-based applet control method provided by an embodiment of the present application
  • FIG. 2 is a schematic diagram of a terminal provided by an embodiment of the present application.
  • FIG. 3 is a block diagram of the relationship between a host program and an applet provided by an embodiment of the present application
  • FIG. 4 is a flowchart of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 5 is a flowchart of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 6 is an interface diagram of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 7 is an interface diagram of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 8 is an interface diagram of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 9 is a flowchart of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 10 is a flowchart of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 11 is a flowchart of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 12 is a flowchart of a terminal-based applet control method provided by an embodiment of the present application.
  • FIG. 13 is a block diagram of an applet control device provided by an embodiment of the present application.
  • FIG. 14 is a block diagram of a terminal provided by an embodiment of the present application.
  • FIG. 15 is a block diagram of a terminal provided by an embodiment of the present application.
  • an applet page 120 is displayed on the terminal 100 , and a plurality of components with interactive capabilities are displayed on the applet page 120 , such as multiple labels “ranking”, “recommendation”, “ranking”, “ My” and icon entrances "Beijing Cuisine” and "Chuanxiang Cuisine”.
  • the user can control the selected focus to select a certain component on the applet page 120, and the selected component will be displayed as the focus selected state, which is used to indicate that the component is in the selected focus
  • the selected preselected state For example, a focus check box is displayed around the selected component.
  • the confirmation button 232 on the terminal 100 the selected component is set to the selected state, and the response function corresponding to the selected component is triggered; when the user presses the back button 232 on the terminal 100, the back to the previous page is triggered or close the applet.
  • the above-mentioned physical knob, confirmation button and back button are all hardware input peripherals of non-touch screen.
  • FIG. 2 shows a structural block diagram of a terminal 100 provided by an exemplary embodiment of the present application.
  • the terminal 100 may be a vehicle terminal, a smart home control center, a smart speaker, a smart refrigerator, a smart washing machine, a smart robot, and the like.
  • the terminal 100 includes: at least one processor 210 , memory 250 , at least one network interface 220 and user interface 230 .
  • the various components in server 200 are coupled together by bus system 240 . It will be appreciated that the bus system 240 is used to implement connection communication between these components.
  • the bus system 240 also includes a power bus, a control bus and a status signal bus. However, for clarity of illustration, the various buses are labeled as bus system 240 in FIG. 2 .
  • the processor 210 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP, Digital Signal Processor), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where a general-purpose processor may be a microprocessor or any conventional processor or the like.
  • DSP Digital Signal Processor
  • User interface 230 includes one or more output devices that enable presentation of media content.
  • the output device includes: a display screen 231 , and hardware input peripherals 232 and/or 233 .
  • the display screen 231 may be a touch screen or a non-touch screen.
  • the hardware input peripherals 232 and/or 233 include at least one of a hardware knob, a hardware dial, a hardware touchpad and a hardware button.
  • the hardware input peripherals 232 and/or 233 include a hardware knob for triggering a select operation, a confirm button for triggering a confirm operation, and a back button for triggering a back operation.
  • a hardware knob for triggering selection operations can also be implemented as a hardware dial or a hardware touchpad instead.
  • Hardware input peripherals 232 and 233 include at least one of center console buttons 232 and steering wheel buttons 233 .
  • there is a center console button 232 that supports multiple control functions the center console button 232 simultaneously supporting at least one of rotary control, dial control, touchpad control, and button control.
  • there is a steering wheel button 233 that supports multiple control functions and the steering wheel button 233 simultaneously supports at least one of rotary control, dial control, touchpad control and button control, for example, the steering wheel button 233 includes a volume adjustment button , cruise control switch, function switch button, exit button, shift paddles, etc.
  • the hardware input peripherals 232 and/or 233 refer to non-touch screen input peripherals, or input peripherals using physical input, or input peripherals using mechanical input or electromechanical input.
  • electromechanical input refers to the combination of mechanical and electrical input, also known as semi-mechanical.
  • Memory 250 may be removable, non-removable, or a combination thereof.
  • Exemplary hardware devices include solid state memory, hard drives, optical drives, and the like.
  • Memory 250 optionally includes one or more storage devices that are physically remote from processor 210 .
  • Memory 250 includes volatile memory or non-volatile memory, and may also include both volatile and non-volatile memory.
  • the non-volatile memory may be a read-only memory (ROM, Read Only Memory), and the volatile memory may be a random access memory (RAM, Random Access Memory).
  • ROM read-only memory
  • RAM random access memory
  • the memory 250 described in the embodiments of the present application is intended to include any suitable type of memory.
  • memory 250 is capable of storing data to support various operations, examples of which include programs, modules, and data structures, or subsets or supersets thereof, as exemplified below.
  • the operating system 251 includes system programs for processing various basic system services and performing hardware-related tasks, such as framework layer, core library layer, driver layer, etc., for implementing various basic services and processing hardware-based tasks.
  • the operating system 251 may be various vehicle operating systems, and the specific type of the vehicle operating system is not limited.
  • a host program 252 runs in the operating system 251 .
  • a native application 253 is also installed and run in the operating system 251 .
  • the host program 252 is used to provide a running environment of the applet, and one or more applet programs, such as applet 1 and applet 2, run in the host program 252 . No matter what kind of vehicle operating system it is, as long as the host program 252 runs in the vehicle operating system, the applet can depend on the host program 252 to run, and the host program 252 is also called the applet engine.
  • the host program 252 is an application program that carries an applet, and provides an environment for the realization of the applet.
  • Host program 252 is a native application.
  • Native applications are applications that can run directly on operating system 252 .
  • the host program 252 may be a social application, a dedicated application specifically supporting the applet 252, a file management application, a mail application, a game application, a map application, a navigation application, and the like.
  • Social applications include instant messaging applications, SNS (Social Network Service, social networking site) applications or live broadcast applications.
  • An applet is an application that runs in an environment provided by a host program.
  • the applet may specifically be a social application, a file management application, an email application, or a game application.
  • the applet logic layer unit 252c and the corresponding applet view layer unit 252b are used to implement the applet instance.
  • An applet can be implemented by one applet logic layer unit 252c and at least one applet view layer unit 252b. There may be a one-to-one correspondence between the applet view layer unit 252b and the applet page.
  • the applet view layer unit 252b is used to organize and render the views of the applet.
  • the applet logic layer unit 252c is used to process the data processing logic of the applet and the corresponding applet page.
  • the unit may specifically be a process or a thread, the applet view layer unit 252b is such as applet view layer thread, and the applet logic layer unit 252c is such as applet logic layer thread.
  • the applet logic layer unit 252c may run in a virtual machine.
  • the applet view layer unit 252b and the applet logic layer unit 252c can relay communication through the host program native unit 252a, the host program native unit 252a is the interface for the host program 252 to communicate with the applet, and the host program native unit 252a can be the host program 252 itself thread or process.
  • the page logic code belonging to the program package of each applet page can be registered by the applet logic layer unit 252c at startup, and the registered page logic code is executed when the page logic code is required to process data.
  • the native application 253 is an application designed based on the vehicle operating system. Normally, the native application 253 can only run in the current vehicle operating system.
  • FIG. 4 shows a flowchart of a method for controlling an applet provided by an exemplary embodiment of the present application.
  • the method is applied to a terminal for execution as an example, and the terminal has a non-touch screen type hardware input peripheral.
  • the method may be performed by the host program 252 in the terminal.
  • the method includes:
  • Step 302 Display the applet page, the applet page includes at least two components;
  • the applet page is the user interface of the applet when it runs. Since the applet is based on the web architecture, the applet page is usually a web page.
  • the applet page includes at least two components. The components include: at least one of view, text, image, media, swiper view, scroll-view, form, navigation, map, and canvas kind.
  • An applet is a program that depends on the host program to run.
  • the applet can be a web application.
  • Step 304 In response to the selection operation triggered by the hardware input peripheral, display the selected first component among the at least two components as a focus selection style, and the focus selection style is used to indicate that the first component is selected by the selection focus. preselected state;
  • the hardware input peripheral with the selection function includes at least one of a hardware knob, a hardware dial, and a hardware touchpad.
  • the hardware input peripheral includes a hardware knob
  • a selected first component of the at least two components is displayed as a focus-selected style.
  • the hardware knob supports a counterclockwise rotation operation and a clockwise rotation operation.
  • the hardware toggle button supports toggle operations in at least two directions of up, down, left and right.
  • the hardware toggle supports toggle operations in both up and down directions.
  • the hardware toggle supports four directions of toggle operations: up, down, left, and right.
  • the hardware input peripheral includes a hardware touchpad
  • a selected first component of the at least two components is displayed as a focus-selected style.
  • the hardware touchpad supports touch operations in at least two directions of up, down, left and right.
  • the host program on the terminal is provided with selection control logic (a kind of program logic), and the applet responds to the selection operation through the selection control logic, and displays the selected first component of the at least two components as the focus. Check the style.
  • the select operation generates an input event on the hardware input peripheral.
  • Step 306 In response to the confirmation operation triggered on the hardware input peripheral, set the first component to a selected state, and/or execute a response event corresponding to the first component.
  • the hardware input peripherals with confirmation function include: hardware buttons.
  • Hardware buttons support confirmation actions.
  • the hardware input peripheral includes a hardware button
  • the selected first component in response to a pressing operation on the hardware button, set the selected first component to a selected state, or execute a response event corresponding to the selected first component, or set The selected first component is set to a selected state and a response event corresponding to the selected first component is executed.
  • the response event is a certain function or business or process provided by the applet.
  • the response event is a response event or a response method bound to the first component in the applet.
  • the method provided in this embodiment converts the operation interaction mode of the touch screen into physical buttons by using hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page.
  • hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page.
  • the security control of the applet on the terminal is realized, and the applet platform can be adapted to the terminal without a touch screen without the need for the applet developers to modify the applet with specific specifications. Equipped with the use of all applets, it provides a low-cost adaptation solution for adapting applets to in-vehicle terminals or smart home terminals.
  • the hardware input peripheral when the hardware input peripheral is set on the center console or steering wheel of the car, since the user can semi-blind or blindly operate the applet in the process of using the hardware input peripheral, the user will focus more on the front. on the road. Therefore, it can provide the driver with a safer operation mode of the vehicle and the machine.
  • FIG. 5 shows a flowchart of a terminal-based applet control method provided by another exemplary embodiment of the present application.
  • the method is applied to a terminal for execution as an example, and the terminal has a hardware input peripheral.
  • the method may be performed by the host program 252 in the terminal.
  • the method includes:
  • Step 401 Display the applet page, the applet page includes at least two components;
  • the applet page is usually a web page.
  • the applet page includes at least two components. Components include: at least one of views, text, pictures, media, slider views, scrollable views, forms, navigation, maps, and canvases.
  • the component also includes at least two components that can be selected by scrolling.
  • Components of this type can be called container-type components.
  • the applet page can be divided into different page areas (or functional areas), each functional area can be set to a separate level, and different levels have different inter-level priorities, and the inter-level priorities Higher tiers will be selected first.
  • each control in the same level also has different intra-level priorities, and controls with higher intra-level priorities will also be selected first.
  • inter-layer priority is the priority between different layers.
  • Intra-layer priority is the priority between controls belonging to the same layer.
  • the hierarchy is obtained by dividing different page areas according to their functions.
  • the components "book train ticket” and "order” belong to level 1
  • the components "departure city - arrival city”, “departure date” and “train ticket query” belong to level 2
  • the inter-level priority of level 1 Inter-level priority higher than level 2.
  • the intra-level priority of the component "booking train tickets” is higher than the intra-level priority of the component "order”.
  • Step 402 Monitor the list of interactive components with interactive capabilities in the applet page
  • the interactive component list is a list of components with interactive capabilities in the applet page.
  • An interactive component refers to a component that can respond to the user's human-computer interaction. Assuming that the applet is designed for touch screen interaction, components with interactive capabilities include components that can respond to user's touch screen operations.
  • the touch screen operation includes, but is not limited to, at least one of a click touch operation, a double-tap touch operation, a sliding touch operation, a hovering touch operation, and a pressure touch operation.
  • the list of interactive components is obtained as follows:
  • 402-1 Monitor the target component with human-computer interaction function in the applet page, the applet page includes different page areas, different page areas correspond to different levels, and each page area includes at least one component;
  • the applet page When the applet page is a web-based webpage, the applet page corresponds to a DOM tree.
  • the component monitoring logic in the host program is used to monitor the target node in the DOM tree of the applet page, and the target node is the node corresponding to the component with human-computer interaction capability.
  • the target node includes: at least one of an added node, a deleted node, and a node with a changed attribute.
  • the attribute change includes at least one of: the class (class) of the node is changed and the style (style) of the node is changed.
  • Components with human-computer interaction functions are usually bound with response methods (note: the methods here refer to programming terms) or response events.
  • the host program scans the target node for a list of candidate components bound with a response method; determines the components in the candidate component list that meet the screening conditions as target components with human-computer interaction functions; the screening conditions include at least one of the following conditions:
  • the display level is at the top level of the window
  • the display level at the top level of the window means that the component is a component running in the foreground rather than a component running in the background.
  • Being in the scrollable window of the applet page means that no matter whether the component is running in the foreground, but because the scrollable window is displayed in the foreground, the components in the scrollable window may be selected by the user. Having a selectable component attribute means that the component has the ability to be selected.
  • 402-2 According to at least one of the inter-layer priority and the intra-layer priority of the first level where the target component is located, sort the target components to obtain a list of interactive components;
  • the inter-level priority is used to represent the priority of the first level between different levels
  • the intra-level priority is used to represent at least one of the target components within the first level Priority between components.
  • the components "book train ticket” and “order” belong to level 1
  • the components "departure city-arrival city”, “departure date” and “train ticket query” belong to level 2, and the layers of level 1 have priority
  • the level is higher than the inter-level priority of level 2.
  • the intra-level priority of the component "booking train tickets” is higher than the intra-level priority of the component "order”.
  • the intra-layer priority of the component "Departure City-Arrival City” is higher than the intra-layer priority of the component "Departure Date”
  • the intra-layer priority of the component "Departure Date” is higher than that of the component "Train Ticket Query”. Priority within the layer.
  • the host program sorts the five components to obtain a list of interactive components: component "book train ticket”, component “order”, component “departure city - arrival city”, component “departure date” and Component "Train Ticket Query”.
  • the first component "booking a train ticket" in the interactive component list may be a component selected by default.
  • Step 403 In response to the first selection operation triggered on the hardware input peripheral, determine the previous component of the historically selected component in the component list as the selected first component, and display the first component as the focus selection style;
  • the hardware input peripheral is a physical knob, and the selection operation is a rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, and the selection operation is a toggle operation triggered on the physical dial.
  • the hardware input peripheral is a physical knob, and the first selection operation is a counterclockwise rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, and the first selection operation is triggered on the physical dial. Swipe up to operate.
  • the hardware input peripheral is a physical knob, and the first selection operation is a clockwise rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, and the first selection operation is triggered on the physical dial. Scroll down operation.
  • the host program determines the previous component of the historically selected component in the component list as the selected first component, and displays the first component as the focus selection style.
  • the focus selection style is implemented by using Cascading Style Sheets (CSS) code, and the focus selection style includes but is not limited to: adding a check box, adding a highlight effect, changing the background color, and changing at least one of the foreground color. A sort of.
  • the focus selection style only represents that the component is in the pre-selected state selected by the selected focus, and the component property of the component has not been set to the selected state.
  • the preselected state can be understood as the component has obtained the selection focus.
  • the focus selection style is the default style provided by the host program in the terminal, which can be used by any applet.
  • the applet can use the default style provided by the host program.
  • Figure 6 shows a default focus selection style, which uses an outer frame to indicate that the component "recommendation" is in the state of selection focus (that is, the pre-selected state), but at this time the component "recommendation" has not yet been selected. is set to the selected state, the component in the selected state at this time is the component "ranking”.
  • a default focus selection style is shown in FIG. 7 , and the focus selection style uses an outer frame to indicate that the component “Beijing Cuisine” is in a state of selection focus.
  • the focus selection style is a custom style provided by the applet corresponding to the applet page.
  • Step 404 In response to the second selection operation triggered on the hardware input peripheral, determine the next component of the historically selected component in the component list as the selected first component, and display the first component as the focus selection style;
  • the hardware input peripheral is a physical knob, and the selection operation is a rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, and the selection operation is a toggle operation triggered on the physical dial.
  • the hardware input peripheral is a physical knob, and the second selection operation is a clockwise rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, and the second selection operation is triggered on the physical dial Swipe down to operate.
  • the hardware input peripheral is a physical knob, and the second selection operation is a counterclockwise rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, and the second selection operation is triggered on the physical dial. swipe up operation.
  • the host program determines the next component of the historically selected component in the component list as the selected first component, and displays the first component as the focus selected style.
  • the components selected in the history include: components selected by default by the host program, and/or components selected by the user independently.
  • Step 405 In response to the confirmation operation triggered on the hardware input peripheral, set the first component to a selected state, and/or execute a response event corresponding to the first component;
  • the hardware input peripherals with confirmation function include: hardware buttons.
  • the hardware input peripheral includes a hardware button
  • the selected first component in response to a pressing operation on the hardware button, set the selected first component to a selected state, or execute a response event corresponding to the selected first component, or set The selected first component is set to a selected state and a response event corresponding to the selected first component is executed.
  • the response event is a certain function or business or process provided by the applet.
  • the response event is a response event or a response method bound to the first component in the applet.
  • the component "recommended” is set to a selected state, and the lower components “Beijing Cuisine” and “Chuanxiang Cuisine” are switched to be displayed as subordinates of the component "recommended” components.
  • the component "Beijing Cuisine” is set to a selected state, and the components “Beijing Cuisine” and “Chuanxiang Cuisine” are switched and displayed as the component "Beijing Cuisine". the next level of the page.
  • Step 406 In response to the back operation triggered by the hardware input peripheral device, back to the previous page of the applet page, or close the applet page.
  • the hardware input peripheral with the back function includes: a hardware button.
  • the host program controls the applet to go back to the previous page of the applet page, or closes the applet page.
  • the previous page may be a page ranked before the applet page among the pages of the same level, or may be a parent page of the applet page. Or, if the current applet page is not the home page (Home) page, go back to the previous page of the applet page.
  • Home home page
  • the applet page is closed, that is, the current applet is exited.
  • the current applet page is the home page (Home) page, exit the current applet.
  • Step 407 In the case where a pop-up window is displayed on the applet page, in response to the selection operation triggered on the hardware input peripheral, display the second component selected in the pop-up window as the focus selection style;
  • a pop-up window is also displayed superimposed on the applet page, and the pop-up window may be displayed by the applet calling the pop-up window frame of the host program.
  • the pop-up window may be displayed by the applet calling the pop-up window frame of the host program.
  • the host program determines the previous component of the component selected by default (or historically selected) in the pop-up window as the selected second component, and the second component is selected. The component is displayed with the focus selected style.
  • the host program determines the next component of the component selected by default (or historically selected) in the pop-up window as the selected second component, and displays the second component Select the style for focus.
  • Step 408 In response to the confirmation operation triggered on the hardware input peripheral device, execute a response event corresponding to the second component.
  • the hardware input peripherals with confirmation function include: hardware buttons.
  • the host program controls the applet to execute a response event corresponding to the selected second component.
  • the response event is a certain function or business or process provided by the applet.
  • the response event is a response event or a response method bound to the second component in the applet.
  • the host program simulates a click event on the second component, and the simulated click event is used to trigger the applet to execute a response event corresponding to the second component.
  • Step 409 In response to the touch operation on the touch screen, display the third component located at the touch position of the touch operation as a focus selection style.
  • the user may not only use hardware input peripherals to control the applet. If the terminal has a touch screen, the user may also mix and use the touch screen to control the applet. In response to a touch operation on the touch screen, the touch operation triggers a click event, and the host program displays the third component located at the touch position of the touch operation as the focus selection style according to the click event.
  • the third component can be triggered by the touch operation on the touch screen again, or the user can trigger the confirmation operation on the hardware input peripheral device, thereby triggering the applet to execute the corresponding third component. response event.
  • the method provided in this embodiment converts the operation interaction mode of the touch screen into physical buttons by using hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page.
  • hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page.
  • the security control of the applet on the terminal is realized, and the applet platform can be adapted to the terminal without a touch screen without the need for the applet developers to modify the applet with specific specifications. Equipped with the use of all applets, it provides a low-cost adaptation solution for adapting applets to in-vehicle terminals or smart home terminals.
  • the hardware input peripheral when the hardware input peripheral is set on the center console or steering wheel of the car, since the user can semi-blind or blindly operate the applet in the process of using the hardware input peripheral, the user will focus more on the front. on the road. Therefore, it can provide the driver with a safer operation mode of the vehicle and the machine.
  • the component sequence selection function of enables users to select the sequence of components by physically controlling the components.
  • the component can be highlighted on the applet page, so as to respond to the user's human-computer interaction and let the user Interactions on physical control components are responded to visually.
  • the terminal is provided with a control chip, a display screen connected to the control chip, and a non-touch screen type hardware input peripheral.
  • the hardware input peripheral includes: a control button and a back button.
  • the center console button is a composite multi-function button or a combination of several physical buttons, supporting rotary control, toggle control and push control at the same time.
  • the control buttons are located on the center console or on the steering wheel.
  • FIG. 11 shows a flowchart of a terminal-based applet control method provided by another exemplary embodiment of the present application. This embodiment is illustrated by applying the method to a terminal for execution.
  • the terminal has a control chip, a display screen connected to the control chip, and a non-touch screen type hardware input peripheral.
  • the method includes:
  • Step 501 The control chip controls the display screen to display the applet page, and the applet page includes at least two components;
  • control chip controls the display screen to display the applet page.
  • the applet page can be divided into different page areas (or functional areas), each functional area can be set to a separate level, and different levels have different inter-level priorities, and the inter-level priorities Higher tiers will be selected first.
  • each component within the same level also has different intra-level priorities, and components with higher intra-level priorities will also be selected first.
  • Step 502 The control chip monitors a list of interactive components corresponding to the applet page, where the interactive component list includes target components with interactive capabilities displayed on the applet page;
  • the target component with interactive capability refers to the component that can respond to the user's human-computer interaction operation.
  • the list of interactive components is obtained through the following steps:
  • the control chip monitors the target components with human-computer interaction function in the applet page.
  • the applet page includes different page areas, different page areas correspond to different levels, and each page area includes at least one component.
  • the control chip sorts the target components according to at least one of the inter-layer priority and the intra-layer priority of the first level where the target component is located to obtain a component list; wherein, the inter-layer priority is used to indicate The priority of the first level among different levels, and the intra-level priority is used to represent the priority of the target component among at least one component within the first level.
  • the applet page When the applet page is a web-based webpage, the applet page corresponds to a DOM tree.
  • the component monitoring logic in the control chip is used to monitor the target node in the DOM tree of the applet page.
  • the target node is the node corresponding to the target component with the human-computer interaction function in the DOM tree.
  • the target components with human-computer interaction function are usually bound with response methods (Note: the methods here refer to programming terms) or response events.
  • the control chip scans out the list of candidate components bound with the response method from the target node; determines the components in the list of candidate components that meet the screening conditions as the target components with human-computer interaction function; the screening conditions include at least one of the following conditions:
  • the display level is at the top level of the window
  • the display level at the top level of the window means that the component is a component running in the foreground rather than a component running in the background.
  • Being in the scrollable window of the applet page means that no matter whether the component is running in the foreground, but because the scrollable window is displayed in the foreground, the components in the scrollable window may be selected by the user. Having a selectable component attribute means that the component has the ability to be selected.
  • Step 503 In the case of receiving the selection event reported by the hardware input peripheral, the control chip controls the display screen to display the selected first component of the at least two components as the focus selection style;
  • the selection event is triggered by a counterclockwise rotation operation on the center console button, or a clockwise rotation operation on the center console button, or a toggle operation on the center console button.
  • the toggle operation may be at least one of an up toggle operation, a down toggle operation, a left toggle operation, and a right toggle operation.
  • the selection event includes at least one of a first selection event representing forward selection and a second selection event representing backward selection.
  • the control chip controls to determine the previous component of the historically selected component in the component list as the selected first component, and controls the display screen to select the first component Displays the focus selected style.
  • the control chip controls to determine the next component of the historically selected component in the component list as the selected first component, and controls the display screen to select the first component Displays the focus selected style.
  • the focus selection style is implemented by using CSS code, and the focus selection style includes but is not limited to at least one of: adding a check box, adding a highlight effect, changing the background color, and changing the foreground color.
  • the focus-selected style only represents that the component is in the pre-selected state selected by the selected focus, and the component property of the component has not been set to the selected state.
  • the preselected state can be understood as the component has obtained the selection focus.
  • the focus selection style is the default style provided by the control chip in the terminal, and any applet can use the default style.
  • the applet can use the default style provided by the control chip.
  • the focus selection style is a custom style provided by the applet corresponding to the applet page.
  • Step 504 in the case of receiving the confirmation event reported by the hardware input peripheral, the control chip controls the applet to set the first component to the selected state, and/or execute the response event corresponding to the first component;
  • the confirmation event is a press operation triggered on a button on the center console.
  • the control chip control applet will set the selected first component to the selected state, or, execute the response event corresponding to the selected first component, or, will be
  • the selected first component is set to a selected state and a response event corresponding to the selected first component is executed.
  • the response event is a certain function or business or process provided by the applet.
  • the response event is a response event or a response method bound to the first component in the applet.
  • setting the selected first component to a selected state includes: setting a component attribute of the selected first component to a selected attribute.
  • Step 505 in the case of receiving the back event reported by the hardware input peripheral, the control chip controls the applet to back to the previous page of the applet page, or closes the applet page;
  • the confirmation event is a press operation triggered on the center console button or the back button.
  • the control chip After receiving the back event reported by the center console button or the back button, the control chip controls the applet to return to the previous page of the applet page, or closes the applet page.
  • the previous page may be a page ranked before the applet page among the pages of the same level, or may be a parent page of the applet page. Or, if the current applet page is not the home page (Home) page, go back to the previous page of the applet page.
  • Home home page
  • the applet page is closed, that is, the current applet is exited.
  • the current applet page is the home page (Home) page, exit the current applet.
  • the second component selected in the pop-up window is displayed as a focus selection style
  • a pop-up window is also displayed superimposed on the applet page, and the pop-up window may be displayed by the applet calling the pop-up window frame of the host program.
  • the pop-up window may be displayed by the applet calling the pop-up window frame of the host program.
  • the control chip determines the previous component of the component selected by default (or historically selected) in the pop-up window as the selected second component, and Displays the second component as the focus-selected style.
  • the control chip determines the next component of the default selected (or historically selected) component in the pop-up window as the selected second component, and determines the The second component is displayed with the focus selected style.
  • the control chip in the case of receiving the confirmation event reported by the button of the center console, sets the second component to a selected state and executes the response event corresponding to the second component.
  • the response event is a certain function or business or process provided by the applet.
  • the response event is a response event or a response method bound to the second component in the applet.
  • the control chip simulates a click event on the second component, and the simulated click event is used to trigger the applet to execute a response event corresponding to the second component.
  • Step 506 In the case of receiving the touch event reported by the touch screen, the control chip controls the display screen to display the third component on the touch position indicated by the touch event as the focus selection style.
  • the user may not only use hardware input peripherals to control the applet. If the terminal has a touch screen, the user may also mix and use the touch screen to control the applet. In the case of receiving the touch event reported by the touch screen, the control chip controls the display screen to display the third component on the touch position indicated by the touch event as the focus selection style.
  • the third component can be triggered by the touch operation on the touch screen again, or the user can trigger the confirmation operation on the hardware input peripheral device, thereby triggering the applet to execute the corresponding third component. response event.
  • the method provided in this embodiment converts the operation interaction mode of the touch screen into physical buttons by using hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page.
  • hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page.
  • the security control of the applet on the terminal is realized, and the applet platform can be adapted to the terminal without a touch screen without the need for the applet developers to modify the applet with specific specifications. Equipped with the use of all applets, it provides a low-cost adaptation solution for adapting applets to in-vehicle terminals or smart home terminals.
  • the hardware input peripheral when the hardware input peripheral is set on the center console or steering wheel of the car, since the user can semi-blind or blindly operate the applet in the process of using the hardware input peripheral, the user will focus more on the front. on the road. Therefore, it can provide the driver with a safer operation mode of the vehicle and the machine.
  • the above-mentioned terminal-based applet control method includes the following steps:
  • the host program loads the CSS corresponding to the default focus selection style provided by the host program; when the applet adopts the custom focus selection style, the host program loads the customized focus provided by the applet Select the CSS corresponding to the style.
  • the host program loads the component monitoring script.
  • the component monitoring script is the script used to monitor the components in the applet page.
  • the component monitoring script can be named KeyRuntime.
  • the applet uses a component monitoring script to monitor the components in the applet page, and when the applet page changes, the host program updates the monitoring of the components in the applet page.
  • a component bound to a response event is a component with human-computer interaction capabilities.
  • the component monitoring script scans all components bound to the response event to get a list of components.
  • the component monitoring script determines whether the components are optional and the selection order, and generates structured data according to the selection order of the components with the optional ability.
  • the host program receives the key input on the hardware input peripheral, and the host program distributes the key input to the applet at the top level of the window.
  • the native pop-up window is a pop-up window drawn by the applet calling the pop-up window frame of the host program. When there is a native pop-up window, go to S59; when there is no native pop-up window, go to S60;
  • the host program controls the management of the selection focus of the pop-up window, that is, the focus selection style is preferentially displayed to the components in the pop-up window, and the pop-up window is drawn according to the default or customized focus selection style.
  • the component inside draws the focus-selected style.
  • the host program determines whether the key input is a back event triggered by the back button. If it is a backward event, go to S61; if it is not a backward event, go to S62.
  • the host program determines whether the current applet page is on the homepage of the applet. If it is on the home page, go to S62; if it is not on the home page, go to S63.
  • the host program controls the applet to return the current applet page to the previous page.
  • the host program determines whether the key input is a confirmation event triggered by the confirmation button. If the event is confirmed, go to S65; if not, go to S66.
  • the simulated click operation is used to trigger the response event corresponding to the selected component.
  • the new selection node refers to the DOM node corresponding to the component newly selected by the selection focus. For example, when the key input is the first selection operation, the previous component in the structured data is determined as the newly selected component; when the key input is the second selection operation, the next component in the structured data is determined as The newly selected component.
  • the applet modifies the component properties of the new selection node, and displays the component corresponding to the new selection node as the focus selection style.
  • the applet modifies the component attribute of the new selection node as the focus selection attribute.
  • the host program When a component is clicked or the page changes, because the displayed content of the applet page changes, the host program re-executes one or more steps of the component monitoring phase.
  • FIG. 13 shows a block diagram of an applet control device provided by an exemplary embodiment of the present application, where the device is connected with a non-touch screen type hardware input peripheral.
  • the device includes:
  • a display module 1320 displaying an applet page, where the applet page includes at least two components;
  • the interaction module 1340 is configured to, in response to a selection operation triggered on the hardware input peripheral, display the selected first component of the at least two components as a focus selection style, where the focus selection style is used to indicate the The first component is in a preselected state selected by the selection focus;
  • the interaction module 1340 is configured to, in response to a confirmation operation triggered on the hardware input peripheral, set the first component to a selected state, and/or execute a response event corresponding to the first component.
  • the interaction module 1340 includes:
  • the selected display sub-module 1344 is configured to, in response to the first selection operation triggered on the hardware input peripheral, determine the previous component of the historically selected component in the interactive component list as the selected first component, and set the the first component is displayed in the focus selected style;
  • the selected display sub-module 1344 is configured to, in response to the second selection operation triggered on the hardware input peripheral, determine the next component of the historically selected component in the interactive component list as the selected first component, and displaying the first component as the focus-selected style.
  • the list of interactive components is a list of components with interactive capabilities in the applet page.
  • the apparatus further includes: a component monitoring sub-module 1342, configured to monitor the target component with human-computer interaction function in the applet page, where the applet page includes different A page area, the different page areas correspond to different levels, and the page area includes at least one component; according to at least one of the inter-layer priority and the intra-layer priority of the first level where the target component is located , sort the target components to obtain the interactive component list;
  • a component monitoring sub-module 1342 configured to monitor the target component with human-computer interaction function in the applet page, where the applet page includes different A page area, the different page areas correspond to different levels, and the page area includes at least one component; according to at least one of the inter-layer priority and the intra-layer priority of the first level where the target component is located , sort the target components to obtain the interactive component list;
  • the inter-layer priority is used to represent the priority of the first layer between the different layers, and the intra-layer priority is used to represent the target component in the first layer. Priority between at least one component.
  • the component monitoring sub-module 1342 is configured to monitor the target node in the DOM tree of the applet page; scan the target node for candidate components bound with the response device list; determine the component that meets the screening condition in the candidate component list as the target component with the human-computer interaction function.
  • the screening condition includes at least one of the following conditions:
  • the display level is at the top level of the window
  • the apparatus further includes an execution module 1360;
  • the selection and display sub-module 1344 is used to display the selected item in the pop-up window in response to the selection operation triggered on the hardware input peripheral when the pop-up window of the native application is displayed on the applet page.
  • the second component is displayed as the focus selected style
  • the execution module 1360 is configured to, in response to a confirmation operation triggered on the hardware input peripheral, set the second component to a selected state, and/or execute a response event corresponding to the second component.
  • the hardware input peripheral is a physical knob, and the selection operation is a rotation operation triggered on the physical knob; or, the hardware input peripheral is a physical dial, The selection operation is a toggle operation triggered on the physical toggle button.
  • the execution module 1360 is configured to execute a simulated click event on the first component in response to a confirmation operation triggered on the hardware input peripheral, and the simulated click event uses for triggering the applet to execute the response event corresponding to the first component.
  • the terminal further includes a touch screen
  • the apparatus further includes:
  • the execution module 1360 is configured to, in response to the touch operation on the touch screen, display the third component located at the touch position of the touch operation as the focus selection style.
  • the execution module 1360 is configured to, in response to a back operation triggered on the hardware input peripheral, back to the previous page of the applet page, or close the applet program page.
  • the focus selection style is a default style provided by a host program in the terminal, and the host program is used to provide an operating environment for the applet corresponding to the applet page; Or, the focus selection style is a custom style provided by the applet.
  • the device provided in this embodiment uses hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons to control the functions on the applet page, and converts the operation interaction mode of the touch screen into physical buttons
  • hardware input peripherals such as physical knobs, physical dial buttons, and hardware buttons
  • the security control of the applet on the terminal is realized, and the applet platform can be adapted to the terminal without a touch screen without the need for the applet developers to modify the applet with specific specifications. Equipped with the use of all applets, it provides a low-cost adaptation solution for adapting applets to in-vehicle terminals or smart home terminals.
  • the hardware input peripheral is set on the center console or steering wheel of the car, since the user can semi-blind or blindly operate the applet in the process of using the hardware input peripheral, the user will focus more on the front. on the road. Therefore, the driver can be provided with a safer operation mode of the vehicle.
  • the device provided in this embodiment can accurately obtain a list of components with human-computer interaction capability by monitoring the components in the applet page.
  • the component sequence selection function of enables users to select the sequence of components by physically controlling the components.
  • the device provided in this embodiment by providing a default or customized focus selection style, can highlight a component on the applet page after the user selects the component, so as to respond to the user's human-computer interaction and allow the user to Interactions on physical control components are responded to visually.
  • FIG. 14 shows a structural block diagram of a terminal 1400 provided by an exemplary embodiment of the present application.
  • the terminal 1400 includes: a control chip 1420, a display screen 1440 connected to the control chip 1420, and a non-touch screen type hardware input peripheral 1460;
  • the display screen 1440 is used to display the applet page under the control of the control chip, and the applet page includes at least two components;
  • the hardware input peripheral 1460 is configured to report a selection event to the control chip in response to a selection operation, and report a confirmation event to the control chip in response to a confirmation operation;
  • the control chip 1420 is configured to, when receiving the selection event, control the display screen to display the selected first component of the at least two components as a focus selection style, and the focus selection style uses to indicate that the first component is in a preselected state selected by the selection focus;
  • the control chip 1420 is further configured to, in the case of receiving the confirmation event, set the first component to a selected state according to the confirmation operation, and/or execute a response event corresponding to the first component .
  • the hardware input peripheral includes a center console button of the terminal, and the center console button supports rotation control, toggle control, and push control;
  • the center console button is used to perform at least one of the following steps:
  • the confirmation event is reported to the control chip.
  • control chip 1420 is further configured to, in the case of receiving the first selection event reported by the hardware input peripheral, select the previous selected component in the interactive component list The component is determined to be the selected first component, and the first component is displayed as the focus selected style; and/or, upon receiving the second selection event reported by the hardware input peripheral, the determining that the next component of the historically selected component in the interactive component list is the selected first component, and displaying the first component as the focus selection style;
  • the list of interactive components is a list of components with interactive capabilities in the applet page.
  • control chip 1420 is further configured to monitor a target component with a human-computer interaction function in the applet page, the applet page includes different page areas, the different The page area corresponds to different levels, and the page area includes at least one component; according to at least one of the inter-layer priority and the intra-layer priority of the first level where the target component is located, the target component is performed. Sorting to obtain the list of interactive components;
  • the inter-layer priority is used to represent the priority of the first layer between the different layers, and the intra-layer priority is used to represent the target component in the first layer. Priority between at least one component.
  • control chip 1420 is further configured to monitor the target node in the DOM tree of the applet page; scan the target node for a list of candidate components bound with the response method ; Determine the component that meets the screening conditions in the candidate component list as the target component with the human-computer interaction function.
  • the screening condition includes at least one of the following conditions:
  • the display level is at the top level of the window
  • control chip 1420 is further configured to, when a pop-up window is displayed on the applet page and a selection event reported by the hardware input peripheral device is received, the The second component selected in the pop-up window is displayed in the focus selection style; in the case of receiving the selection event reported by the hardware input peripheral, the second component is set to the selected state, and/or , and execute the response event corresponding to the second component.
  • control chip 1420 is further configured to set the first component to a selected state and set the first component to a selected state in the case of a confirmation event triggered on the hardware input peripheral A simulated click event is executed on a component, and the simulated click event is used to trigger the applet to execute a response event corresponding to the first component.
  • the display screen is a touch screen
  • the control chip 1420 is further configured to, when receiving a touch event on the touch screen, change the touch position indicated by the touch event
  • the third component on the display is the focus-selected style.
  • control chip 1420 is further configured to go back to the previous page of the applet page when receiving a back event triggered by the hardware input peripheral, or to close the applet page.
  • the focus selection style is a default style provided by a host program in the terminal, and the host program is used to provide a running environment for the applet corresponding to the applet page; or, The focus selection style is a custom style provided by the applet.
  • FIG. 15 shows a structural block diagram of a terminal 1500 provided by an exemplary embodiment of the present application.
  • the terminal 1500 includes: a processor 1501 and a memory 1502 .
  • the processor 1501 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and the like.
  • the processor 1501 can use at least one hardware form among DSP (Digital Signal Processing, digital signal processing), FPGA (Field-Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array, programmable logic array) accomplish.
  • the processor 1501 may also include a main processor and a coprocessor.
  • the main processor is a processor used to process data in the wake-up state, also called CPU (Central Processing Unit, central processing unit); the coprocessor is A low-power processor for processing data in a standby state.
  • the processor 1501 may be integrated with a GPU (Graphics Processing Unit, image processor), and the GPU is used for rendering and drawing the content that needs to be displayed on the display screen.
  • the processor 1501 may further include an AI (Artificial Intelligence, artificial intelligence) processor, where the AI processor is used to process computing operations related to machine learning.
  • AI Artificial Intelligence, artificial intelligence
  • Memory 1502 may include one or more computer-readable storage media, which may be non-transitory. Memory 1502 may also include high-speed random access memory, as well as non-volatile memory, such as one or more disk storage devices, flash storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 1502 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 1501 to implement the applet provided by the method embodiments in this application. Control Method.
  • the terminal 1500 may optionally further include: a peripheral device interface 1503 and at least one peripheral device.
  • the processor 1501, the memory 1502 and the peripheral device interface 1503 can be connected through a bus or a signal line.
  • Each peripheral device can be connected to the peripheral device interface 1503 through a bus, a signal line or a circuit board.
  • the peripheral device includes: a non-touch screen type hardware input peripheral device, and the non-touch screen type hardware input peripheral device includes: at least one of a hardware knob, a hardware dial button, a hardware touch panel, and a hardware button.
  • the hardware input peripherals include: a hardware knob for triggering a select operation, a confirm button for triggering a confirm operation, and a back button for triggering a back operation.
  • a hardware knob for triggering selection operations can also be implemented as a hardware dial or a hardware touchpad instead.

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种小程序控制方法、装置、设备及存储介质，属于人机交互领域。所述方法包括：显示小程序页面(120)，所述小程序页面(120)包括至少两个组件（302）；响应于硬件输入外设(232)上触发的选择操作，将所述至少两个组件中被选中的第一组件显示为焦点选中样式（304）；响应于所述硬件输入外设(232)上触发的确认操作，将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件（306）。上述方法可以低成本地将小程序适配到车载终端或智能家居终端上。

Description

小程序控制方法、装置、设备及存储介质
本申请要求于2020年10月16日提交的申请号为2020111130288、发明名称为“基于车载终端的小程序控制方法、装置、设备及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及人机交互领域，特别涉及一种小程序控制方法、装置、设备及存储介质。
背景技术
随着智能驾驶和无线通信的发展，车载终端的功能越来越多样化和智能化。车载终端上也可以运行小程序。
小程序是依赖于宿主程序运行的程序，当车载终端安装宿主程序后，该宿主程序可以运行一个或多个小程序。由于小程序在设计之初，都是针对智能手机的触摸屏使用场景来设计的，因此车载终端上的小程序也采用基于触摸屏的人机交互方式。
但是由于很多传统汽车不具有触摸屏，这些传统汽车上的车载中控无法使用小程序。
发明内容
为了解决上面的技术问题，本申请实施例提供了一种小程序控制方法、装置、设备及存储介质。所述技术方案如下：
根据本申请的一个方面，提供了一种小程序控制方法，所述方法由具有非触摸屏类型的硬件输入外设的终端执行，所述方法包括：
显示小程序页面，所述小程序页面包括至少两个组件；
响应于所述硬件输入外设上触发的选择操作，将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
响应于所述硬件输入外设上触发的确认操作，将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
根据本申请的另一方面，提供了一种小程序控制装置，所述小程序控制装置连接有非触摸屏类型的硬件输入外设，所述装置包括：
显示模块，显示小程序页面，所述小程序页面包括至少两个组件；
交互模块，用于响应于所述硬件输入外设上触发的选择操作，将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；响应于所述硬件输入外设上触发的确认操作，将所述第一组件设置为选中状态，和/或执行所述第一组件对应的响应事件。
根据本申请的另一方面，提供了一种小程序控制方法，所述方法由具有控制芯片、与所述控制芯片相连的显示屏和非触摸屏类型的硬件输入外设的终端执行，所述方法包括：
所述控制芯片控制所述显示屏显示小程序页面，所述小程序页面包括至少两个组件；
在接收到所述硬件输入外设上报的选择事件的情况下，所述控制芯片控制所述显示屏将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
在接收到所述硬件输入外设上报的确认事件的情况下，所述控制芯片将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
示例性的，所述硬件输入外设包括所述终端的中控台按钮，所述中控台按钮支持旋转控制、拨动控制和按压控制；
所述选择事件是所述中控台按钮在接收到旋转操作时上报的事件；和/或，所述选择事件 是所述中控台按钮在接收到拨动操作时上报的事件；
所述确认事件是所述中控台按钮在接收到按压操作时上报的事件。
根据本申请的另一方面，提供了一种终端，所述终端包括：控制芯片、与所述控制芯片相连的显示屏和非触摸屏类型的硬件输入外设；
所述显示屏，用于在控制芯片的控制下显示小程序页面，所述小程序页面包括至少两个组件；
所述硬件输入外设，用于响应于选择操作向所述控制芯片上报选择事件，以及响应于确认操作向所述控制芯片上报确认事件；
所述控制芯片，用于在接收到所述选择事件的情况下，控制所述显示屏将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
所述控制芯片，还用于在接收到所述确认事件的情况下，根据所述确认操作将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
示例性的，所述硬件输入外设包括所述终端的中控台按钮，所述中控台按钮支持旋转控制、拨动控制和按压控制；
所述中控台按钮，用于执行如下步骤中的至少一个：
在接收到旋转操作时向所述控制芯片上报所述选择事件；
在接收到拨动操作时上报所述选择事件；
在接收到按压操作时上报所述确认事件。
根据本申请的另一方面，提供了一种终端，所述终端包括存储器和处理器；
所述存储器中存储有计算机程序，所述计算机程序由所述处理器加载并执行以实现如上所述的小程序控制方法。
根据本申请实施例的另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有计算机程序，所述计算机程序由处理器加载并执行以实现如上所述的小程序控制方法。
根据本申请的另一方面，提供了一种计算机程序产品或计算机程序，上述计算机程序产品或计算机程序包括计算机程序。计算机设备的处理器执行上述计算机程序，使得上述计算机设备执行如上方面所述的小程序控制方法。
根据本申请的另一方面，提供了一种控制芯片，其中，所述控制芯片包括可编程逻辑电路和/或程序指令，当所述控制芯片运行时用于实现如上所述的小程序控制方法。
本申请实施例提供的技术方案带来的有益效果至少包括：
通过采用诸如物理旋钮、物理拨钮和硬件按钮之类的硬件输入外设来控制小程序页面上的功能，将触摸屏的操作交互方式转化为实体按键的操作交互方式，从而实现了对终端上的小程序的安全控制，无需小程序的研发人员对小程序进行特定规范的改造，即可在不具有触摸屏的终端上在小程序平台的层面上适配所有小程序的使用，提供了一种低成本地将小程序适配到车载终端或智能家居终端上的适配方案。
另外，当硬件输入外设设置在汽车中控台或方向盘时，由于用户在使用硬件输入外设的过程中能够实现对小程序的半盲操或盲操，将注意力更多地留在前方道路上。因此能够为驾驶员提供更为安全的车机操作方式。
附图说明
图1是本申请一个实施例提供的基于终端的小程序控制方法的场景示意图；
图2是本申请一个实施例提供的终端的示意图；
图3是本申请一个实施例提供的宿主程序和小程序之间的关系框图；
图4是本申请一个实施例提供的基于终端的小程序控制方法的流程图；
图5是本申请一个实施例提供的基于终端的小程序控制方法的流程图；
图6是本申请一个实施例提供的基于终端的小程序控制方法的界面图；
图7是本申请一个实施例提供的基于终端的小程序控制方法的界面图；
图8是本申请一个实施例提供的基于终端的小程序控制方法的界面图；
图9是本申请一个实施例提供的基于终端的小程序控制方法的流程图；
图10是本申请一个实施例提供的基于终端的小程序控制方法的流程图；
图11是本申请一个实施例提供的基于终端的小程序控制方法的流程图；
图12是本申请一个实施例提供的基于终端的小程序控制方法的流程图；
图13是本申请一个实施例提供的小程序控制装置的框图；
图14是本申请一个实施例提供的终端的框图；
图15是本申请一个实施例提供的终端的框图。
具体实施方式
由于很多车载终端或智能家居终端都是采用硬件旋钮、硬件拨钮和硬件按钮之类的非触摸屏类型的硬件输入外设来控制，本申请提供了采用非触摸屏类型的硬件输入外设控制小程序以及原生应用的技术方案。参考图1所示，在终端100上显示有小程序页面120，小程序页面120上显示有多个具有交互能力的组件，比如多个标签“排行”、“推荐”、“排位”、“我的”和图标入口“北京菜”和“川湘菜”。当用户旋转终端100上的物理旋钮232时，能够控制选择焦点选中小程序页面120上的某个组件，被选中的组件会显示为焦点选中状态，该焦点选中状态用于表示组件处于被选择焦点选中的预选状态。比如被选中的组件外围显示有焦点选中框。当用户按压终端100上的确认按钮232时，将被选中的组件设置为选中状态，且触发被选中的组件对应的响应功能；当用户按压终端100上的后退按钮232时，触发后退至上一页面或关闭小程序。上述物理旋钮、确认按钮和后退按钮均为非触摸屏的硬件输入外设。
图2示出了本申请一个示例性实施例提供的终端100的结构框图。该终端100可以是车载终端、智能家居控制中心、智能音箱、智能冰箱、智能洗衣机、智能机器人等等。该终端100包括：至少一个处理器210、存储器250、至少一个网络接口220和用户接口230。服务器200中的各个组件通过总线系统240耦合在一起。可理解，总线系统240用于实现这些组件之间的连接通信。总线系统240除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线系统240。
处理器210可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。
用户接口230包括使得能够呈现媒体内容的一个或多个输出装置。典型的，输出装置包括：显示屏231，以及硬件输入外设232和/或233。显示屏231可以是触摸屏，也可以是非触摸屏。硬件输入外设232和/或233包括：硬件旋钮、硬件拨钮、硬件触摸板和硬件按钮中的至少一种。在一个示例中，硬件输入外设232和/或233包括：用于触发选择操作的硬件旋钮、用于触发确认操作的确认按钮以及用于触发后退操作的后退按钮。用于触发选择操作的硬件旋钮，也可替代实现为硬件拨钮或硬件触摸板。硬件输入外设232和233包括中控台按钮232和方向盘按钮233中的至少一种。在一些示例中，存在支持多种控制功能的中控台按钮232，该中控台按钮232同时支持旋转控制、拨钮控制、触摸板控制和按钮控制中的至少一种。在另外一些示例中，存在支持多种控制功能的方向盘按钮233，该方向盘按钮233同时支持旋转控制、拨钮控制、触摸板控制和按钮控制中的至少一种，比如方向盘按钮233包括音量调节按键、定速巡航开关、功能切换按钮、退出按钮、换挡拨片等。可选地，硬件输入外设232和/或233是指非触摸屏的输入外设，或者说，采用物理输入形式的输入外设，或者说，采用机械式输入或机电式输入的输入外设。其中，机电式输入是指机械和电气结合的输入形式，也称半机械式。
存储器250可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器250可选地包括在物理位置上远离处理器210的一个或多个存储设备。
存储器250包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Memory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memory)。本申请实施例描述的存储器250旨在包括任意适合类型的存储器。
在一些实施例中，存储器250能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。
操作系统251，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务。该操作系统251可以是各种车机操作系统，车机操作系统的具体类型不加以限定。
在操作系统251中运行有宿主程序252。可选地，在操作系统251中还安装和运行有原生(native)应用程序253。
宿主程序252用于提供小程序的运行环境，在宿主程序252中运行有一个或多个小程序，比如小程序1和小程序2。不论是何种车机操作系统，只要该车机操作系统中运行有宿主程序252，小程序都可以依赖于宿主程序252运行，该宿主程序252也称小程序引擎。
示意性的如图3所示，宿主程序252是承载小程序的应用程序，为小程序的实现提供环境。宿主程序252是原生应用程序。原生应用程序是可直接运行于操作系统252的应用程序。宿主程序252可以是社交应用程序、专门支持小程序252的专用应用程序、文件管理应用程序、邮件应用程序、游戏应用程序、地图应用程序、导航应用程序等。社交应用程序包括即时通信应用、SNS(Social Network Service，社交网站)应用或者直播应用等。小程序是在宿主程序提供的环境中运行的应用程序。小程序具体可以是社交应用程序、文件管理应用程序、邮件应用程序或者游戏应用程序等。
小程序逻辑层单元252c和相应的小程序视图层单元252b用于实现小程序实例。一个小程序可由一个小程序逻辑层单元252c以及至少一个小程序视图层单元252b实现。小程序视图层单元252b和小程序页面可以是一一对应关系。
小程序视图层单元252b用于组织小程序的视图并渲染。小程序逻辑层单元252c用于处理小程序及相应的小程序页面的数据处理逻辑。单元具体可以是进程或者线程，小程序视图层单元252b如小程序视图层线程，小程序逻辑层单元252c如小程序逻辑层线程。小程序逻辑层单元252c可运行于虚拟机中。小程序视图层单元252b和小程序逻辑层单元252c可通过宿主程序原生单元252a中转通信，宿主程序原生单元252a是宿主程序252与小程序通信的接口，宿主程序原生单元252a可以是宿主程序252自身的线程或进程。各小程序页面的属于程序包的页面逻辑代码，可由小程序逻辑层单元252c在启动时进行注册，并在需要该页面逻辑代码处理数据时执行注册的页面逻辑代码。
原生应用程序253是基于车机操作系统设计的应用程序。通常情况下，原生应用程序253仅能在当前的车机操作系统中运行。
图4示出了本申请一个示例性实施例提供的小程序控制方法的流程图。本实施例以该方法应用于终端执行来举例说明，该终端具有非触摸屏类型的硬件输入外设。可选地，该方法可以由终端内的宿主程序252执行。该方法包括：
步骤302：显示小程序页面，小程序页面包括至少两个组件；
终端上运行有一个或多个小程序。小程序页面是小程序运行时的用户界面。由于小程序是基于web架构的，因此小程序页面通常是一个网页类页面。该小程序页面包括至少两个组件。组件包括：视图(view)、文本(text)、图片(image)、媒体(media)、滑块(swiper)视图、可滚动视图(scroll-view)、表单、导航、地图、画布中的至少一种。
小程序是依赖于宿主程序运行的一种程序。小程序可以是web类应用。
步骤304：响应于硬件输入外设上触发的选择操作，将至少两个组件中被选中的第一组件显示为焦点选中样式，焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
具有选择功能的硬件输入外设包括：硬件旋钮、硬件拨钮和硬件触摸板中的至少一种。
在硬件输入外设包括硬件旋钮的情况下，响应于硬件旋钮上的旋转操作，将至少两个组件中被选中的第一组件显示为焦点选中样式。示意性的，硬件旋钮支持逆时针旋转操作和顺时针旋转操作。
在硬件输入外设包括硬件拨钮的情况下，响应于硬件拨钮上的拨动操作，将至少两个组件中被选中的第一组件显示为焦点选中样式。示意性的，硬件拨钮支持上、下、左和右中的至少两个方向的拨动操作。比如，硬件拨钮支持上下两个方向的拨动操作。又比如，硬件拨钮支持上、下、左和右共四个方向的拨动操作。
在硬件输入外设包括硬件触摸板的情况下，响应于硬件触摸板上的触摸操作，将至少两个组件中被选中的第一组件显示为焦点选中样式。示意性的，硬件触摸板支持上、下、左和右中的至少两个方向的触摸操作。
可选地，终端上的宿主程序中提供有选中控制逻辑(一种程序逻辑)，小程序通过该选中控制逻辑对选择操作进行响应，将至少两个组件中被选中的第一组件显示为焦点选中样式。
也即，该选择操作在硬件输入外设上产生输入事件。
步骤306：响应于硬件输入外设上触发的确认操作，将第一组件设置为选中状态，和/或，执行第一组件对应的响应事件。
示意性的，具有确认功能的硬件输入外设包括：硬件按钮。硬件按钮支持确认操作。
在硬件输入外设包括硬件按钮的情况下，响应于硬件按钮上的按压操作，将被选中的第一组件设置为选中状态，或，执行被选中的第一组件对应的响应事件，或，将被选中的第一组件设置为选中状态且执行被选中的第一组件对应的响应事件。
该响应事件是小程序提供的某个功能或业务或流程。该响应事件是小程序中与第一组件绑定的响应事件或响应方法。
综上所述，本实施例提供的方法，通过采用诸如物理旋钮、物理拨钮和硬件按钮之类的硬件输入外设来控制小程序页面上的功能，将触摸屏的操作交互方式转化为实体按键的操作交互方式，从而实现了对终端上的小程序的安全控制，无需小程序的研发人员对小程序进行特定规范的改造，即可在不具有触摸屏的终端上在小程序平台的层面上适配所有小程序的使用，提供了一种低成本地将小程序适配到车载终端或智能家居终端上的适配方案。
另外，当硬件输入外设设置在汽车中控台或方向盘时，由于用户在使用硬件输入外设的过程中能够实现对小程序的半盲操或盲操，将注意力更多地留在前方道路上。因此能够为驾驶员提供更为安全的车机操作方式。
图5示出了本申请另一示例性实施例提供的基于终端的小程序控制方法的流程图。本实施例以该方法应用于终端中执行来举例说明，该终端具有硬件输入外设。可选地，该方法可以由终端内的宿主程序252执行。该方法包括：
步骤401：显示小程序页面，小程序页面包括至少两个组件；
终端上运行有一个或多个小程序。在小程序启动后，宿主程序显示小程序页面。小程序页面通常是一个网页类页面。该小程序页面包括至少两个组件。组件包括：视图、文本、图片、媒体、滑块视图、可滚动视图、表单、导航、地图、画布中的至少一种。
示意性的，对于可滚动视图和滑块视图之类的组件，组件内还包括至少两个可滚动选择的组件。该类型的组件可称为容器类组件。
示意性的，小程序页面可划分为不同的页面区域(或称功能区域)，每个功能区域可设置为一个单独的层级，不同的层级之间具有不同的层间优先级，层间优先级较高的层级会被优 先选中。同理，同一个层级内的各个控件之间也具有不同的层内优先级，层内优先级较高的控件也会被优先选中。
也即，层间优先级是不同层级之间的优先级。层内优先级是属于同一个层级内的各个控件之间的优先级。层级是按照功能来对不同页面区域划分得到的。
如图6所示，组件“订火车票”和“订单”属于层级1，组件“出发城市-到达城市”、“出发日期”和“火车票查询”属于层级2，层级1的层间优先级高于层级2的层间优先级。在层级1中，组件“订火车票”的层内优先级高于组件“订单”的层内优先级。
步骤402：监控小程序页面中具有交互能力的交互组件列表；
交互组件列表是小程序页面中具有交互能力的组件列表。
具有交互能力的组件是指能够响应用户的人机交互操作的组件。假设小程序是针对触摸屏交互设计的，则具有交互能力的组件包括能够响应用户的触摸屏操作的组件。触摸屏操作包括但不限于：点击触摸操作、双击触摸操作、滑动触摸操作、悬浮触控操作、压力触控操作中的至少一种。在一个示例中，交互组件列表是通过如下方式获取的：
402-1：监控小程序页面中具有人机交互功能的目标组件，小程序页面包括不同的页面区域，不同的页面区域对应的不同的层级，每个页面区域内包括至少一个组件；
在小程序页面是基于web的网页页面时，小程序页面对应有DOM树。宿主程序中的组件监控逻辑用于监控小程序页面的DOM树中的目标节点，目标节点是具有人机交互能力的组件对应的节点。示例性的，目标节点包括：增加的节点、删除的节点和属性变化的节点中的至少一种。属性变化包括：节点的类(class)发生变化和节点的样式(style)发生变化中的至少一种。
具有人机交互功能的组件，通常都绑定有响应方法(注：此处的方法是指编程用语)或响应事件。宿主程序从目标节点中扫描出绑定有响应方法的候选组件列表；将候选组件列表中满足筛选条件的组件，确定为具有人机交互功能的目标组件；筛选条件包括如下至少一个条件：
显示层级位于窗口顶层；
处于小程序页面的可滚动窗口内；
具有可选择的组件属性。
其中，显示层级位于窗口顶层代表组件是前台运行的组件而非后台运行的组件。处于小程序页面的可滚动窗口内代表不论组件是否处于前台运行，但由于可滚动窗口位于前台显示，则该可滚动窗口内的组件都有可能被用户进行选中。具有可选择的组件属性代表该组件具有被选中的能力。
402-2：根据目标组件所在的第一层级的层间优先级和层内优先级中的至少一种优先级，对目标组件进行排序得到交互组件列表；
对于第一层级以及第一层级内的组件来讲，层间优先级用于表示第一层级在不同层级之间的优先级，层内优先级用于表示目标组件在第一层级内的至少一个组件之间的优先级。
示意性的参考图6，组件“订火车票”和“订单”属于层级1，组件“出发城市-到达城市”、“出发日期”和“火车票查询”属于层级2，层级1的层间优先级高于层级2的层间优先级。在层级1中，组件“订火车票”的层内优先级高于组件“订单”的层内优先级。在层级2中，组件“出发城市-到达城市”的层内优先级高于组件“出发日期”的层内优先级，组件“出发日期”的层内优先级高于组件“火车票查询”的层内优先级。
根据层间优先级和层内优先级，宿主程序对5个组件排序得到交互组件列表：组件“订火车票”、组件“订单”、组件“出发城市-到达城市”、组件“出发日期”和组件“火车票查询”。
其中，交互组件列表中的第一个组件“订火车票”可以是默认状态下被选中的组件。
步骤403：响应于硬件输入外设上触发的第一选择操作，将组件列表中历史选中的组件的上一个组件确定为被选中的第一组件，以及将第一组件显示为焦点选中样式；
硬件输入外设是物理旋钮，选择操作是物理旋钮上触发的旋转操作；或，硬件输入外设是物理拨钮，选择操作是物理拨钮上触发的拨动操作。
在一个示例中，硬件输入外设是物理旋钮，第一选择操作是物理旋钮上触发的逆时针旋转操作；或，硬件输入外设是物理拨钮，第一选择操作是物理拨钮上触发的向上拨动操作。在另一个示例中，硬件输入外设是物理旋钮，第一选择操作是物理旋钮上触发的顺时针旋转操作；或，硬件输入外设是物理拨钮，第一选择操作是物理拨钮上触发的向下拨动操作。
响应于硬件输入外设上触发的第一选择操作，宿主程序将组件列表中历史选中的组件的上一个组件确定为被选中的第一组件，以及将第一组件显示为焦点选中样式。可选地，焦点选中样式是采用层叠样式表(Cascading Style Sheets，CSS)代码实现的，焦点选中样式包括但不限于：增加选中框、增加高亮效果、改变背景颜色、改变前景颜色中的至少一种。
需要说明的是，焦点选中样式仅代表组件处于被选择焦点选择的预选状态，该组件的组件属性尚未被设置为选中状态。该预选状态可理解为组件获得了选择焦点。
在一个示例中，焦点选中样式是终端中的宿主程序提供的默认样式，不论哪个小程序都可以使用该默认样式。当小程序未设计有焦点选中样式时，小程序可以使用宿主程序提供的默认样式。比如在图6中示出了一种默认的焦点选中样式，该焦点选中样式采用外部框线表示组件“推荐”处于选择焦点聚焦的状态(也即预选状态)，但此时组件“推荐”尚未被设置为选中状态，此时处于选中状态的组件是组件“排行”。又比如在图7中示出了一种默认的焦点选中样式，该焦点选中样式采用外部框线表示组件“北京菜”处于选择焦点聚焦的状态。
在另一个示例中，焦点选中样式是小程序页面对应的小程序提供的自定义样式。
步骤404：响应于硬件输入外设上触发的第二选择操作，将组件列表中历史选中的组件的下一个组件确定为被选中的第一组件，以及将第一组件显示为焦点选中样式；
硬件输入外设是物理旋钮，选择操作是物理旋钮上触发的旋转操作；或，硬件输入外设是物理拨钮，选择操作是物理拨钮上触发的拨动操作。
在一个示例中，硬件输入外设是物理旋钮，第二选择操作是物理旋钮上触发的顺时针旋转操作；或，硬件输入外设是物理拨钮，第二选择操作是物理拨钮上触发的向下拨动操作。在另一个示例中，硬件输入外设是物理旋钮，第二选择操作是物理旋钮上触发的逆时针旋转操作；或，硬件输入外设是物理拨钮，第二选择操作是物理拨钮上触发的向上拨动操作。
响应于硬件输入外设上触发的第二选择操作，宿主程序将组件列表中历史选中的组件的下一个组件确定为被选中的第一组件，以及将第一组件显示为焦点选中样式。其中，历史选中的组件包括：宿主程序默认选中的组件，和/或，用户自主选中的组件。
步骤405：响应于硬件输入外设上触发的确认操作，将第一组件设置为选中状态，和/或，执行第一组件对应的响应事件；
示意性的，具有确认功能的硬件输入外设包括：硬件按钮。
在硬件输入外设包括硬件按钮的情况下，响应于硬件按钮上的按压操作，将被选中的第一组件设置为选中状态，或，执行被选中的第一组件对应的响应事件，或，将被选中的第一组件设置为选中状态且执行被选中的第一组件对应的响应事件。该响应事件是小程序提供的某个功能或业务或流程。该响应事件是小程序中与第一组件绑定的响应事件或响应方法。
比如在图7所示的例子中，若用户点击确认按钮，则组件“推荐”被设置为选中状态，且将下方的组件“北京菜”和“川湘菜”切换显示为组件“推荐”的下属组件。
又比如，在图8所示的例子中，若用户点击确认按钮，则组件“北京菜”被设置为选中状态，且将组件“北京菜”和“川湘菜”切换显示为组件“北京菜”的下一级页面。
步骤406：响应于硬件输入外设上触发的后退操作，后退至小程序页面的上一页面，或，关闭小程序页面。
示例性的，具有后退功能的硬件输入外设包括：硬件按钮。
在硬件输入外设包括硬件按钮的情况下，响应于硬件按钮上的按压操作，宿主程序控制 小程序后退至小程序页面的上一页面，或，关闭小程序页面。
可选地，在存在小程序页面的上一页面的情况下，后退至小程序页面的上一页面。该上一页面可以是同级页面中排序在小程序页面之前的页面，也可以是小程序页面的父级页面。或者，在当前的小程序页面不是主页(Home)页面的情况下，后退至小程序页面的上一页面。
可选地，在不存在小程序页面的上一页面的情况下，关闭小程序页面，也即退出当前的小程序。或者，在当前的小程序页面是主页(Home)页面的情况下，退出当前的小程序。
步骤407：在小程序页面上显示有弹窗的情况下，响应于硬件输入外设上触发的选择操作，将弹窗中被选中的第二组件显示为焦点选中样式；
在一些示例中，如图9所示，在小程序页面的显示过程中，小程序页面上还叠加显示有弹窗，该弹窗可以是小程序调用宿主程序的弹窗框架来显示的。弹窗上显示有至少两个组件。由于弹窗的显示层级高于小程序页面的显示层级，若此时用户在硬件输入外设上触发选择操作，则宿主程序将弹窗中被选中的第二组件显示为焦点选中样式。
可选地，响应于硬件输入外设上触发的第一选择操作，宿主程序将弹窗中默认选中(或历史选中)的组件的上一个组件确定为被选中的第二组件，以及将第二组件显示为焦点选中样式。或者，响应于硬件输入外设上触发的第二选择操作，宿主程序将弹窗中默认选中(或历史选中)的组件的下一个组件确定为被选中的第二组件，以及将第二组件显示为焦点选中样式。
步骤408：响应于硬件输入外设上触发的确认操作，执行第二组件对应的响应事件。
示意性的，具有确认功能的硬件输入外设包括：硬件按钮。
在硬件输入外设包括硬件按钮的情况下，响应于硬件按钮上的按压操作，宿主程序控制小程序执行被选中的第二组件对应的响应事件。该响应事件是小程序提供的某个功能或业务或流程。该响应事件是小程序中与第二组件绑定的响应事件或响应方法。比如，宿主程序在第二组件上模拟点击事件，该模拟点击事件用于触发小程序执行第二组件对应的响应事件。
步骤409：响应于触摸屏上的触摸操作，将位于触摸操作的触摸位置上的第三组件显示为焦点选中样式。
在一些示例中，如图10所示，用户可能不仅使用硬件输入外设来控制小程序。若终端上具有触摸屏，用户还可能混合使用触摸屏来控制小程序。响应于触摸屏上的触摸操作，该触摸操作会触发点击事件，宿主程序根据点击事件将位于触摸操作的触摸位置上的第三组件显示为焦点选中样式。
若用户想要触发第三组件对应的响应事件，可以再次使用触摸屏上的触摸操作对第三组件进行触发，或者，用户在硬件输入外设上触发确认操作，从而触发小程序执行第三组件对应的响应事件。
综上所述，本实施例提供的方法，通过采用诸如物理旋钮、物理拨钮和硬件按钮之类的硬件输入外设来控制小程序页面上的功能，将触摸屏的操作交互方式转化为实体按键的操作交互方式，从而实现了对终端上的小程序的安全控制，无需小程序的研发人员对小程序进行特定规范的改造，即可在不具有触摸屏的终端上在小程序平台的层面上适配所有小程序的使用，提供了一种低成本地将小程序适配到车载终端或智能家居终端上的适配方案。
另外，当硬件输入外设设置在汽车中控台或方向盘时，由于用户在使用硬件输入外设的过程中能够实现对小程序的半盲操或盲操，将注意力更多地留在前方道路上。因此能够为驾驶员提供更为安全的车机操作方式。
本实施例提供的方法，通过对小程序页面中的组件进行监控，能够准确得到具有人机交互能力的组件列表，作为可供顺序选择的组件列表，提供了小程序在初始设计下并未提供的组件顺序选择功能，使得用户能够通过物理控制组件来进行组件的顺序选择。
本实施例提供的方法，通过提供默认或自定义的焦点选择样式，能够在用户选择某一个组件后，在小程序页面上对该组件进行突出显示，从而响应用户的人机交互，让用户在物理 控制组件上的交互操作得到视觉上的响应回复。
在一个示例性的例子中，终端上设置有控制芯片，与控制芯片相连的显示屏和非触摸屏类型的硬件输入外设。示意性的，该硬件输入外设包括：控制按钮和后退按钮。该中控台按钮是一种复合式多功能按钮或几个物理按钮的组合，同时支持旋转控制、拨动控制和按压控制。控制按钮设置在中控台或者方向盘上。
图11示出了本申请另一示例性实施例提供的基于终端的小程序控制方法的流程图。本实施例以该方法应用于终端中执行来举例说明，该终端具有控制芯片，与控制芯片相连的显示屏和非触摸屏类型的硬件输入外设。该方法包括：
步骤501：控制芯片控制显示屏显示小程序页面，小程序页面包括至少两个组件；
终端上运行有一个或多个小程序。在小程序启动后，控制芯片控制显示屏显示小程序页面。
示意性的，小程序页面可划分为不同的页面区域(或称功能区域)，每个功能区域可设置为一个单独的层级，不同的层级之间具有不同的层间优先级，层间优先级较高的层级会被优先选中。同理，同一个层级内的各个组件之间也具有不同的层内优先级，层内优先级较高的组件也会被优先选中。
步骤502：控制芯片监控小程序页面对应的交互组件列表，交互组件列表包括小程序页面中显示出的具有交互能力的目标组件；
具有交互能力的目标组件是指能够响应用户的人机交互操作的组件。在一个示例中，交互组件列表是通过如下步骤获取到的：
控制芯片监控小程序页面中具有人机交互功能的目标组件，小程序页面包括不同的页面区域，不同的页面区域对应不同层级，每个页面区域内包括至少一个组件。对于目标组件，控制芯片根据目标组件所在的第一层级的层间优先级和层内优先级中的至少一种优先级，对目标组件进行排序得到组件列表；其中，层间优先级用于表示第一层级在不同层级之间的优先级，层内优先级用于表示目标组件在第一层级内的至少一个组件之间的优先级。
在小程序页面是基于web的网页页面时，小程序页面对应有DOM树。控制芯片中的组件监控逻辑用于监控小程序页面的DOM树中的目标节点。目标节点是具有人机交互功能的目标组件在DOM树中所对应的节点。具有人机交互功能的目标组件，通常都绑定有响应方法(注：此处的方法是指编程用语)或响应事件。控制芯片从目标节点中扫描出绑定有响应方法的候选组件列表；将候选组件列表中满足筛选条件的组件，确定为具有人机交互功能的目标组件；筛选条件包括如下至少一个条件：
显示层级位于窗口顶层；
处于小程序页面的可滚动窗口内；
具有可选择的组件属性。
其中，显示层级位于窗口顶层代表组件是前台运行的组件而非后台运行的组件。处于小程序页面的可滚动窗口内代表不论组件是否处于前台运行，但由于可滚动窗口位于前台显示，则该可滚动窗口内的组件都有可能被用户进行选中。具有可选择的组件属性代表该组件具有被选中的能力。
步骤503：在接收到硬件输入外设上报的选择事件的情况下，控制芯片控制显示屏将至少两个组件中被选中的第一组件显示为焦点选中样式；
在一个示例中，选择事件是中控台按钮上的逆时针旋转操作触发的，或者，中控台按钮上的顺时针旋转操作触发的，或者，中控台按钮上的拨动操作触发的。该拨动操作可以是向上拨动操作、向下拨动操作、向左拨动操作和向右拨动操作中的至少一种。选择事件包括：代表向前选中的第一选择事件，以及代表向后选中的第二选择事件中的至少一种。
在接收到的中控台按钮上报的第一选择事件的情况下，控制芯片控制将组件列表中历史选中的组件的上一个组件确定为被选中的第一组件，以及控制显示屏将第一组件显示为焦点 选中样式。在接收到的中控台按钮上报的第二选择事件的情况下，控制芯片控制将组件列表中历史选中的组件的下一个组件确定为被选中的第一组件，以及控制显示屏将第一组件显示为焦点选中样式。可选地，焦点选中样式是采用CSS代码实现的，焦点选中样式包括但不限于：增加选中框、增加高亮效果、改变背景颜色、改变前景颜色中的至少一种。
需要说明的是，焦点选中样式仅代表组件处于被选择焦点选择的预选状态，该组件的组件属性尚未被设置为选中状态。该预选状态可理解为组件获得了选择焦点。
在一个示例中，焦点选中样式是终端中的控制芯片提供的默认样式，不论哪个小程序都可以使用该默认样式。当小程序未设计有焦点选中样式时，小程序可以使用控制芯片提供的默认样式。在另一个示例中，焦点选中样式是小程序页面对应的小程序提供的自定义样式。
步骤504：在接收到硬件输入外设上报的确认事件的情况下，控制芯片控制小程序将第一组件设置为选中状态，和/或，执行第一组件对应的响应事件；
示意性的，确认事件是中控台按钮上触发的按压操作。
在接收到中控台按钮上报的确认事件的情况下，控制芯片控制小程序将被选中的第一组件设置为选中状态，或，执行被选中的第一组件对应的响应事件，或，将被选中的第一组件设置为选中状态且执行被选中的第一组件对应的响应事件。该响应事件是小程序提供的某个功能或业务或流程。该响应事件是小程序中与第一组件绑定的响应事件或响应方法。
可选地，将被选中的第一组件设置为选中状态包括：将被选中的第一组件的组件属性设置为选中属性。
步骤505：在接收到硬件输入外设上报的后退事件的情况下，控制芯片控制小程序后退至小程序页面的上一页面，或，关闭小程序页面；
示意性的，确认事件是中控台按钮或后退按钮上触发的按压操作。
在接收到中控台按钮或后退按钮上报的后退事件，控制芯片控制小程序后退至小程序页面的上一页面，或，关闭小程序页面。
可选地，在存在小程序页面的上一页面的情况下，后退至小程序页面的上一页面。该上一页面可以是同级页面中排序在小程序页面之前的页面，也可以是小程序页面的父级页面。或者，在当前的小程序页面不是主页(Home)页面的情况下，后退至小程序页面的上一页面。
可选地，在不存在小程序页面的上一页面的情况下，关闭小程序页面，也即退出当前的小程序。或者，在当前的小程序页面是主页(Home)页面的情况下，退出当前的小程序。
在一个可选的实施例中，在小程序页面上显示有弹窗且接收到硬件输入外设上报的选择事件的情况下，将弹窗中被选中的第二组件显示为焦点选中样式；
在小程序页面的显示过程中，小程序页面上还叠加显示有弹窗，该弹窗可以是小程序调用宿主程序的弹窗框架来显示的。弹窗上显示有至少两个组件。由于弹窗的显示层级高于小程序页面的显示层级，若此时接收到中控台按钮上报的选择事件，则控制芯片将弹窗中被选中的第二组件显示为焦点选中样式。
可选地，在接收到中控台按钮上报的第一选择事件的情况下，控制芯片将弹窗中默认选中(或历史选中)的组件的上一个组件确定为被选中的第二组件，以及将第二组件显示为焦点选中样式。或者，在接收到中控台按钮上报的第二选择事件的情况下，控制芯片将弹窗中默认选中(或历史选中)的组件的下一个组件确定为被选中的第二组件，以及将第二组件显示为焦点选中样式。
在一个可选的实施例中，在接收到中控台按钮上报的确认事件的情况下，控制芯片设置第二组件为选中状态且执行第二组件对应的响应事件。该响应事件是小程序提供的某个功能或业务或流程。该响应事件是小程序中与第二组件绑定的响应事件或响应方法。比如，控制芯片在第二组件上模拟点击事件，该模拟点击事件用于触发小程序执行第二组件对应的响应事件。
步骤506：在接收到触摸屏上报的触摸事件的情况下，控制芯片控制显示屏将触摸事件 所指示的触摸位置上的第三组件显示为焦点选中样式。
在一些示例中，用户可能不仅使用硬件输入外设来控制小程序。若终端上具有触摸屏，用户还可能混合使用触摸屏来控制小程序。在接收到触摸屏上报的触摸事件的情况下，控制芯片控制显示屏将触摸事件所指示的触摸位置上的第三组件显示为焦点选中样式。
若用户想要触发第三组件对应的响应事件，可以再次使用触摸屏上的触摸操作对第三组件进行触发，或者，用户在硬件输入外设上触发确认操作，从而触发小程序执行第三组件对应的响应事件。
综上所述，本实施例提供的方法，通过采用诸如物理旋钮、物理拨钮和硬件按钮之类的硬件输入外设来控制小程序页面上的功能，将触摸屏的操作交互方式转化为实体按键的操作交互方式，从而实现了对终端上的小程序的安全控制，无需小程序的研发人员对小程序进行特定规范的改造，即可在不具有触摸屏的终端上在小程序平台的层面上适配所有小程序的使用，提供了一种低成本地将小程序适配到车载终端或智能家居终端上的适配方案。
另外，当硬件输入外设设置在汽车中控台或方向盘时，由于用户在使用硬件输入外设的过程中能够实现对小程序的半盲操或盲操，将注意力更多地留在前方道路上。因此能够为驾驶员提供更为安全的车机操作方式。
在一个示意性的例子中，如图12所示，上述基于终端的小程序控制方法包括如下步骤：
组件监控阶段：
S51，启动小程序页面；
S52，根据是否自定义选中样式加载对应的CSS；
当小程序采用默认的焦点选中样式时，宿主程序加载宿主程序提供的默认的焦点选中样式对应的CSS；当小程序采用自定义的焦点选中样式时，宿主程序加载小程序提供的自定义的焦点选中样式对应的CSS。
S53，加载组件监控脚本；
宿主程序加载组件监控脚本。组件监控脚本是用于监控小程序页面中的组件的脚本。该组件监控脚本可以命名为KeyRuntime。
S54，注册页面变化监控；
小程序采用组件监控脚本监控小程序页面中的组件，以及在小程序页面发生变化时，宿主程序更新对小程序页面中的组件的监控。
S55，扫描所有绑定有响应事件的组件列表；
绑定有响应事件的组件是具有人机交互能力的组件。组件监控脚本扫描所有绑定有响应事件的组件，得到组件列表。
S56，确定组件是否可选以及选择顺序，生成结构化的数据；
组件监控脚本确定组件是否可选以及选择顺序，将具有可选择能力的组件按照选择顺序生成结构化的数据。
选中逻辑阶段：
S57，接收硬件输入外设上的按键输入，将按键输入分发到位于窗口顶层的小程序；
宿主程序接收硬件输入外设上的按键输入，宿主程序将按键输入分发到位于窗口顶层的小程序。
S58，检测是否有native弹窗；
native弹窗是小程序调用宿主程序的弹窗框架绘制的弹窗。当存在native弹窗时，进入S59；当不存在native弹窗时，进入S60；
S59，弹框的焦点管理及样式绘制；
在存在有弹窗时，宿主程序控制对弹窗的选择焦点进行管理，也即优先对弹窗内的组件显示焦点选中样式，并按照默认或自定义的焦点选中样式的绘制方式，对弹窗内的组件绘制焦点选中样式。
S60，是否后退事件；
在不存在有弹窗时，宿主程序判断按键输入是否为后退按钮上触发的后退事件。若是后退事件，则进入S61；若不是后退事件，则进入S62。
S61，是否在小程序的主页(Home)页面；
宿主程序判断当前的小程序页面，是否在小程序的主页页面。若处于主页页面，则进入S62；若不处于主页页面，则进入S63。
S62，关闭当前小程序；
S63，后退至上一页面；
在不处于主页页面时，宿主程序控制小程序将当前的小程序页面，后退至上一页面。
S64，是否确认事件；
宿主程序判断按键输入是否为确认按钮上触发的确认事件。若是确认事件，则进入S65；若不是确认事件，则进入S66。
S65，在显示有焦点选中样式的组件上模拟点击操作；
该模拟点击操作用于触发被选中的组件对应的响应事件。
S66，从结构化数据中计算新的选择节点；
新的选择节点是指被选择焦点新选中的组件所对应的DOM节点。比如在按键输入是第一选择操作时，将结构化的数据中的上一个组件确定为新选中的组件；在按键输入是第二选择操作时，将结构化的数据中的下一个组件确定为新选中的组件。
S67，修改组件属性，让焦点选中样式匹配到新的选择节点；
小程序修改新的选择节点的组件属性，将新的选择节点对应的组件显示为焦点选中样式。可选地，小程序修改新的选择节点的组件属性为焦点选中属性。
S68，点击组件或者页面变化。
在点击组件或者页面变化的情况下，由于小程序页面的显示内容发生改变，宿主程序重新执行组件监控阶段的一个或多个步骤。
以下为本申请的装置实施例，对于装置实施例中未详细描述的细节，可以参考如上所述的方法实施例。
图13示出了本申请一个示例性实施例提供的小程序控制装置的框图，该装置连接有非触摸屏类型的的硬件输入外设。所述装置包括：
显示模块1320，显示小程序页面，所述小程序页面包括至少两个组件；
交互模块1340，用于响应于所述硬件输入外设上触发的选择操作，将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
所述交互模块1340，用于响应于所述硬件输入外设上触发的确认操作，将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
在本申请实施例的一个可选设计中，交互模块1340包括：
选中显示子模块1344，用于响应于所述硬件输入外设上触发的第一选择操作，将交互组件列表中历史选中的组件的上一个组件确定为所述被选中的第一组件，以及将所述第一组件显示为所述焦点选中样式；
选中显示子模块1344，用于响应于所述硬件输入外设上触发的第二选择操作，将所述交互组件列表中历史选中的组件的下一个组件确定为所述被选中的第一组件，以及将所述第一组件显示为所述焦点选中样式。
其中，所述交互组件列表为小程序页面中具有交互能力的组件列表。
在本申请实施例的一个可选设计中，所述装置还包括：组件监控子模块1342，用于监控所述小程序页面中具有人机交互功能的目标组件，所述小程序页面包括不同的页面区域，所述不同的页面区域对应不同层级，所述页面区域内包括至少一个组件；根据所述目标组件所 在的第一层级的层间优先级和层内优先级中的至少一种优先级，对所述目标组件进行排序得到所述交互组件列表；
其中，所述层间优先级用于表示所述第一层级在所述不同层级之间的优先级，所述层内优先级用于表示所述目标组件在所述第一层级内的所述至少一个组件之间的优先级。
在本申请实施例的一个可选设计中，组件监控子模块1342，用于监控所述小程序页面的DOM树中的目标节点；从所述目标节点中扫描出绑定有响应装置的候选组件列表；将所述候选组件列表中满足筛选条件的组件，确定为所述具有人机交互功能的目标组件。
在本申请实施例的一个可选设计中，所述筛选条件包括如下至少一个条件：
显示层级位于窗口顶层；
处于所述小程序页面的可滚动窗口内；
具有可选择的组件属性。
在本申请实施例的一个可选设计中，所述装置还包括执行模块1360；
选中显示子模块1344，用于在所述小程序页面上显示有原生应用的弹窗的情况下，响应于所述硬件输入外设上触发的选择操作，将所述弹窗中被选中的第二组件显示为所述焦点选中样式；
执行模块1360，用于响应于所述硬件输入外设上触发的确认操作，将所述第二组件设置为选中状态，和/或，执行所述第二组件对应的响应事件。
在本申请实施例的一个可选设计中，所述硬件输入外设是物理旋钮，所述选择操作是所述物理旋钮上触发的旋转操作；或，所述硬件输入外设是物理拨钮，所述选择操作是所述物理拨钮上触发的拨动操作。
在本申请实施例的一个可选设计中，执行模块1360，用于响应于所述硬件输入外设上触发的确认操作，在所述第一组件上执行模拟点击事件，所述模拟点击事件用于触发所述小程序执行所述第一组件对应的响应事件。
在本申请实施例的一个可选设计中，所述终端还包括触摸屏，所述装置还包括：
执行模块1360，用于响应于所述触摸屏上的触摸操作，将位于所述触摸操作的触摸位置上的第三组件显示为所述焦点选中样式。
在本申请实施例的一个可选设计中，执行模块1360，用于响应于所述硬件输入外设上触发的后退操作，后退至所述小程序页面的上一页面，或，关闭所述小程序页面。
在本申请实施例的一个可选设计中，所述焦点选中样式是所述终端中的宿主程序提供的默认样式，所述宿主程序用于为所述小程序页面对应的小程序提供运行环境；或，所述焦点选中样式是所述小程序提供的自定义样式。
综上所述，本实施例提供的装置，通过采用诸如物理旋钮、物理拨钮和硬件按钮之类的硬件输入外设来控制小程序页面上的功能，将触摸屏的操作交互方式转化为实体按键的操作交互方式，从而实现了对终端上的小程序的安全控制，无需小程序的研发人员对小程序进行特定规范的改造，即可在不具有触摸屏的终端上在小程序平台的层面上适配所有小程序的使用，提供了一种低成本地将小程序适配到车载终端或智能家居终端上的适配方案。
另外，当硬件输入外设设置在汽车中控台或方向盘时，由于用户在使用硬件输入外设的过程中能够实现对小程序的半盲操或盲操，将注意力更多地留在前方道路上。因此能够为驾驶员提供更为安全的车机操作方式。
本实施例提供的装置，通过对小程序页面中的组件进行监控，能够准确得到具有人机交互能力的组件列表，作为可供顺序选择的组件列表，提供了小程序在初始设计下并未提供的组件顺序选择功能，使得用户能够通过物理控制组件来进行组件的顺序选择。
本实施例提供的装置，通过提供默认或自定义的焦点选择样式，能够在用户选择某一个组件后，在小程序页面上对该组件进行突出显示，从而响应用户的人机交互，让用户在物理控制组件上的交互操作得到视觉上的响应回复。
图14示出了本申请一个示例性实施例提供的终端1400的结构框图。终端1400包括：控制芯片1420、与所述控制芯片1420相连的显示屏1440和非触摸屏类型的硬件输入外设1460；
所述显示屏1440，用于在控制芯片的控制下显示小程序页面，所述小程序页面包括至少两个组件；
所述硬件输入外设1460，用于响应于选择操作向所述控制芯片上报选择事件，以及响应于确认操作向所述控制芯片上报确认事件；
所述控制芯片1420，用于在接收到所述选择事件的情况下，控制所述显示屏将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
所述控制芯片1420，还用于在接收到所述确认事件的情况下，根据所述确认操作将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
在本实施例的可选设计中，所述硬件输入外设包括所述终端的中控台按钮，所述中控台按钮支持旋转控制、拨动控制和按压控制；
所述中控台按钮，用于执行如下步骤中的至少一个：
响应于旋转操作，向所述控制芯片上报所述选择事件；
响应于拨动操作，向所述控制芯片上报所述选择事件；
响应于按压操作，向所述控制芯片上报所述确认事件。
在本实施例的可选设计中，所述控制芯片1420，还用于在接收到所述硬件输入外设上报的第一选择事件的情况下，将交互组件列表中历史选中的组件的上一个组件确定为所述被选中的第一组件，以及将所述第一组件显示为所述焦点选中样式；和/或，在接收到所述硬件输入外设上报的第二选择事件，将所述交互组件列表中历史选中的组件的下一个组件确定为所述被选中的第一组件，以及将所述第一组件显示为所述焦点选中样式；
其中，所述交互组件列表为所述小程序页面中具有交互能力的组件列表。
在本实施例的可选设计中，所述控制芯片1420，还用于监控所述小程序页面中具有人机交互功能的目标组件，所述小程序页面包括不同的页面区域，所述不同的页面区域对应不同层级，所述页面区域内包括至少一个组件；根据所述目标组件所在的第一层级的层间优先级和层内优先级中的至少一种优先级，对所述目标组件进行排序得到所述交互组件列表；
其中，所述层间优先级用于表示所述第一层级在所述不同层级之间的优先级，所述层内优先级用于表示所述目标组件在所述第一层级内的所述至少一个组件之间的优先级。
在本实施例的可选设计中，所述控制芯片1420，还用于监控所述小程序页面的DOM树中的目标节点；从所述目标节点中扫描出绑定有响应方法的候选组件列表；将所述候选组件列表中满足筛选条件的组件，确定为所述具有人机交互功能的目标组件。
在本申请实施例的一个可选设计中，所述筛选条件包括如下至少一个条件：
显示层级位于窗口顶层；
处于所述小程序页面的可滚动窗口内；
具有可选择的组件属性。
在本实施例的可选设计中，所述控制芯片1420，还用于在所述小程序页面上显示有弹窗且接收到所述硬件输入外设上报的选择事件的情况下，将所述弹窗中被选中的第二组件显示为所述焦点选中样式；在接收到所述硬件输入外设上报的选择事件的情况下，将所述第二组件设置为所述选中状态，和/或，执行所述第二组件对应的响应事件。
在本实施例的可选设计中，所述控制芯片1420，还用于在所述硬件输入外设上触发的确认事件的情况下，将所述第一组件设置为选中状态且在所述第一组件上执行模拟点击事件，所述模拟点击事件用于触发所述小程序执行所述第一组件对应的响应事件。
在本实施例的可选设计中，所述显示屏是触摸屏，所述控制芯片1420，还用于在接收到所述触摸屏上的触摸事件的情况下，将所述触摸事件所指示的触摸位置上的第三组件显示为 所述焦点选中样式。
在本实施例的可选设计中，所述控制芯片1420，还用于在接收到所述硬件输入外设上触发的后退事件的情况下，后退至所述小程序页面的上一页面，或，关闭所述小程序页面。
在本实施例的可选设计中，所述焦点选中样式是所述终端中的宿主程序提供的默认样式，所述宿主程序用于为所述小程序页面对应的小程序提供运行环境；或，所述焦点选中样式是所述小程序提供的自定义样式。
图15示出了本申请一个示例性实施例提供的终端1500的结构框图。通常，终端1500包括有：处理器1501和存储器1502。
处理器1501可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1501可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1501也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central Processing Unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1501可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1501还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器1502可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1502还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1502中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1501所执行以实现本申请中方法实施例提供的小程序控制方法。
在一些实施例中，终端1500还可选包括有：外围设备接口1503和至少一个外围设备。处理器1501、存储器1502和外围设备接口1503之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1503相连。具体地，外围设备包括：非触摸屏类型的硬件输入外设，非触摸屏类型的硬件输入外设包括：硬件旋钮、硬件拨钮、硬件触摸板和硬件按钮中的至少一种。在一个示例中，硬件输入外设包括：用于触发选择操作的硬件旋钮、用于触发确认操作的确认按钮以及用于触发后退操作的后退按钮。用于触发选择操作的硬件旋钮，也可替代实现为硬件拨钮或硬件触摸板。在一些示例中，存在支持多种控制功能的中控台按钮，该中控台按钮同时支持旋转控制、拨钮控制、触摸板控制和按钮控制中的至少一种。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是非瞬时性的只读存储器，磁盘或光盘等。

Claims (19)

  1. 一种小程序控制方法，所述方法由具有非触摸屏类型的硬件输入外设的终端执行，所述方法包括：
    显示小程序页面，所述小程序页面包括至少两个组件；
    响应于所述硬件输入外设上触发的选择操作，将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
    响应于所述硬件输入外设上触发的确认操作，将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
  2. 根据权利要求1所述的方法，其中，所述响应于所述硬件输入外设上触发的选择操作，将所述至少两个组件中被选中的第一组件显示为焦点选中样式，包括：
    响应于所述硬件输入外设上触发的第一选择操作，将交互组件列表中历史选中的组件的上一个组件确定为所述被选中的第一组件，以及将所述第一组件显示为所述焦点选中样式；
    和/或，
    响应于所述硬件输入外设上触发的第二选择操作，将所述交互组件列表中历史选中的组件的下一个组件确定为所述被选中的第一组件，以及将所述第一组件显示为所述焦点选中样式；
    其中，所述交互组件列表为所述小程序页面中具有交互能力的组件列表。
  3. 根据权利要求2所述的方法，其中，所述交互组件列表通过如下方式获取：
    监控所述小程序页面中具有人机交互功能的目标组件，所述小程序页面包括不同的页面区域，存在有不同的页面区域对应不同的层级，所述页面区域内包括至少一个组件；
    根据所述目标组件所在的第一层级的层间优先级和层内优先级中的至少一种优先级，对所述目标组件进行排序得到所述交互组件列表；
    其中，所述层间优先级用于表示所述第一层级在所述不同层级之间的优先级，所述层内优先级用于表示所述目标组件在所述第一层级内的所述至少一个组件之间的优先级。
  4. 根据权利要求3所述的方法，其中，所述监控所述小程序页面中具有人机交互功能的目标组件，包括：
    监控所述小程序页面的文档对象化模型DOM树中的目标节点；
    从所述目标节点中扫描出绑定有响应方法的候选组件列表；
    将所述候选组件列表中满足筛选条件的组件，确定为所述具有人机交互功能的目标组件。
  5. 根据权利要求4所述的方法，其中，所述筛选条件包括如下至少一个条件：
    显示层级位于窗口顶层；
    处于所述小程序页面的可滚动窗口内；
    具有可选择的组件属性。
  6. 根据权利要求1至3任一所述的方法，其中，所述方法还包括：
    在所述小程序页面上显示有弹窗的情况下，响应于所述硬件输入外设上触发的选择操作，将所述弹窗中被选中的第二组件显示为所述焦点选中样式；
    响应于所述硬件输入外设上触发的确认操作，将所述第二组件设置为所述选中状态，和/或，执行所述第二组件对应的响应事件。
  7. 根据权利要求1至3任一所述的方法，其中，
    所述硬件输入外设是物理旋钮，所述选择操作是所述物理旋钮上触发的旋转操作；
    或，所述硬件输入外设是物理拨钮，所述选择操作是所述物理拨钮上触发的拨动操作。
  8. 根据权利要求1至3任一所述的方法，其中，所述响应于所述硬件输入外设上触发的确认操作，将所述第一组件设置为选中状态且执行所述第一组件对应的响应事件，包括：
    响应于所述硬件输入外设上触发的确认操作，将所述第一组件设置为选中状态且在所述第一组件上执行模拟点击事件，所述模拟点击事件用于触发所述小程序执行所述第一组件对应的响应事件。
  9. 根据权利要求1至3任一所述的方法，其中，所述终端还包括触摸屏，所述方法还包括：
    响应于所述触摸屏上的触摸操作，将位于所述触摸操作的触摸位置上的第三组件显示为所述焦点选中样式。
  10. 根据权利要求1至3任一所述的方法，其中，所述方法还包括：
    响应于所述硬件输入外设上触发的后退操作，后退至所述小程序页面的上一页面，或，关闭所述小程序页面。
  11. 根据权利要求1至3任一所述的方法，其中，
    所述焦点选中样式是所述终端中的宿主程序提供的默认样式，所述宿主程序用于为所述小程序页面对应的小程序提供运行环境；
    或，所述焦点选中样式是所述小程序提供的自定义样式。
  12. 一种小程序控制方法，所述方法由具有控制芯片、与所述控制芯片相连的显示屏和非触摸屏类型的硬件输入外设的终端执行，所述方法包括：
    所述控制芯片控制所述显示屏显示小程序页面，所述小程序页面包括至少两个组件；
    在接收到所述硬件输入外设上报的选择事件的情况下，所述控制芯片控制所述显示屏将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
    在接收到所述硬件输入外设上报的确认事件的情况下，所述控制芯片将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
  13. 根据权利要求12所述的方法，其中，所述硬件输入外设包括所述终端的中控台按钮，所述中控台按钮支持旋转控制、拨动控制和按压控制；
    所述选择事件是所述中控台按钮在接收到旋转操作时上报的事件；和/或，所述选择事件是所述中控台按钮在接收到拨动操作时上报的事件；
    所述确认事件是所述中控台按钮在接收到按压操作时上报的事件。
  14. 一种终端，所述终端包括：控制芯片、与所述控制芯片相连的显示屏和非触摸屏类型的硬件输入外设；
    所述显示屏，用于在控制芯片的控制下显示小程序页面，所述小程序页面包括至少两个组件；
    所述硬件输入外设，用于响应于选择操作向所述控制芯片上报选择事件，以及响应于确认操作向所述控制芯片上报确认事件；
    所述控制芯片，用于在接收到所述选择事件的情况下，控制所述显示屏将所述至少两个组件中被选中的第一组件显示为焦点选中样式，所述焦点选中样式用于指示所述第一组件处于被选择焦点选中的预选状态；
    所述控制芯片，还用于在接收到所述确认事件的情况下，根据所述确认操作将所述第一组件设置为选中状态，和/或，执行所述第一组件对应的响应事件。
  15. 根据权利要求14所述的终端，其中，所述硬件输入外设包括所述终端的中控台按钮，所述中控台按钮支持旋转控制、拨动控制和按压控制；
    所述中控台按钮，用于执行如下步骤中的至少一个：
    响应于旋转操作，向所述控制芯片上报所述选择事件；
    响应于拨动操作，向所述控制芯片上报所述选择事件；
    响应于按压操作，向所述控制芯片上报所述确认事件。
  16. 一种终端，所述终端包括存储器、处理器和与所述处理器相连的非触摸屏类型的硬件 输入外设；
    所述存储器中存储有计算机程序，所述计算机程序由所述处理器加载并执行以实现如权利要求1至13任一所述的小程序控制方法。
  17. 一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序由处理器加载并执行以实现如权利要求1至13任一所述的小程序控制方法。
  18. 一种计算机程序产品，所述计算机程序产品存储有计算机程序，所述计算机程序由处理器加载并执行以实现如权利要求1至13任一所述的小程序控制方法。
  19. 一种控制芯片，所述控制芯片包括可编程逻辑电路和/或程序指令，当所述控制芯片运行时用于实现如权利要求1至13任一所述的小程序控制方法。
PCT/CN2021/120995 2020-10-16 2021-09-27 小程序控制方法、装置、设备及存储介质 WO2022078199A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011113028.8 2020-10-16
CN202011113028.8A CN112394869B (zh) 2020-10-16 2020-10-16 基于车载终端的小程序控制方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
WO2022078199A1 true WO2022078199A1 (zh) 2022-04-21

Family

ID=74596011

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/120995 WO2022078199A1 (zh) 2020-10-16 2021-09-27 小程序控制方法、装置、设备及存储介质

Country Status (2)

Country Link
CN (1) CN112394869B (zh)
WO (1) WO2022078199A1 (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112394869B (zh) * 2020-10-16 2022-07-29 腾讯科技（深圳）有限公司 基于车载终端的小程序控制方法、装置、设备及存储介质
CN114407796A (zh) * 2022-01-21 2022-04-29 腾讯科技（深圳）有限公司 车载终端的控制方法、装置、设备及存储介质
CN114238821B (zh) * 2022-02-18 2022-04-29 北京金堤科技有限公司 弹窗处理方法及装置
CN116700694B (zh) * 2023-08-07 2024-01-26 深圳凡泰极客科技有限责任公司 小程序引擎

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1749944A (zh) * 2004-09-15 2006-03-22 哈曼贝克自动系统股份有限公司 车载多媒体系统和车载多媒体系统的操作方法
CN102981689A (zh) * 2011-09-07 2013-03-20 腾讯科技（深圳）有限公司 一种实现默认焦点定位的方法、装置和系统
CN107193450A (zh) * 2017-05-25 2017-09-22 北京三快在线科技有限公司 页面元素选择方法及装置
WO2018120492A1 (zh) * 2016-12-30 2018-07-05 百度在线网络技术（北京）有限公司 页面处理方法、移动终端、设备和计算机存储介质
US20180196589A1 (en) * 2017-01-06 2018-07-12 Honda Motor Co., Ltd. System and methods for controlling a vehicular infotainment system
CN111666011A (zh) * 2020-06-05 2020-09-15 北京百度网讯科技有限公司 页面焦点显示方法及装置
CN112394869A (zh) * 2020-10-16 2021-02-23 腾讯科技（深圳）有限公司 基于车载终端的小程序控制方法、装置、设备及存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102375851B (zh) * 2010-08-23 2014-05-07 中国移动通信有限公司 一种显示页面的方法及设备
JP5308509B2 (ja) * 2011-04-15 2013-10-09 シャープ株式会社 メニュー画面の表示制御方法
CN109375918A (zh) * 2018-11-23 2019-02-22 天津字节跳动科技有限公司 小程序的界面渲染方法、装置、电子设备和存储介质
CN110704136B (zh) * 2019-09-27 2023-06-20 北京百度网讯科技有限公司 小程序组件的渲染方法、客户端、电子设备及存储介质
CN111580879A (zh) * 2020-04-30 2020-08-25 北京字节跳动网络技术有限公司 小程序的运行方法、装置、电子设备及计算机存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1749944A (zh) * 2004-09-15 2006-03-22 哈曼贝克自动系统股份有限公司 车载多媒体系统和车载多媒体系统的操作方法
CN102981689A (zh) * 2011-09-07 2013-03-20 腾讯科技（深圳）有限公司 一种实现默认焦点定位的方法、装置和系统
WO2018120492A1 (zh) * 2016-12-30 2018-07-05 百度在线网络技术（北京）有限公司 页面处理方法、移动终端、设备和计算机存储介质
US20180196589A1 (en) * 2017-01-06 2018-07-12 Honda Motor Co., Ltd. System and methods for controlling a vehicular infotainment system
CN107193450A (zh) * 2017-05-25 2017-09-22 北京三快在线科技有限公司 页面元素选择方法及装置
CN111666011A (zh) * 2020-06-05 2020-09-15 北京百度网讯科技有限公司 页面焦点显示方法及装置
CN112394869A (zh) * 2020-10-16 2021-02-23 腾讯科技（深圳）有限公司 基于车载终端的小程序控制方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN112394869B (zh) 2022-07-29
CN112394869A (zh) 2021-02-23

Similar Documents

Publication Publication Date Title
WO2022078199A1 (zh) 小程序控制方法、装置、设备及存储介质
US10936343B2 (en) In-context event orchestration of physical and cyber resources
US20210112047A1 (en) Dynamic, customizable, controlled-access child outcome planning and administration resource
US9304837B2 (en) Cellular user interface
CA2027157C (en) Computer user interface
US7721303B2 (en) System for management of interactions between users and software applications in a web environment
CN111190598B (zh) 基于控件库拖拽式开发的燃机监控软件画面组态方法
US20050216834A1 (en) Method, apparatus, and computer-readable medium for dynamically rendering a user interface menu
JPH0225919A (ja) ウインドー表示装置
DE112019006699T5 (de) Steuerung entfernter vorrichtungen unter verwendung von benutzerschnittstellenvorlagen
DE112011105933T5 (de) Verfahren und Vorrichtungen zum dynamischen Anpassen einer virtuellen Tastatur
CN102934065A (zh) 信息处理装置
US10853100B1 (en) Systems and methods for creating learning-based personalized user interfaces
CN103425481A (zh) 向菜单项和动作动态分配快捷方式
US20130055118A1 (en) Configuring database objects in multi-tenant systems
CN111708516A (zh) 一种网上web应用定制开发系统
CN111432264A (zh) 基于媒体信息流的内容展示方法、装置、设备及存储介质
DE112016002384T5 (de) Hilfsschicht mit automatisierter Extraktion
CN111586464A (zh) 基于媒体信息流的内容展示方法、装置、设备及存储介质
CN112337099A (zh) 业务管理方法及装置
CN112445564A (zh) 界面显示方法及电子设备、计算机可读存储介质
CN104699468A (zh) 一种客户端以及该客户端的界面生成方法
CN114239524A (zh) 问卷生成方法、装置、计算机设备及存储介质
CN112445501A (zh) 数据烧录方法及设备、计算机可读存储介质
CN115268884B (zh) 一种基于aPaaS平台的移动端可视化页面配置和渲染方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21879245

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 01.09.2023)

122 Ep: pct application non-entry in european phase

Ref document number: 21879245

Country of ref document: EP

Kind code of ref document: A1