CN113656062A - Method and system for realizing UI (user interface) replacement of app based on server back management configuration - Google Patents
Method and system for realizing UI (user interface) replacement of app based on server back management configuration Download PDFInfo
- Publication number
- CN113656062A CN113656062A CN202111030711.XA CN202111030711A CN113656062A CN 113656062 A CN113656062 A CN 113656062A CN 202111030711 A CN202111030711 A CN 202111030711A CN 113656062 A CN113656062 A CN 113656062A
- Authority
- CN
- China
- Prior art keywords
- module
- app
- page
- cards
- component
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 14
- 239000003086 colorant Substances 0.000 claims abstract description 5
- 238000009877 rendering Methods 0.000 claims description 2
- 238000012986 modification Methods 0.000 abstract description 4
- 230000004048 modification Effects 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000003993 interaction Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 235000010627 Phaseolus vulgaris Nutrition 0.000 description 1
- 244000046052 Phaseolus vulgaris Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
- G06F8/658—Incremental updates; Differential updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a method and a system for realizing UI (user interface) replacement of an app based on server back-pipe configuration, which solve the problems of low flexibility, large modification amount and the like in the prior art. The method comprises the steps of splitting an existing app engineering business module into a plurality of independent business modules; each page of the APP adopts recycleview list control, corresponding component cards are listed according to each service module to be displayed on each page of the APP, elements of the component cards are configured after being listed and stored in a remote private library, each page acquires all the component cards to be displayed through an interface, wherein the component cards refer to style cards, and the elements comprise font colors, font sizes, documentations, pictures, the widths of the pictures and the heights of the pictures; each component card performs click hopping based on a native module in the business module or a loaded h5 module. The method is used for UI replacement of the app.
Description
Technical Field
A method and a system for realizing UI (user interface) replacement of an app based on server back management configuration are used for UI replacement of the app and belong to the technical field of Android, ios and clients.
Background
At present, the great software APP pays more and more attention to the customer experience, and besides the functionality, the attractiveness and interaction fluency of the UI are the most visual feelings of using the APP. In order to improve the stickiness and freshness of the client, the UI needs to be advanced with time, the UI changes quickly, if the UI is only developed as the APP originally, frequently released versions are involved, the experience of the client is also affected, and the user cannot be given a better experience according to the use preference of the client.
In summary, the interface modification of the client in the prior art mainly depends on native development, and has the following defects:
(1) the flexibility is low, namely after the transformation, the version needs to be reissued every time;
(2) the modification amount is large, namely, each version needs to be customized to replace pictures, frames and documentations;
(3) a new service module is needed, and online updating cannot be realized;
(4) the entry of each module (referring to the style card for functional navigation) cannot realize the rear pipe configuration jump.
Disclosure of Invention
In view of the above research problems, an object of the present invention is to provide a method and a system for implementing UI replacement of app based on server backend management configuration, which solve the problems of low flexibility, large modification amount, and the like in the prior art.
In order to achieve the purpose, the invention adopts the following technical scheme:
a method for realizing UI replacement of an app based on server backend management configuration comprises the following steps:
step 1: splitting an existing app engineering business module into a plurality of independent business modules;
step 2: each page of the APP adopts recycleview list control, corresponding component cards are listed according to each service module to be displayed on each page of the APP, elements of the component cards are configured after being listed and stored in a remote private library, each page acquires all the component cards to be displayed through an interface, wherein the component cards refer to style cards, and the elements comprise font colors, font sizes, documentations, pictures, the widths of the pictures and the heights of the pictures;
and step 3: each component card performs click hopping based on a native module in the business module or a loaded h5 module.
Further, in the step 2, each page of the APP stores a piece of data of a default style card to the APP assets directory, the data of the default style card is adopted when the network loading fails to be installed for the first time, namely, the data of the default style card is obtained through an interface corresponding to each page, after the data is successfully obtained, the data of the corresponding style card is stored in the cache by the database, and the cache data is directly used when the subsequent network loading fails.
Further, the h5 module in step 3 includes an app local h5 module and a server remote h5 module, where the app local h5 module is adopted with higher requirements on loading speed and experience, otherwise, the server remote h5 module is adopted, the app local h5 module is stored in an app private directory, each time the app local h5 module is accessed, an app local h5 module update interface is called to query whether the app local h5 module is updated, if the app local h5 module is updated, a latest vue module package is downloaded and inserted into the storage directory of the app local h5 module for replacement, where the vue module is an h5 module developed by using a vue frame, and the higher requirements on loading speed and experience indicate that page rendering needs to be completed within 2 seconds.
Further, in the step 3, a click jump instruction based on the h5 module adopts a fixed json string format, after the back management is configured, a corresponding component card is clicked, a goto _ cmd field is read to analyze a service module to be jumped to, and a corresponding app local h5 module or a server remote h5 address and related parameters are selected to complete the jump, wherein the related parameters include a Web address and a Web page title.
Furthermore, a button for the operation of the back pipe closing style card is arranged in the style card of each business module in the front page of the APP.
A system for enabling UI replacement of apps based on server backend configuration, comprising:
splitting the module: splitting an existing app engineering business module into a plurality of independent business modules;
a configuration module: each page of the APP adopts recycleview list control, corresponding component cards are listed according to each service module to be displayed on each page of the APP, elements of the component cards are configured after being listed and stored in a remote private library, each page acquires all the component cards to be displayed through an interface, wherein the component cards refer to style cards, and the elements comprise font colors, font sizes, documentations, pictures, the widths of the pictures and the heights of the pictures;
a skip module: each component card performs click hopping based on a native module in the business module or a loaded h5 module.
Compared with the prior art, the invention has the beneficial effects that:
the UI of the App realizes the thousand-person and thousand-face of big data, and greatly improves the user experience;
secondly, the UI of the App reduces the edition sending frequency, prompts the user experience, and can experience the latest function without primary update;
third, the UI of the App reduces the development amount, and the back tube increases flexible parameter configuration, thereby improving the efficiency of developers;
fourthly, acquiring all element data of all component cards by a complex homepage of the App in an interface mode, and improving the page display speed;
fifthly, the h5 module is updated on line, and is multiplexed at multiple ends (including an ios end and an android end);
sixthly, the invention realizes the differential updating of vue modules, namely, the universal vue framework codes are extracted, the service codes are separated, and the vue modules are adopted to open so as to realize the differential updating of part vue codes;
seventhly, the partial style cards provide favorite and dislike selection buttons for users, event embedding points are clicked, a big data department is acquired, accurate marketing of big data can be realized by combining other label attributes of the users, and different users push style cards with different preferences;
and eighthly, clicking and skipping each component card in the invention based on a native module in the service module or a loaded h5 module, wherein the skipping is a self-researched route skipping frame, the native module can be accessed through an h5 module (h5 page), the h5 page is opened through the native module, and the mutual interaction mode can be realized through Javascript interface.
Drawings
FIG. 1 is a schematic flow diagram of the present invention;
FIG. 2 is a display diagram of the home page of the app in the present invention;
FIG. 3 is a schematic diagram of a recycleview list control adopted for the back management display of a product page in the present invention;
fig. 4 is a schematic diagram of a style card corresponding to a service module to be displayed on a back-end selection front page according to the present invention.
Detailed Description
The invention will be further described with reference to the accompanying drawings and specific embodiments.
As shown in fig. 1, a method for implementing UI replacement of an app based on a server backend management configuration includes the following steps:
step 1: splitting an existing app engineering business module into a plurality of independent business modules;
step 2: each page of the APP adopts recycleview list control, as shown in fig. 3, and enumerates corresponding component cards according to each service module to be exhibited by each page of the APP, as shown in fig. 4, elements of the component cards are configured after enumeration, and are stored in a remote private library, each page acquires all the component cards to be exhibited through an interface, wherein the component cards refer to style cards, and the elements include font color, font size, a case, a picture, width of the picture and height of the picture; the pages of APP are shown as the home page, product Bang bean and my corresponding page in FIG. 2.
Each page of the APP stores a piece of data of a default style card to an APP assets directory, the data of the default style card is adopted when the network loading fails to be installed for the first time, namely the data of the default style card is obtained through an interface corresponding to each page, after the data is successfully obtained, the data of the corresponding style card is stored in a cache in the database, and the cache data is directly used when the subsequent network loading fails.
And step 3: each component card performs click hopping based on a native module in the business module or a loaded h5 module.
The h5 module comprises an app local h5 module and a server remote h5 module, wherein the app local h5 module is adopted with high requirements on loading speed and experience, otherwise, the server remote h5 module is adopted, the app local h5 module is stored in an app private directory, each time the app local h5 module is accessed, an app local h5 module updating interface is called to inquire whether the app local h5 module is updated, if the app local h5 module is updated, a latest vue module package is downloaded and inserted into a storage directory of the app local h5 module for replacement, wherein the vue module is an h5 module developed by using a vue frame, and the requirements on loading speed and experience are high, which indicates that page drawing needs to be completed within 2 seconds.
The click jump instruction based on the h5 module adopts a fixed json string format, after the back management is configured, a corresponding component card is clicked, a goto _ cmd field is read to analyze a service module needing jump to, and a corresponding app local h5 module or a server remote h5 address and related parameters are selected to complete jump, wherein the related parameters comprise a Web website and a webpage title.
And a button for the operation of closing the pattern card by the rear pipe is arranged in the pattern card of each service module in the front page of the APP.
The above are merely representative examples of the many specific applications of the present invention, and do not limit the scope of the invention in any way. All the technical solutions formed by the transformation or the equivalent substitution fall within the protection scope of the present invention.
Claims (6)
1. A method for realizing UI replacement of an app based on server backend management configuration is characterized by comprising the following steps:
step 1: splitting an existing app engineering business module into a plurality of independent business modules;
step 2: each page of the APP adopts recycleview list control, corresponding component cards are listed according to each service module to be displayed on each page of the APP, elements of the component cards are configured after being listed and stored in a remote private library, each page acquires all the component cards to be displayed through an interface, wherein the component cards refer to style cards, and the elements comprise font colors, font sizes, documentations, pictures, the widths of the pictures and the heights of the pictures;
and step 3: each component card performs click hopping based on a native module in the business module or a loaded h5 module.
2. The method according to claim 1, wherein in step 2, each page of the APP stores a piece of data of a default style card in an APP assets directory, the default style card data is adopted when network loading fails for the first time, that is, the default style card data is obtained through an interface corresponding to each page, after obtaining succeeds, the database stores the data of the corresponding style card in the cache, and subsequent network loading fails and directly uses the cache data.
3. The method as claimed in claim 2, wherein the h5 module in step 3 includes an app local h5 module and a server remote h5 module, wherein the app local h5 module with higher requirements on loading speed and experience is adopted, otherwise, the server remote h5 module is adopted, the app local h5 module is stored in an app private directory, each time the app local h5 module is accessed, an app local h5 module update interface is called to query whether the app local h5 module is updated, if the app local h5 module is updated, a latest vue module package is downloaded and inserted into a storage directory of the app local h5 module for replacement, wherein the vue module refers to the h5 module developed by using a vue framework, and the requirement on loading speed and experience is higher, which indicates that page rendering needs to be completed within 2 seconds.
4. The method as claimed in claim 3, wherein the step 3 employs a fixed json string format based on a click jump instruction of the h5 module, after the backend management is configured, a corresponding component card is clicked, a goto _ cmd field is read to analyze a service module to be jumped to, and a corresponding app local h5 module or a server remote h5 address and related parameters are selected to complete the jump, and the related parameters include a Web address and a Web page title.
5. The method for implementing UI exchange of APP based on server backend management configuration according to claim 4, wherein a button for the backend management to close the style card is provided in the style card of each business module in the front page of APP.
6. A system for implementing UI replacement of apps based on server backend management configuration, comprising:
splitting the module: splitting an existing app engineering business module into a plurality of independent business modules;
a configuration module: each page of the APP adopts recycleview list control, corresponding component cards are listed according to each service module to be displayed on each page of the APP, elements of the component cards are configured after being listed and stored in a remote private library, each page acquires all the component cards to be displayed through an interface, wherein the component cards refer to style cards, and the elements comprise font colors, font sizes, documentations, pictures, the widths of the pictures and the heights of the pictures;
a skip module: each component card performs click hopping based on a native module in the business module or a loaded h5 module.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111030711.XA CN113656062A (en) | 2021-09-03 | 2021-09-03 | Method and system for realizing UI (user interface) replacement of app based on server back management configuration |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111030711.XA CN113656062A (en) | 2021-09-03 | 2021-09-03 | Method and system for realizing UI (user interface) replacement of app based on server back management configuration |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113656062A true CN113656062A (en) | 2021-11-16 |
Family
ID=78482778
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111030711.XA Pending CN113656062A (en) | 2021-09-03 | 2021-09-03 | Method and system for realizing UI (user interface) replacement of app based on server back management configuration |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113656062A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106075911A (en) * | 2016-07-12 | 2016-11-09 | 竞技世界（北京）网络技术有限公司 | A kind of generation method and device of the micro-end of web game |
| CN108089878A (en) * | 2017-12-14 | 2018-05-29 | 腾讯科技（深圳）有限公司 | Page info shows and generation method, apparatus and system |
| CN108733443A (en) * | 2018-05-09 | 2018-11-02 | 成都市极米科技有限公司 | A kind of APP dynamic configuration systems and its implementation, Dynamic Configuration based on android system |
| CN111191171A (en) * | 2019-12-31 | 2020-05-22 | 北京奇才天下科技有限公司 | Multi-Fragment loading method and device based on android and electronic equipment |
| CN113076163A (en) * | 2021-04-16 | 2021-07-06 | 北京京东拓先科技有限公司 | Card rendering method and device |
-
2021
- 2021-09-03 CN CN202111030711.XA patent/CN113656062A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106075911A (en) * | 2016-07-12 | 2016-11-09 | 竞技世界（北京）网络技术有限公司 | A kind of generation method and device of the micro-end of web game |
| CN108089878A (en) * | 2017-12-14 | 2018-05-29 | 腾讯科技（深圳）有限公司 | Page info shows and generation method, apparatus and system |
| CN108733443A (en) * | 2018-05-09 | 2018-11-02 | 成都市极米科技有限公司 | A kind of APP dynamic configuration systems and its implementation, Dynamic Configuration based on android system |
| CN111191171A (en) * | 2019-12-31 | 2020-05-22 | 北京奇才天下科技有限公司 | Multi-Fragment loading method and device based on android and electronic equipment |
| CN113076163A (en) * | 2021-04-16 | 2021-07-06 | 北京京东拓先科技有限公司 | Card rendering method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10416851B2 (en) | Electronic publishing mechanisms | |
| CN107818143B (en) | Page configuration and generation method and device | |
| US9311427B2 (en) | Automated generation of mobile optimized website based on an existing conventional web page description | |
| US20140222553A1 (en) | Dynamic Website Campaign Builder for Merchandising | |
| US20130326333A1 (en) | Mobile Content Management System | |
| CN113239672B (en) | Target file editing method and device, electronic equipment and storage medium | |
| US20150227276A1 (en) | Method and system for providing an interactive user guide on a webpage | |
| CN109583591A (en) | Method and system for simplified knowledge engineering | |
| CN109375914A (en) | Information remote exchange method and system | |
| CN102662666A (en) | Method and device for creating interface menu | |
| US11175800B2 (en) | Element mapping and rule building systems and methods for contextual site visitor engagement | |
| CN113360106B (en) | Webpage printing method and device | |
| US8495600B2 (en) | Display method, corresponding computer program and device | |
| Chen et al. | ZK: AJAX without the JavaScript framework | |
| CN113656062A (en) | Method and system for realizing UI (user interface) replacement of app based on server back management configuration | |
| CN114168875A (en) | Page program generation method and device, computer equipment and storage medium | |
| CN113849257A (en) | Page processing method, device, medium and electronic equipment | |
| McFarland | Dreamweaver CS5: The Missing Manual | |
| Derks | React projects: build 12 real-world applications from scratch using react, react native, and react 360 | |
| EP4042272A1 (en) | User interface generation | |
| CN111399836A (en) | Method and device for modifying page attribute | |
| CHEN | Developing a corporate website for anlu aima electric bicycle shop | |
| Nguyen | Building e-commerce solutions with Woocommerce | |
| Patel | Sitecore Cookbook for Developers | |
| CN111949266A (en) | Webpage generation method and device and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |