Usage of uni-app web-view
On the previous page, click on it and need to jump to the built-in browser of the app (app jumps to the h5 page), uniapp provides web-view
You need to create a new page, refer to the web-view in the new page, and add the URL (h5) to the new page
1. Introduce on the required page
//If it does not exist temporarily, it will be translated on the browser('PAYWEBURL', )//Are you considering that the transferred URL needs to be translated (not required)// let enUrl = encodeURIComponent()//Translation({
//url: '/pages/cashier/payapp'+enUrl// Need to translate back in the page url: '/pages/cashier/payapp'//If you do not need to translate, just temporarily store the URL locally and take it out in the jump page to prevent browser translation})2. Use in the project (uni-app) (son passes to father)
<template>
<view>
<web-view @message="getMessage" :src="webViewUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webViewUrl: ''
}
},
onLoad() {
// = decodeURIComponent()// The passed value is translated and needs to be converted back to the original value = ('PAYWEBURL')//If there is no need to translate, get it directly ()
},
methods: {
getMessage(e) {
('Message delivered by webView',e)
}
}
}
</script>3. HTML page
/dcloud/uni-app/raw/dev/dist/.1.5.
<!-- Used to jump after paymentapp -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web-view</title>
//The key point must be introduced <script src="./js/.1.5."></script>
</head>
<body>
</body>
<script>
('UniAppJSBridgeReady', function() {
(function(res) {
('Current environment:' + (res));//Judge whether it is currently on the web page, app or mini program })
//What to do on the web page? (Skip to the specified page) ({
url:'/pagesOrder/order/list'
})
})
</script>
</html>The mutual transmission value between uniapp and webview
Send data to H5
In fact, it is very popular. In the web-view, you only need to pass parameters to H5 through the URL. For example, in uni-app:
end
In fact, it is very popular. In the web-view, you only need to pass parameters to H5 through the URL. For example, in uni-app:
<template> <view class="advertisement" style=" 100%;"> <web-view :src="url" @message="message"></web-view> </view> </template>
<script>
export default {
data() {
return {
url:'/hybrid/html/?data='
};
},
onLoad(data) {
// Here you encode URIComponent encoding the parameters to be passed into the webview, otherwise Chinese garbled code will be used. +=encodeURIComponent()
},
mounted() {},
methods: {
message(event){
();
}
}
};
</script>
<style scoped="scoped" lang="scss">
@import './';
</style>2.H5 end accepts value
(getQuery('data')); //Get the value transmitted by uni-app //Take the parameter value in the url function getQuery(name) {
// Regular: [Find '&' + 'url parameter name' = 'value' + '&'] ('&' may not exist) let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = (1).match(reg);
(r);
if(r != null) {
// Decode the parameter values return decodeURIComponent(r[2]);
}
return null;
}2.H5 side sends data to uniapp
-view
<script>
('UniAppJSBridgeReady', function() {
//Pass the value to uniapp ({
data: {
action: 'message'
}
});
(function(res) {
('Current environment:' + (res));
});
});
</script> Accept value
//message acceptance method<template>
<view class="advertisement" style=" 100%;">
<web-view :src="url" @message="message"></web-view>
</view>
</template>This is the end of this article about the use of uni-app web-view. For more information about using uni-app web-view, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!