Original articles, welcome to reprint, please indicate the source for reprinting. Welcome everyone to leave a message and exchange!
Problem description:
During the development of the Hybrid App, there is one of the following situations: When the user fills in the information and submits it, enter the completion prompt page . At this point, when the user clicks the back button, it will return to the previous data submission page, and the user may resubmit the data that has already been submitted. This leads to data duplication.
Such as: 1.html (module home page)—>2.html (submission page)—>3.html (completion prompt page)
Solution One:
In 2.html, when the submission request is completed, if it succeeds, set a key-value pair in sessionStorage (about the usage of sessionStorage and the difference with localstorage), (also can be in 3.html Is set in the file, it means that it has been submitted successfully) as follows:
window.sessionStorage.setItem("buyStatus","true");
When you press in 3.html When the return button is used, it returns to 2.html. Execute Js script when 2.html is loaded
if(window.sessionStorage.getItem("buyStatus") == "true"){
window.history.go(-1);
}
If the condition is true, return to the previous page (1.html) immediately. This prevents users from repeatedly submitting information in 2.html. When 1.html is loaded, this state must be cleared. As follows:
if(window.sessionStorage.getItem("buyStatus") == "true"){
window.sessionStorage.removeItem("buyStatus");
} — Advantage: No need to modify the code in the native app. Only need to modify the web. Disadvantages: Since the return script in 2.html is executed when the dom is loaded, the actual effect is that 2.html is closed immediately after being displayed, so this method will give the user the feeling of a flash on the screen, and the user experience is not very good. ####Solution 2: The return operation is completely controlled by the web itself, and the native app is only responsible for monitoring the return key event. The idea is roughly as follows: Provide the goBack() method and the depth variable in the web page. When the user presses the return key, the native app calls the goBack method in the web. The function body of goBack() is as follows: //sys.jsvar depth;function goBack(){ window.history.go(depth);}
The specific implementation is as follows: 1.html 2.html 3.html all introduce the above sys.js. So all three files have goBack() and depth variables. After successfully submitting in 2.html, enter 3.html, and assign depth to -2 in 3.html. When pressing the back key, android (ios) calls the goBack method of the web:
/*android code*/
public void onBackPressed() {
// super.onBackPressed();
if(webview.canGoBack()){
webview.loadUrl("javascript:goBack()");
}else {
finish();
}
}
/*IOS code*/
//todo to be added
In this way, the web will return directly from 3.html to 1.html . Press the return key again to exit the webview interface.
Advantages: The navigate function is completely removed from the web side, which facilitates the realization of more complex navigation functions in the future.
Disadvantages: 1. If your project did not do this before, you should change to this mode. All previous pages must introduce sys.js and assign an appropriate value to the depth. If there are too many pages, the workload is not small. 2. If the app needs to display some pages displayed in other places (such as the web in WeChat), if the WeChat web does not have sysjs, it will cause the phenomenon of no response when pressing the return button. Two solutions to this phenomenon:
a. The WeChat web display is no longer in the app, but is opened by calling the system's default browser.
b. Create a new webview activity (webviewActivity2) in the app. The activity needs to handle the return key logic, as follows:
public void onBackPressed() {// super.onBackPressed( ); if(webview.canGoBack()){ webview.goBack(); }else {finish(); }}
When it is detected in the
shouldOverrideUrlLoading
method of the webviewclient of the original webviewactivity to jump to the WeChat page, it will jump to the webviewActivity2 display Page, so that when the user presses the return button, the above logic will be executed, and the native app will return the web page to the previous page.
better method:
//TODO expects friends who encounter the same problem to provide a better method.
Original articles, welcome to reprint, please indicate the source for reprinting. Welcome everyone to leave a message and exchange!
Problem description:
During the development of the Hybrid App, there is one of the following situations: When the user fills in the information and submits it, enter the completion prompt page . At this point, when the user clicks the back button, it will return to the previous data submission page, and the user may resubmit the data that has already been submitted. This leads to data duplication.
Such as: 1.html (module home page)—>2.html (submission page)—>3.html (completion prompt page)
Solution One:
In 2.html, when the submission request is completed, if it succeeds, set a key-value pair in sessionStorage (about the usage of sessionStorage and the difference with localstorage), (also can be in 3.html Is set in the file, it means that it has been submitted successfully) as follows:
window.sessionStorage.setItem("buyStatus","true");
When you press in 3.html When the return button is used, it returns to 2.html. Execute Js script when 2.html is loaded
if(window.sessionStorage.getItem("buyStatus") == "true"){
window.history.go(-1);
}
If the condition is true, return to the previous page (1.html) immediately. This prevents users from repeatedly submitting information in 2.html. When 1.html is loaded, this state must be cleared. As follows:
if(window.sessionStorage.getItem("buyStatus") == "true"){
window.sessionStorage.removeItem("buyStatus");
} — Advantage: No need to modify the code in the native app. Only need to modify the web. Disadvantages: Since the return script in 2.html is executed when the dom is loaded, the actual effect is that 2.html is closed immediately after being displayed, so this method will give the user the feeling of a flash on the screen, and the user experience is not very good. ####Solution 2: The return operation is completely controlled by the web itself, and the native app is only responsible for monitoring the return key event. The idea is roughly as follows: Provide the goBack() method and the depth variable in the web page. When the user presses the return key, the native app calls the goBack method in the web. The function body of goBack() is as follows: //sys.jsvar depth;function goBack(){ window.history.go(depth);}
The specific implementation is as follows: 1.html 2.html 3.html all introduce the above sys.js. So all three files have goBack() and depth variables. After successfully submitting in 2.html, enter 3.html, and assign depth to -2 in 3.html. When pressing the back key, android (ios) calls the goBack method of the web:
/*android code*/
public void onBackPressed() {
// super.onBackPressed();
if(webview.canGoBack()){
webview.loadUrl("javascript:goBack()");
}else {
finish();
}
}
/*IOS code*/
//todo to be added
In this way, the web will return directly from 3.html to 1.html . Press the return key again to exit the webview interface.
Advantages: The navigate function is completely removed from the web side, which facilitates the realization of more complex navigation functions in the future.
Disadvantages: 1. If your project did not do this before, you should change to this mode. All previous pages must introduce sys.js and assign an appropriate value to the depth. If there are too many pages, the workload is not small. 2. If the app needs to display some pages displayed in other places (such as the web in WeChat), if the WeChat web does not have sysjs, it will cause the phenomenon of no response when pressing the return button. Two solutions to this phenomenon:
a. The WeChat web display is no longer in the app, but is opened by calling the system's default browser.
b. Create a new webview activity (webviewActivity2) in the app. The activity needs to handle the return key logic, as follows:
public void onBackPressed() {// super.onBackPressed( ); if(webview.canGoBack()){ webview.goBack(); }else {finish(); }}
When it is detected in the
shouldOverrideUrlLoading
method of the webviewclient of the original webviewactivity to jump to the WeChat page, it will jump to the webviewActivity2 display Page, so that when the user presses the return button, the above logic will be executed, and the native app will return the web page to the previous page.
better method:
//TODO expects friends who encounter the same problem to provide a better method.