uniapp 与 webview 在app中参数传递

风花一世月

发布于 2024-03-19 13:20:15

1390

发布于 2024-03-19 13:20:15

文章被收录于专栏：前端前端

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-30，如有侵权请联系 cloudcommunity@tencent.com 删除

webview