1. Create communication between APP page and webview
1.Introduction
The lowest version used on the App side is.1.5.
The APP can support web pages and local web pages, but if you use local web pages and related resources (js, css and other files) you must place static In the directory.
2. Introduce bypass ('UniAppJSBridgeReady', function(){})
The document element cannot be recognized on the app side, so in order to adapt to the app, you need to create a js file to put it in a separate js file to match the app. static In the directory
('UniAppJSBridgeReady', function () {
('I set up a communication');
({
data: {
successFlag: true,
}
});
})3. Send a message
First, you need to add message listening in <web-view>, when the web page is used to the applicationpostMessageWhen, messages will be triggered and received at a specific opportunity (back, component destruction, sharing).
<web-view ref="webview" :src="webViewUrl" @message="onPostMessage"></web-view>
Secondly, the web page needs to use the (``) method to the application postMessage, in which the uniapp's postMessage() method is used to send messages to the application.
(`({
data: {
base64: ("image/png"),
}
}); `)Finally, get web page information in uniapp through onPostMessage function
onPostMessage: function (e) {
([0])
},2. Webview initialization encounters a pitfall
The difference between () and appendJsFile() methods
When initializing the webview, you need to introduce files and add bridge js () files.
At this time, you need to pay attention to the difference between setJsFile() and appendJsFile() methods:
setJsFile: After setting a new JS file, the value set previously will be cleared. That is, if you keep setting JsFile in the background, then only the last js file will take effect.
appendJsFile: Adding multiple js files will be executed in the order they are added.
2. File path
The file paths written in the setJsFile() and appendJsFile() methods must be correct
If the file path starts from the static directory, for example:
("static/.1.5.")
("static/")There is no problem writing this on Android, it runs smoothly, but inIOS The file added by these two methods will be found andNot effective,Therefore, the file path must be written correctly, and the default is to be included.'_www'，
("_www/static/.1.5.")
("_www/static/")3. Time to write the setJsFile() and appendJsFile() methods
Writing setJsFile() and appendJsFile() methods during rendering will not have any problems on the Android side, but on the IOS side, you will find that these two methods have not taken effect.
Therefore, it is recommended to be on the IOS side The setJsFile() and appendJsFile() operations should be placed after listening to loaded events
var currentWebview = this.$scope.$getAppWebview() //This object is equivalent to () in html5plus. Use() directly on vue page in uni-app is invalid = ()[0]
("loaded", () => {
("_www/static/.1.5.")
("_www/static/")
('Loading completed');
() // Get the verification code image once after the loading is completed, but it may be empty }, false);
() Setting styles can only take effect on the APP side
Only app can set the width and height of the webview, and the other ends are unsolvable.
Use node information to subtract the height of other contents to get the height of the webview, () get the webview instance (only available to the app), and then modify the instance setStyle settings.
5. Hierarchy issues (events do not trigger)
When using webview in uniapp, you need to pay attention to the style hierarchy issues. The following code: If a webview is used on the current page, the click event will not be triggered when clicking. The reason is that the display level of the webview is higher than the current page
Solution: Add style level: z-index: 999;
<view class="privacy">
<view @click="toPrivacy('user')"><u--text text="Mechanical and Electromechanical User Agreement" size="12"></u--text></view>、
<view @click="toPrivacy('privacy')"><u--text text="Privacy Agreement" size="12"></u--text></view>
</view>Attachment: uniapp uses webview not to occupy the full screen
When using webview in uniapp, if you do not want the webview to occupy the full screen, you can set it in the following ways.
In the uniapp page, you can use flex layout to control the proportion of the webview. Set a container div and set its width, height and display properties to flex. Then place the webview in this container, and the proportion of the webview can be controlled by setting the flex attribute of the container.
Another way is to use the css style to control the width and height of the webview. In the style tag of the uniapp page, you can set the specific width, height, margin and padding properties for the webview to adjust its position and size.
Through the above two methods, the size of the webview can be adjusted so that it does not fill the entire screen. These methods can be flexibly used according to actual needs to adapt to different page layout requirements.
It should be noted that the performance of the webview component in uniapp on different platforms may vary, so it also needs to be adjusted appropriately according to the target platform.
Summarize
This is the end of this article about uniapp using webView. For more related uniapp using webView content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!