En un escenario de desarrollo híbrido, a veces es necesario transferir el evento de devolución original a H5 para que lo procese y dejar que H5 realice algunas operaciones: por ejemplo, al hacer clic en la devolución original, H5 mostrará un aviso o guardará algunos datos. Así que ¿cómo se hace?
Implementación de H5, tome Vue como ejemplo:
Paso 1: en mount(), debe montar el método js para la página, de la siguiente manera
mounted() {
/**
* 如果需要拦截原生的返回事件,需要挂载js方法（方法名任意）.
* 该方法返回true代表H5拦截处理，见第2步.
*/
window.NativeBackListener = this.NativeBackListener;
},
Paso 2: agregue el método js para que se cuelgue en los métodos
methods:{
NativeBackListener() {
this.handleNativeBack();//自定义方法，可以在该方法中进行场景处理。
return true;//这个true可以代表该H5页面要拦截原生的返回事件进行处理
},
handleNativeBack（）{
//....进行场景处理
}
}
Implementación nativa, tomando Android como ejemplo:
El retorno nativo de Android se puede devolver mediante un gesto (retorno físico) o haciendo clic en la flecha de retorno. En realidad, no hay diferencia en el procesamiento.Podemos interceptar y dejar que webview ejecute el método NativeBackListener definido anteriormente, y juzgar si el H5 intercepta el evento de retorno nativo de acuerdo con el resultado de la devolución de llamada, para realizar el procesamiento correspondiente.
Para el procesamiento físico, invalide el método onKeyDown
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
webContainer.evaluateJavascript("javascript:NativeBackListener()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
if ("false".equals(value) || "null".equals(value)) {
finish();//h5页面不进行拦截，finish当前页
} else if ("true".equals(value)) {
// h5进行拦截了，就不能finish当前页
}
}
});
}
return true;
}
Después de la prueba, se encuentra que al usar este método de implementación, si la página H5 no se carga, la función de retorno nativa no se verá afectada.