I. Understanding Hybrid App
Hybrid apps are half-native, half-Web Hybrid apps. It needs to be downloaded and installed. It looks like a Native App, but only has a few UI Web Views and accesses the Web.
Hybrid App becomes more and more competitive in the application market with its advantages of flexible iteration, easy control and multi-terminal synchronization, mainly due to the fact that it uses H5 to develop some product functions with frequent changes and embed them in the application with the help of WebView control in the client. Therefore, we always encounter interaction problems between native Java code and JAVASCRIPT code in the web page.
Advantages: Low development cost, fast update, no need to notify users of updates, no need to manually upgrade, across multiple platforms and terminals.
Disadvantages: (1) temporary entry (2) no access to system-level notifications, reminders, actions, etc. (3) low retention (4) Limited design (5) poor experience
Ii. Communication between Javascript and Java in Hybrid App WebView
1. Check whether the WebView supports Javascript
Whether to set the WebView to support JavaScript function before Java and Js call each other:
mWebView.getSettings().setJavaScriptEnabled(true);
Copy the code
2. Java calls Javascript
The first step is to use javascript definitions to provide Java access to methods in the web page, just like normal method definitions, such as:
<script type="text/javascript">
function javaCallJs(message){ alert(message); }
</script>
Copy the code
If you use a framework (vue, react, etc.), you need to mount methods to Windows.
// Result of user login
window["loginResult"] = function (data) {
// Your code area
};
Copy the code
/ / if a component needs to be supplied to a Java call, it needs to be mounted to window.
mounted() {
// Open the apK method name with the Java convention
window.openApk = this.openApk;
},
openApk(res) {
//res is an argument returned by Java
// Your operation
},
Copy the code
3. Javascript calls Java
Direct call
function a(){
window.jmjs.openFile(path_url);
}
Copy the code
JMJS is a good call alias provided by Java, which needs to be determined by the internal Java staff. The upper part is the pass parameter path_url, which is very similar to the js pass parameter, just need to pass the parameter to the method provided by Java.
There are return parameters
If the Java developer has a return value in a method provided to the front end, the js can simply call it and receive it in a variable, such as:
let access_token = window.jmjs.getAccessToken();
console.log("====== Accepted access_token=======",access_token)
Copy the code
Third, optimize packaging and integrate your code
In order to facilitate the management of the code between JS and WebView Java in your project, we can optimize the code, such as:
Create a new Adapter.js (filename from) in the project utils file, and write all the calls and mount methods to the file
/** * WebView calls Java */
const jimiJS = {
// User login
jimiSdkLogin() {
if (typeof window.webkit ! ="undefined") {
window.prompt("jimiSdkLogin");
} else if (typeofjimiJS ! = ="undefined" && jimiJS.jimiSdkLogin) {
window.jmjs.login(); }},// Pass the URL argument to open a new WebView
jimiSdktoWebview(url) {
if (typeof window.webkit ! ="undefined") {
window.prompt("jimiSdktoWebview");
} else if (typeofjimiJS ! = ="undefined" && jimiJS.jimiSdktoWebview) {
window.jmjs.towebview(url); }},/** * start downloading *@param {*} Url Download address */
jimiSdkStartDownApk(url) {
console.log("🚀 ~ file: adapter.js ~ line 58 ~ jimiSdkStartDownApk ~ url", url)
if (typeof window.webkit ! ="undefined") {
window.prompt("jimiSdkStartDownApk");
} else if (typeofjimiJS ! = ="undefined" && jimiJS.jimiSdkStartDownApk) {
window.jmjs.startDownApk(url); }}};// Result of user login
window["loginResult"] = function (data) {
// Your business code
};
window["jimiJS"] = jimiJS;
export { jimiJS }; / / export jimijs
Copy the code
Used in business components
import { jimiJS } from "@/utils/adapter.js";
jimiJS.jimiSdkLogin() // Invoke login
Copy the code