vue calls native method interaction
Currently working on an H5 application; you need to call native methods for interaction; here is a record.
Technology stack: vue version 2.6 vant version 2.12
first step
Declare a file for native interactive Alibaba Bridge encapsulation
const rpc = function (url, params) {
return new Promise((res, ref) => {
try {
// Call JSBridge Ali Bridge', url:path; params:parameters; (url, {
...params
}, (result) => {
let code = * 1;
// result: callback data source; // Determine the status: 200 if (result && code === 200) {
res(result);
} else {
// Here you can do some prompt operations ref(result);
}
});
} catch (e) {
ref(e, 'The device does not support');
}
});
};
export default rpc;Step 2
Statement Introduce the encapsulated rpcFn native method; perform public encapsulation
import rpcFn from './';
// Introduce the entire vue instanceimport Vue from 'vue';
const newVue = new Vue();
// Do a data traversal here. If you need to add native methods, just add them in rpcList.const rpcList = [
// Baidu Positioning 'baiduPositioning',
// Face recognition authentication 'peopleFace',
// Photograph 'gotoCamera',
...
];
const rpcListLength = ;
const rpcFuncObj = {};
for (let i = 0; i < rpcListLength; i++) {
const rpcName = rpcList[i];
//firstLetterToUpperCase method Turn the first letter of each item in rpcList to capitalize peopleFace => PeopleFace const rpcFuncName = `rpc${(rpcName)}`;
rpcFuncObj[rpcFuncName] = function (params) {
return rpcFn(rpcName, params);
};
// rpcName: each native method; rpcFuncName: a complete native method mounted on the vue instance; params: a parameter of the native method; peopleFace => rpcPeopleFace}
// Method Exportexport default {
...rpcFuncObj
};Step 3
Introduced, mounted on vue instance
import rpc from '';
// traversal mounted on vue instance(rpc).forEach(rpcName => {
[rpcName] = rpc[rpcName];
});Step 4
Call native method in page
<!--Page button execution event-->
<Button @click="handleClick()">Button</Button>
// Button execution native positioning eventhandleClick() {
// Here we can print this ; ps: this points to the entire vue instance (this,'vue instance');
().then((res) => {
//Get native location data (res, "Native location address data is here");
}).catch(rej => {
();
});
};Vue and native native use
Android and Vue interaction method
First of all, it goes without saying that Vue calls Android. The usage method is the same as html calling Android Native method. I won’t talk much about it here. The following is the function of Android calling Vue. I would like to specifically explain here that the Android calling code remains unchanged, and it is mainly implemented on the Vue side.
Because the interaction between Android and web pages is achieved through window, but because Vue's internal implementation logic deals with function methods are not mounted to window, Android cannot call the methods in Vue through window, which leads to the inability to call the function code on the web page regardless of how the code is modified natively.
It is easy to solve the problem after knowing the reason. Since Vue cannot mount the function code to the window, then manually mount the function method to the window. This is also easy to implement. It is nothing more than using = or ** = function(){}** to mount the function to the window under the oncrete or mount method of vue, so that the operation of native access to the web page code can be realized.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.