Friends are using vue to develop h5 projects, especially mobile projects. Many of them are packaged and mounted on the native APP, so they are indispensable for interacting with the native. I have been sitting on this recently and have stepped on some pitfalls. I will share it with you.
0. Transfer data through url: (usually, the user information of the app is passed on the entrance page for vue h5 to use)
methods: {
// Receive the data after the url urltext() {
let loc = ; 6 let n1 = ;//Total length of address let n2 = ("=");//Get the position of the = number let outToken = (n2 + 1, n1 - n2);//From the following number = (loc,n1,n2,outToken)
(outToken) //Pass to the processing function },
}
1. The native APP provides a reference to an interface object (for example, a scan code interface, and may also have a callback function to obtain the scan code result)
The idea is that everything interacts through window
// Expose the function to callback of the vue componentmounted:function(){
// Bind the subscanQRCallBack method to the window and provide it to external calls window['scanQRCallBack'] = (result) => {
(result)
}
},
methods:{
scan(){
// alert('Start scanning the code') ('OS interact with js',scanQRCallBack)//Calling the client object provided by the app through window },
subscanQRCallBack(result){
// alert('Scan the code result 6466:'+result); (result)
},
}
Thoughts on the life cycle of vue triggered by interaction
I encountered a classic problem during development. I needed to interact with the app when the page was first loaded to determine whether a pop-up window was displayed. It seems very simple, just enter the page to adjust an interactive method, but the solution to this requirement goes through several steps:
1、created
Because when created, the instance is created, my initial choice is to mount the method and call the interaction in this life cycle. The result: the page crashes, guess: Although the instance has, the template is not compiled and mounted, and the app call method fails to cause the crash to
2、mounted
The second time the mount and call were written in mounted, the result: the page crashed, guessed (error): the mount and call were too close, and it may be called directly before the method was mounted, resulting in a crash
3、created+mounted
The method is mounted in created and the interaction is called in mounted. The result: My ios12 has no exception. I almost thought that when I succeeded, ios10 still crashed. I guessed that the webview of ios12 optimized this problem, considering compatibility, the solution is not feasible.
4. Delay
It is guessed that the method under window was called before the window was loaded, resulting in a crash, and a 1s delay was added to the interactive method, which was successful! But the experience is average, because hard timing can easily cause many uncontrollable problems, and the existence of pop-up delay leads to a low user experience.
5、
The onload event occurs immediately after the page or image is loaded. Add code = function(){//call interaction} to the mounted hook, which triggers the interaction after the window is loaded. Moreover, this time node does not exist in the life cycle of vue, and it also occurs after the mounted and created hooks. This native method is still great and perfectly solved~!
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.