Method for adapting horizontal and vertical screens of Web page in iOS mobile phone App

Abstract

The invention discloses a method for adapting horizontal and vertical screens of a Web page in an iOS mobile phone App. The method comprises the following steps: supporting a local function of an iOS client; editing and configuring relevant information of a web page; realizing that global screen conversion of an app supports a root Type, and 0 represents a vertical screen; 1 represents that screen rotation is supported; 2 represents a forced landscape; supporting of a JavaScript method in a web page is carried out; and a calling step. According to the method, screen rotation support of the web page in the iOS App is more effectively achieved, the web page in the iOS App can support screen rotation like a native code through a screen rotation strategy depending on a client side and flexible configuration of related content, and performance is more optimized; transverse and vertical screen configuration of various skips of the web page is more perfected by introducing an editing configuration scheme; meanwhile, some unnecessary performance consumption is also reduced, and a method for realizing iOS Web page screen rotation by supporting common coordination of three parties through default configuration, editing configuration and JavaScript methods of a web page client lays a foundation for more and more web page implantation in the future.

Description

Technical Field

[0001] The present invention relates to the field of IT and software development technology, and in particular to a method for adapting a web page in an iOS mobile phone App to a horizontal or vertical screen. Background Art

[0002] As more and more apps switch to hybrid mode development (that is, part of the page is completed by native code, and part of the page is completed by web pages), there are more and more web pages in the app. However, in iOS programs, the horizontal and vertical screens of the program itself are unified with those of the web pages. For example, most mobile app pages are now strongly vertical, but if there is a page at this time, the web page needs to support horizontal and vertical screen functions or support manual screen rotation, this will conflict with the vertical screen architecture of the app. At the same time, the iOS system is not like Android, which does not have a horizontal and vertical screen method directly called for web pages.

[0003] In the past, web pages would adopt a one-size-fits-all approach for horizontal and vertical screens. Either they did not support horizontal or vertical screens, or they could only display in vertical screen. However, this was hard-coded, resulting in some web pages that should not rotate screens being rotated by rotating the screen. Some also used JavaScript interaction to notify, but if JavaScript was injected into each page, such as third-party pages mounted in the project and description pages, which did not require JavaScript interaction, it would increase invalid performance overhead.

[0004] In view of this, the embodiment of the present disclosure provides a method for adapting the horizontal and vertical screens of web pages in iOS mobile phone apps by integrating the current solution and introducing configuration-related content; using this method, perfect support for the horizontal and vertical screen functions of web pages can be achieved. Summary of the invention

[0005] The purpose of the present invention is to provide a method for adapting the horizontal and vertical screens of web pages in iOS mobile phone apps, a method built on Apple, through the open source framework WebViewJavascriptBridge, editing manual configuration of web page information and special processing of the horizontal screen of iOS project web pages, so that web pages can also support horizontal and vertical screen functions like native pages, so as to solve the problems raised in the above background technology.

[0006] To achieve the above object, the present invention provides the following technical solutions:

[0007] A method for adapting a web page in an iOS mobile phone App to a horizontal or vertical screen, comprising the following steps:

[0008] S1: Local function support for iOS client;

[0009] (1) Implement global app rotation support rotateType, 0 means portrait; 1 means support for rotation; 2 means forced landscape;

[0010] (2) Build a global container (portrait) and container-related horizontal and vertical screen support, which depends on the global rotateType;

[0011] (3) Build a web page controller to implement the horizontal and vertical screen methods and the input configuration of horizontal and vertical screen properties;

[0012] (4) Build a web page controller to implement the horizontal and vertical screen methods and the input configuration of horizontal and vertical screen properties;

[0013] (5) When the web page opens a new page, determine whether the page is horizontal or vertical and perform corresponding operations;

[0014] S2: Edit and configure the relevant information of the web page;

[0015] (1) The web page window module information adds the pageRotate field for horizontal and vertical screen support. 0 means vertical screen; 1 means support for screen rotation; 2 means forced horizontal screen. Add the isNeedJSBridge field to see if JavaScript method is needed: true to inject false not to inject;

[0016] (2) Maintain the domain name or URL list information interface. Each piece of information in the array includes: address information, pageRotate information that supports horizontal and vertical screens, and whether JavaScript is injected (isNeedJSBridge);

[0017] S3: Support for JavaScript methods in web pages;

[0018] (1) WKWebViewJavascriptBridge tripartite framework, establishes a bridge with the web page;

[0019] (2) The JavaScript end implements the horizontal and vertical screen attribute methods and the horizontal and vertical screen method calls;

[0020] (3) The client implements the assignment of horizontal and vertical screen attributes and the implementation of horizontal and vertical screen methods;

[0021] S4: Calling step;

[0022] (1) The editor configures a web page at a certain position in the mobile app, and also configures the horizontal and vertical screen support information such as domain name and website address. Each time the app is started, the edited listAray configuration information is requested and cached. When the web page is obtained, the homepage determines whether the page is an independent page, that is, obtains the top controller of the app and whether the web page is consistent. If it is not consistent, it is not an independent page, and the horizontal and vertical screen support of the web View is not used. The horizontal and vertical screen settings of the top controller itself are used; if it is consistent, it indicates that the independent page obtains the edit configuration pageRotate value and executes the S4.2 method; obtains the value of isNeedJSBridge and determines whether the page needs to be injected with avaScript method. If injection is required, execute step S4.3;

[0023] (2) By passing in the screen attribute field pageRotate, the page is processed in horizontal or vertical orientation. The judgment is made based on the pageRotate value. When pageRotate is 2, if the current page is in horizontal orientation, no processing is performed; if the current page is in vertical orientation, the horizontal orientation method of the page is called first; when pageRotate is not 2, if the current page is in horizontal orientation, the vertical orientation method of the page is called first; if the current page is in vertical orientation, no processing is performed. Finally, pageRotate is assigned to the rotate of the web page and the global App_Rotate.

[0024] (3) The iOS client imports the WKWebViewJavascriptBridge framework and connects to the framework on the web page, then monitors the method calls of the web side of JSBridge, and assigns the highest priority to the i value in the callback fullScreenType(i) method. At the same time, according to the lunchFullScreen method, the parameter i is entered as pageRotate, and the step S4.2 method is executed;

[0025] (4) When the web page is destroyed, the method in step 1.4 is executed. When a new web page is opened inside it, in the webview's proxy method didStartProvisionalNavigation (the proxy method for opening a new web page inside the web page), it is determined whether the domain name information or link address contains the url information in listArray. If not, no processing is performed; if it does, step 4.2 is called according to the pageRotate value in the address object; when it opens a new page, the method in step 1.5 is executed;

[0026] (5) Independent web page screen rotation attribute priority JavaScript control > Step 2.1 Direct configuration > Step 2.2 Edit domain name URL related configuration.

[0027] Preferably, in S1, a setting is made in the iOS global proxy AppDelegate to prohibit global horizontal screen (because most apps are vertical screen applications, the rotateType attribute is configured in AppdDelegate, the value is vertical, prohibiting horizontal screen; the value is allowed to be horizontal (rotate the mobile phone screen to horizontal screen); the value is only supported, and the attributes are collectively referred to as App_Rotate hereinafter; in the proxy method: supportedInterfaceOrientationsForWindow in AppDelegate, it is judged that App_Rotate only supports vertical screen direction; supports all screen directions; only supports horizontal screen direction, and in the proxy method: shouldAutorotate, it is judged that App_Rotate is returned as 1 or 2, and false is returned when it is 0.

[0028] Preferably, in S1, the following proxy method preferredInterfaceOrientationForPresentati is implemented in the app main container controller to return the vertical screen; shouldAutorotate returns false, the main container page does not support screen rotation, and the main container here can also be other controllers. In all parent container NavigationController controllers of the app, shouldAutorotate is implemented to return the shouldAutorotate value of the current child page in the parent container.

[0029] Preferably, in S3, for the surfaces that require JavaScript interaction in the client, the attribute field isNeedJSBridge in the above steps S2.1 and S2.2 can be edited and configured to be true, so that when the client reads that the field is tur, JavaScript is injected into the webView. For some third-party pages or simple introduction pages, the field is denied and JavaScript does not need to be injected to reduce expenses. When isNeedJSBridge is configured to be true, the S3.2 method is executed.

[0030] Preferably, the client web page in S3 implements the call of JavaScript, and implements the page horizontal and vertical screen methods fullScreenTye(i) respectively. After receiving i, the page screen rotation setting is assigned with reference to the method in step S2.1; the unchFullScreen(bool) method calls the page horizontal screen method according to bool being true, and calls the page vertical screen method according to bool being false.

[0031] In summary, due to the adoption of the above technology, the beneficial effects of the present invention are:

[0032] 1. More effective solution to screen rotation support for web pages in iOS App: By relying on the client's screen rotation strategy and flexibly configuring related content, web pages in iOS App can support screen rotation like native code.

[0033] 2. More optimized performance: By introducing the editing configuration solution, various jumps and vertical screen configurations of web pages are better improved, and some unnecessary performance consumption is also reduced.

[0034] 3. Through the web page client default configuration, editing configuration, and JavaScript method, the three parties support the coordinated implementation of the iOS Web page screen rotation method, which more fully adapts to the iOS web page and the horizontal and vertical screen functions, laying the foundation for the implantation of more and more web pages in the future. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The accompanying drawings constituting a part of the present invention are used to provide a further understanding of the present invention, so that other features, purposes and advantages of the present invention become more obvious. The accompanying drawings of the exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0036] Figure 1 It is a schematic diagram of the overall execution steps of the present invention. DETAILED DESCRIPTION

[0037] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work belong to the scope of protection of the present invention. Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the invention claimed for protection, but merely represents the selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work belong to the scope of protection of the present invention.

[0038] In the description of the present invention, it is necessary to understand that the terms indicating orientation or positional relationship are based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation on the present invention.

[0039] In the present invention, unless otherwise clearly specified and limited, the terms "installed", "connected", "connected", "fixed" and the like should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium, it can be the internal connection of two elements or the interaction relationship between two elements. For ordinary technicians in this field, the specific meanings of the above terms in the present invention can be understood according to the specific circumstances of the specification.

[0040] The present invention provides Figure 1 A method for adapting the horizontal and vertical screens of a web page in an iOS mobile phone App is shown, and a method for adapting the horizontal and vertical screens of a web page in an iOS mobile phone App comprises the following steps:

[0041] Debug tool interface generation: Use Xcode development tools.

[0042] Debug tool method binding: The following steps can be used to implement a method to adapt the horizontal and vertical screens of web pages in iOS mobile phone apps.

[0043] iOS client local function support

[0044] In the iOS global proxy AppDelegate, set to prohibit global landscape mode (because most apps are portrait applications). In AppdDelegate, configure the rotateType property value. The value is 0, portrait mode, prohibiting landscape mode; the value is 1, allowing landscape mode (rotating the phone screen to landscape mode); the value is 2, only supporting landscape mode. The property is collectively referred to as App_Rotate below. In the proxy method supportedInterfaceOrientationsForWindow in AppDelegate, determine the value of App_Rotate. If it is 0, only portrait mode is supported; if it is 1, all screen directions are supported; if it is 2, only landscape mode is supported. In the proxy method shouldAutorotate, determine the value of App_Rotate. If it is 1 or 2, return true, and if it is 0, return false.

[0045] In the app's main container TabBarController controller, implement the following proxy method preferredInterfaceOrientationForPresentation to return to the vertical screen;

[0046] If shouldAutorotate returns false, the main container page does not support screen rotation. The main container here can also be other controllers. In all parent container NavigationController controllers of the app, implement shouldAutorotate to return the shouldAutorotate value of the current child page in the parent container.

[0047] Build a container page controller for webView (hereinafter referred to as web page). Set the rotate property of the controller (0 forces vertical screen, 1 supports screen rotation, 2 forces horizontal screen). The rotate value is an externally passed value, and the default value is 1; set the fromRotate property to record the original App_Rotate value, so that the App_Rotate value can be restored after the page is destroyed (returned). In the viewWillAppear method, the App_Rotate value is equal to the rotate value. The rotate value is judged in the shouldAutorotate of the page. When it is 1 or 2, it returns true (supports horizontal screen), and when it is 0, it returns false (does not support horizontal screen). Implement the iOS code horizontal and vertical screen method (horizontal screen) in the webView page

[0048] forceOrientationLandscape, (vertical screen) forceOrientationPortrait, and expose them to facilitate subsequent direct calls by js.

[0049] In the web page return method (dismissViewController, three popViewControllers), first determine fromRotate. If fromRotate is 2, if the current page is in landscape mode, return directly. If the current page is in portrait mode, first change to landscape mode and then return. If fromRotate is not 2, determine whether the current page is in landscape mode. If not, return directly. If yes, restore to portrait mode first, then return, and restore App_Rotate to fromRotate. If the page to be returned supports special settings for screen rotation, set App_Rotate to the special settings.

[0050] The relevant functional jump to a new page in the web page also determines whether the current page is in landscape mode. If it is, restore the portrait mode first and then jump. In the pushViewController, presentViewController and other methods of jumping to a new page, restore the value of App_Rotate to 0. If the new page has a screen rotation setting, use the setting of the new page and assign the setting to App_Rotate. If you return to the web page from the new page, the viewWillAppear method will be triggered by the iOS system itself, thereby executing the relevant steps in 1.5 again.

[0051] Edit configuration web page related information

[0052] 2.1 In the project configuration, a new field pageRotate is added to the web page for horizontal and vertical screen attributes (0 means that the web page only supports vertical screen, 1 means that the web page can support screen rotation, and 2 means that the web page can only support horizontal screen); there is also a field isNeedJSBridge, which indicates whether the Javascript method needs to be injected.

[0053] 2.2 Configure the static maintainable address object array listArray, the objects include url: domain name information or link address; pageRotate: screen rotation attribute field, this field configuration is the same as 2.1; there is also a field isNeedJSBridge, whether the Javascript method needs to be injected.

[0054] Support for Javascript methods in web pages

[0055] 3.1 For pages that require js interaction in the client, you can edit and configure whether the attribute field isNeedJSBridge in steps 2.1 and 2.2 above is true, so that when the client reads that the field is true, it injects js into webView. For some third-party pages or simple introduction pages, configure no, no js is injected, and performance overhead is reduced. When isNeedJSBridge is configured to true, execute method 3.2.

[0056] Import the WKWebViewJavascriptBridge third-party library (this library is mainly used to bridge native code and web pages) into the 3.2 project, and set two calling methods on the web side: one is the page horizontal and vertical screen status fullScreenType(i), i is int type, when i is 0, only supports vertical screen; when i is 1, supports screen rotation; when i is 2, only supports horizontal screen. The other method is lunchFullScreen(bool), when bool is true, triggers the screen horizontal screen operation, when bool is false, triggers the screen vertical screen operation.

[0057] 3.3 The client web page implements the call of js, and implements the page horizontal and vertical screen methods fullScreenType(i) respectively. After receiving i, refer to the method in step 2.1 to set the page screen rotation; the unchFullScreen(bool) method calls the page horizontal screen method according to bool being true, and calls the page vertical screen method according to bool being false.

[0058] 4. Calling steps

[0059] 4.1 Editing configures a web page at a certain location in the mobile app, and also configures the horizontal and vertical screen support information such as domain name and website address. Every time we start the app, we request the edited listArray configuration information and cache it. When we get the web page, we first determine whether the web page is an independent page, that is, whether the top controller of the app is consistent with the web page. If they are not consistent, it is not an independent page, and the horizontal and vertical screen support of the webView is not used. The horizontal and vertical screen settings of the top controller itself are used; if they are consistent, it means that the independent page obtains the edit configuration pageRotate value and executes the 4.2 method; obtains the value of isNeedJSBridge and determines whether the page should be injected with js methods. If injection is required, execute step 4.3.

[0060] 4.2 Handle the horizontal and vertical screen conditions of the page by passing in the screen attribute field pageRotate, and judge by the pageRotate value. When pageRotate is 2, if the current page is horizontal, it will not be processed; if the current page is vertical, the horizontal screen method of the page will be called first; when pageRotate is not 2, if the current page is horizontal, the vertical screen method of the page will be called first; if the current page is vertical, it will not be processed, and finally pageRotate will be assigned to the rotate of the web page and the global App_Rotate.

[0061] 4.3 The iOS client imports the WKWebViewJavascriptBridge framework, connects to the framework on the web page, and then listens to the method call of the web side of JSBridge.

[0062] The i value in the fullScreenType(i) method has the highest priority. At the same time, according to the lunchFullScreen method, the parameter i is pageRotate and the step 4.2 method is executed.

[0063] 4.4 When the web page is destroyed, the method in step 1.4 is executed. When a new web page is opened inside it, in the webview's proxy method didStartProvisionalNavigation (the proxy method for opening a new web page inside the web page), it is determined whether the domain name information or link address contains the url information in listArray. If not, it is not processed; if it is contained, step 4.2 is called according to the pageRotate value in the address object; when it opens a new page, the method in step 1.5 is executed.

[0064] 4.5 Independent web page screen transfer attribute priority js control > Step 2.1 Direct configuration > Step 2.2 Edit the domain name URL related configuration.

Claims

1. A method for adapting the horizontal and vertical screens of web pages in an iOS mobile phone App, characterized by: The following steps are involved: S1: Local function support for iOS client; (1) Implement the app's global screen rotation support rotateType, 0 means vertical screen; 1 means support for screen rotation; 2 means forced horizontal screen; (2) Build global container-related horizontal and vertical screen support, which depends on the global rotateType; (3) Build a web page controller to implement the horizontal and vertical screen methods and the input configuration of horizontal and vertical screen properties; (4) Build a web page controller to implement the horizontal and vertical screen methods and the input configuration of horizontal and vertical screen properties; (5) When the web page opens a new page, determine whether the page is horizontal or vertical and perform corresponding operations; S2: Edit and configure the relevant information of the web page; (1) The web page window module information adds the pageRotate field for horizontal and vertical screen support, 0 means vertical screen; 1 means support for screen rotation; 2 indicates whether the JavaScript method field isNeedJSBridge:true is injected and false is not injected; (2) Maintain the domain name or URL list information interface. Each piece of information in the array includes: address information, pageRotate information that supports horizontal and vertical screens, and whether JavaScript is injected (isNeedJSBridge); S3: Support for JavaScript methods in web pages; (1) WKWebViewJavascriptBridge tripartite framework, establishes a bridge with the web page; (2) The JavaScript end implements the horizontal and vertical screen attribute methods and the horizontal and vertical screen method calls; (3) The client implements the assignment of horizontal and vertical screen attributes and the implementation of horizontal and vertical screen methods; S4: Calling step; (1) The editor configures the web page at a certain location in the mobile app, and also configures the horizontal and vertical screen support information such as the domain name and website address. We configure the listArray configuration information and cache it each time we request editing. When we get the page, the homepage determines whether the web page is an independent page, that is, whether the top controller of the app is consistent with the web page. If not, it is an independent page and the webView is not used. The horizontal and vertical screen support uses the horizontal and vertical screen settings of the top controller itself: If it is consistent, it means that the independent page obtains the pageRotate value configured by the editor and executes the S4.2 method: Get the value of isNeedJSBridge and decide whether the page should be injected with JavaScript method. If injection is required, execute the S4.3 step; (2) By passing in the screen attribute field pageRotate, the horizontal and vertical screen conditions are processed and judged by the page value. When page is 2, if the current page is horizontal, no processing is performed; if the current page is vertical, the horizontal screen method of the page is called first; when page is not 2, if the current page is horizontal, the vertical screen method of the page is called first; if the current page is vertical, no processing is performed, and finally pageRotate is assigned to the rotate of the web page and the global App_Rotate; (3) The iOS client imports the WKWebViewJavascriptBidge framework and connects to the framework on the web interface, then monitors the method call on the JSBridge end, and assigns the highest value to the i value in the fullScreenType(i method, and at the same time, according to the lunchFullScreen method, the parameter i is pageRotate, and the step S4.2 method is executed; (4) When the web page is destroyed, the method in step 4 is executed. When a new web page is opened inside it, in the webview's proxy method didStartProvisionalNavigation (the proxy method for opening a new web page inside the web page), it is determined whether the domain name information or link address contains the url information of listArray. If not, it is ignored; if it is contained, step 4.2 is called according to the pageRotate value in the address object; when it opens a new page, the method in step 1.5 is executed; (5) Independent web page screen rotation attribute priority JavaScript control > Step 2.1 Direct configuration > Step 2.2 Edit domain name URL related configuration.

2. A method for adapting the horizontal and vertical screens of web pages in an iOS mobile phone App according to claim 1, characterized in that: In the S1, the global horizontal screen is prohibited in the iOS global proxy AppDelegate (because most of them are vertical screen applications), and the attribute value is configured in AppdDelegate. The value is 0, vertical screen, horizontal screen prohibited; the value is 1, horizontal screen is allowed (rotate the phone screen); the value is 2, only horizontal screen is supported, and the attribute is collectively referred to as App_Rotate below; the value of App is judged in the proxy method: supportedInterfaceOrientationsForWindow in AppDelegate. If it is 0, only vertical screen orientation; if it is 1, all screen orientations are supported; if it is 2, only horizontal screen orientation is supported. In the proxy method: shouldAutorotate, the App value is judged. If it is 1 or 2, true is returned, and false is returned when it is 0.

3. A method for adapting the horizontal and vertical screens of web pages in iOS mobile phone apps according to claim 1, characterized in that: In S1, in the app's main container controller, the following proxy method preferredInterfaceOrientationForPresentation is implemented to return the vertical screen; shouldAutorotate returns false, the main container page does not support screen rotation. The main container here can also be other controllers. In all parent container NavigationController controllers of the app, shouldAutorotate is implemented to return the shouldAutorotate value of the current child page in the parent container.

4. The method for adapting the horizontal and vertical screen of a web page in an iOS mobile phone App according to claim 1, characterized in that: In the S3, for pages that require JavaScript interaction in the client, the attribute field isNeedJSBridge in the above steps S2.1 and S2.2 can be edited and configured to be tur, so that when the client reads the field as ture, JavaScript is injected into the webView. For some third-party pages or simple introduction pages, JavaScript does not need to be injected to reduce expenses. When isNeedJSBridge is configured to be ture, the S3.2 method is executed.

5. The method for adapting the horizontal and vertical screen of a web page in an iOS mobile phone App according to claim 1, characterized in that: The client web page in S3 implements the call of JavaScrip, and implements the page horizontal and vertical screen methods fullScreenTyp(i) respectively. After receiving i, refer to the step S2.1 method to set the page screen rotation; the unchFullScreen(bool) method calls the page horizontal screen method according to bool being true, and calls the page vertical screen method according to bool being false.

Images