webview默認占用全屏，建議使用uniapp原生導航欄，不然還要自己畫，全局關閉的，可以單獨頁面開啟，新增時設置top和bottom
uniapp頁面
<template> <view class="selectPipeline"> <view class="btn"> <button @click="changeBtn" type="default">確認</button> </view> </view> </template> <script> export default { data() { return { // 狀態欄高度+原生導航高度 topHeight: '', ifrSrc: '/hybrid/html/selectPipeline.html', } }, onLoad() { this.gpsPosition() }, methods:{ // 獲取經緯度 gpsPosition(){ uni.getLocation({ type: 'gcj02', success: (res) => { console.log('當前位置：' , res); console.log('當前位置的經度：' + res.longitude); console.log('當前位置的緯度：' + res.latitude); this.ifrSrc = this.ifrSrc + '?lng=' + res.longitude + '&lat=' + res.latitude; this.getSystemInfo() } }); }, // 渲染webview頁面 init(){ // #ifdef APP-PLUS // 空出導航欄高度和按鈕高度 var wv = plus.webview.create(this.ifrSrc,'',{top:this.topHeight,bottom:'55px'}) var currentWebview = this.$scope.$getAppWebview(); currentWebview.append(wv); //重點: 監聽子頁面uni.postMessage返回的值 plus.globalEvent.addEventListener('plusMessage', function(msg){ if(msg.data.args.data.name == 'postMessage'){ console.log('子頁面返回的數據為:'+JSON.stringify(msg.data.args.data.arg)); } }); // #endif }, // 獲取系統信息 getSystemInfo(){ let _this = this uni.getSystemInfo({ success: function (res) { console.log('res:',res) _this.topHeight = (res.statusBarHeight+44) + 'px' _this.init() } }) }, changeBtn(){ console.log("確認選擇") } } } </script> <style lang="less" scoped> .btn{ position: fixed; left: 0; right: 0; bottom: 0; padding: 5px 10px; button{ height: 45px; background-color: #0081ff; color: #fff; } } </style>
html，需要引入uni.webview.1.5.2.js
<!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>Document</title> <style> body { background-color:greenyellow; } #btn{ margin: 200px auto; width: 300px; height: 200px; font-size: 140px; } </style> </head> <body> <button id="btn">按鈕</button> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <script> var a=1; console.log(getQuery('lng'),getQuery('lat')); //獲取 uni-app 傳來的值 //取url中的參數值 function getQuery(name) { // 正則：[找尋'&' + 'url參數名字' = '值' + '&']（'&'可以不存在） let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); console.log(r); if(r != null) { // 對參數值進行解碼 return decodeURIComponent(r[2]); } return null; } document.addEventListener('UniAppJSBridgeReady', function() { //向uniapp傳值 document.querySelector("#btn").addEventListener("click", function () { uni.postMessage({ data: { action: ++a, }, }); }); }); </script> </body> </html>