A local debugging method for H5 pages in HybridApp

Abstract

The present invention provides an H5 page local debugging method suitable for HybridApp, comprising the following steps: step 1: modifying a router file, configuring a meta attribute identifier for routes that use the App as an entry, and displaying the identifier through a menu; step 2: developing a menu page, and rendering the menu configured with the meta attribute; step 3: distinguishing environments for the H5 project, and setting a development environment and a production environment; step 4: intercepting routes that access the H5 page, and performing relevant processing and judgment; and step 5: identifying a token obtained in step 4. The present invention simulates the login logic of an App, so that when an H5 developer performs self-testing, the H5 developer can obtain a token independently without relying on a native developer, thereby reducing the number of communications between the H5 developer and the native developer during testing and lowering the communication cost. During the debugging process, the developer can open the menu page, freely select and enter the page to be debugged, thereby greatly saving development time.

Description

Technical Field

[0001] The present invention relates to the field of computer network technology, and in particular to an H5 page local debugging method applicable to HybridApp. Background Art

[0002] Since the rise of the mobile internet boom, numerous companies have entered the market. However, there are too few mobile application developers, and many companies cannot afford to maintain a professional mobile application development team with cross-platform development capabilities. It was by chance that the Hybrid App technology emerged, which leverages the low-cost cross-platform development advantages of H5 (HTML5) while also possessing the characteristics of Native Apps. Because Hybrid Apps use web language coding, the development cost and difficulty are much lower than Native Apps. When loading an H5 page, the App passes the user token to the H5 page through the access address, allowing the H5 page to obtain permission to call the interface to query data.

[0003] During the development process, H5 page developers need to debug the page locally. Without a token to provide, they can only capture the token in the App for testing and repeat the capture after the token expires. However, many H5 developers do not know how to capture data in the App, so they need to communicate frequently with Native developers to ask them to provide tokens and use them for debugging when accessing H5 pages, which increases communication costs. At the same time, when H5 developers simulate debugging in the browser, they are not in the App environment and lack an entry point. They can only find the access path in the code for debugging. Especially when several pages need to be debugged together, they need to manually enter the access path in the browser, which increases the time cost of local debugging and reduces the R&D efficiency of H5 developers. Summary of the Invention

[0004] In view of the deficiencies in the prior art, the present invention aims to provide a local debugging method for H5 pages suitable for HybridApp to solve the problems raised in the above background technology. The present invention solves the problems in the prior art by.

[0005] To achieve the above object, the present invention is implemented through the following technical solution: a local debugging method for an H5 page applicable to a HybridApp, comprising the following steps:

[0006] Step 1: Modify the router file, configure the meta attribute identifier for the routes that use the App as the entry, and display them in the menu;

[0007] Step 2: Develop the menu page and render the menu configured with meta attributes;

[0008] Step 3: Differentiate the environments for the H5 project, set up the development environment and production environment, and store the environment variable NODE_ENV and the account and password for testing in the .env file;

[0009] Step 4: Intercept the route to the H5 page and check whether there is a token in the local storage during the interception. When the token exists in the local storage, the page corresponding to the token will be loaded. When the token does not exist in the local storage, the next step of judgment will be made by checking whether the access address carries the token. When the access address carries the token, the token is stored in the local storage and the relevant page is loaded. When the access address does not carry the token, the next step of processing will be made by judging the current environment. When in the development environment, the token will be obtained by simulating the login logic of the App and the token obtained by the simulated App will be stored in the local storage. When in a non-development environment, that is, in a production environment, an error message will be generated and the App will be notified to pass in the token.

[0010] Step 5: Identify the token obtained in step 4. If the token is invalid, repeat step 4. If the token is valid, determine whether the page accessed by the relevant token exists. If the page exists, load the relevant access page. If the page does not exist, load the default menu page.

[0011] As an improvement to the H5 page local debugging method applicable to HybridApp described in the present invention, the identification method in step 1 is: meta:{title:menu name}.

[0012] As an improvement to the H5 page local debugging method applicable to HybridApp described in the present invention, the development environment setting steps are as follows:

[0013] NODE_ENV='development'

[0014] VUE_APP_ACCOUNT="00001"

[0015] VUE_APP_PASSWORD="123456".

[0016] As an improvement to the local debugging method for an H5 page applicable to a HybridApp described in the present invention, the production environment setting steps are as follows:

[0017] NODE_ENV = 'production'.

[0018] As an improvement to the H5 page local debugging method applicable to HybridApp described in the present invention, when the token expires, the above steps will be repeated to obtain a new token to enter the access page.

[0019] As an improvement to the H5 page local debugging method suitable for HybridApp described in the present invention, the login logic of the simulated APPApp is: simulate the user entering the account password, call the login interface through information entry, and extract the relevant token from the login interface after it appears. When calling the login interface, the login status is identified through the Cookie information in the page information. If the login is unsuccessful, the failure information will be fed back to the staff.

[0020] Compared with the prior art, the present invention has the following beneficial effects:

[0021] 1. By simulating the login logic of the APP, the present invention enables H5 developers to obtain tokens independently when conducting self-tests without relying on Native developers, thus reducing the number of communications between H5 developers and Native developers during testing and lowering communication costs.

[0022] 2. During the debugging process, the developer can open the menu page, select and enter the page they want to debug at will. After the token expires, a new token value can be automatically obtained without additional work. The developer can click the menu again to continue debugging, which greatly saves development time.

[0023] 3. In the future, if developers want to switch accounts, they only need to modify the username and password in the environment variables to successfully obtain the corresponding token. In addition, the test environment and production environment are internally distinguished, which will not affect the operation of the code in the production environment and will not change the original H5 page token acquisition method, so the scope of application is wider. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the specific implementation of the present invention or the technical solutions in the prior art, the drawings required for describing the specific implementation or the prior art will be briefly introduced below. Obviously, the drawings described below are only one implementation of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0025] Figure 1 This is a schematic diagram of the H5 page access process structure of the present invention;

[0026] Figure 2 This is a schematic diagram of the environment variable module structure of the present invention. DETAILED DESCRIPTION

[0027] In order to make the technical means, creative features, objectives and effects achieved by the present invention easy to understand, the technical solutions in the specific implementation methods of the present invention are clearly and completely described below to further illustrate the present invention. Obviously, the specific implementation methods described are only part of the implementation methods of the present invention, rather than all styles.

[0028] This specific implementation method is a local debugging method for the H5 page of HybridApp. The H5 page access process structure diagram is as follows: Figure 1 As shown, the schematic diagram of the environment variable module structure is as follows Figure 2 As shown, the local debugging method for the H5 page of HybridApp includes the following steps:

[0029] Step 1: Modify the router file, configure the meta attribute identifier for the routes that use the App as the entry, and display them in the menu;

[0030] Step 2: Develop the menu page and render the menu configured with meta attributes;

[0031] Step 3: Differentiate the environments for the H5 project, set up the development environment and production environment, and store the environment variable NODE_ENV and the account and password for testing in the .env file;

[0032] Step 4: Intercept the route to the H5 page and check whether there is a token in the local storage during the interception. When the token exists in the local storage, the page corresponding to the token will be loaded. When the token does not exist in the local storage, the next step of judgment will be made by checking whether the access address carries the token. When the access address carries the token, the token is stored in the local storage and the relevant page is loaded. When the access address does not carry the token, the next step of processing will be made by judging the current environment. When in the development environment, the token will be obtained by simulating the login logic of the App and the token obtained by the simulated App will be stored in the local storage. When in a non-development environment, that is, in a production environment, an error message will be generated and the App will be notified to pass in the token.

[0033] Step 5: Identify the token obtained in step 4. If the token is invalid, repeat step 4. If the token is valid, determine whether the page accessed by the relevant token exists. If the page exists, load the relevant access page. If the page does not exist, load the default menu page.

[0034] At the same time, the identification method in step 1 is: meta:{title:menu name}, and the development environment setting steps are:

[0035] NODE_ENV='development'

[0036] VUE_APP_ACCOUNT="00001"

[0037] VUE_APP_PASSWORD="123456"

[0038] The steps to set up a production environment are:

[0039] NODE_ENV='production'

[0040] When the token expires, the above steps will be repeated to obtain the token again to enter the access page. The login logic of the simulated APPApp is: simulate the user entering the account password, enter the information, call the login interface, and extract the relevant token from the login interface after it appears. When calling the login interface, the login status is identified through the cookie information in the page information. If the login is unsuccessful, the failure information will be fed back to the staff.

[0041] When using this technical solution, first, modify the routing file. All routes that serve as entrances in the App are configured with meta attributes to identify the menus that need to be displayed, such as meta:{title:menu name}. Then develop the menu page, render all the menus configured with meta attributes, and each menu will jump to the corresponding page when clicked. This page serves as the default page for the project. Secondly, the H5 project is divided into development environment and production environment by environment. First, store the environment variable NODE_ENV and the account password for testing in the .env file, and then intercept the route when accessing the H5 page. First, determine whether there is a token in localstorage. If so, enter the corresponding page. If not, determine whether the access address carries a token. If so, store the token in localstorage and load the page. If not, determine the current environment. If the current environment is a development environment, the app's login logic is simulated, and a token is obtained using the account and password stored in .env. The obtained token is then stored in localstorage and the access page is entered. If the access address cannot be matched to a corresponding page in the route or if " / " is directly accessed, the default menu page will be opened to facilitate debugging. If the environment is a production environment, an error message is thrown to the app and the app is notified to pass in the token. In subsequent interface accesses, the token is read from localstorage and the interface is accessed to read data. If the token expires, the above logic is repeated, a new token is obtained, and the access page is entered.

[0042] The above describes the main technical features and basic principles of the present invention and the related advantages. It is obvious to those skilled in the art that the present invention is not limited to the details of the above exemplary embodiments and that the present invention can be implemented in other specific forms without departing from the concept or essential characteristics of the present invention. Therefore, from all perspectives, the above-mentioned specific embodiments should be regarded as exemplary and non-restrictive. The scope of the present invention is defined by the appended claims rather than the foregoing description, and it is intended that all changes that come within the meaning and range of equivalents of the claims be included within the present invention.

[0043] In addition, it should be understood that although this specification is described according to various implementation methods, not every implementation method contains only one independent technical solution. This narrative method of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each implementation method can also be appropriately combined to form other implementation methods that can be understood by those skilled in the art.

Claims

1. A local debugging method for an H5 page of a HybridApp, characterized in that: The steps include: Step 1: Modify the router file, configure the meta attribute identifier for the routes that use the App as the entry, and display them in the menu; Step 2: On the menu development page, render the menu configured with meta attributes; Step 3: Differentiate the environments for the H5 project, set up the development environment and production environment, and store the environment variable NODE_ENV and the account and password for testing in the .env file; Step 4: Intercept the route to the H5 page and check whether there is a token in the local storage during the interception. When the token exists in the local storage, the page corresponding to the token will be loaded. When the token does not exist in the local storage, the next step of judgment will be made by checking whether the access address carries the token. When the access address carries the token, the token is stored in the local storage and the relevant page is loaded. When the access address does not carry the token, the next step of processing will be made by judging the current environment. When in the development environment, the token will be obtained by simulating the login logic of the App and the token obtained by the simulated App will be stored in the local storage. When in a non-development environment, that is, in a production environment, an error message will be generated and the App will be notified to pass in the token. Step 5: Identify the token obtained in step 4. If the token is invalid, repeat step 4. If the token is valid, determine whether the page accessed by the relevant token exists. If the page exists, load the relevant access page. If the page does not exist, load the default menu page. The identification method in step 1 is: meta:{title:menu name}, The steps for setting up the development environment are: NODE_ENV = 'development' VUE_APP_ACCOUNT = "00001" VUE_APP_PASSWORD = "123456", The steps for setting up the production environment are: NODE_ENV = 'production', The login logic of the simulated APP is as follows: simulate the user entering the account password, call the login interface through information entry, and extract the relevant token from the login interface after it appears. When calling the login interface, the login status is identified through the cookie information in the page information. If the login is unsuccessful, the failure information will be fed back to the staff.

Images