uniapp编译为app,解决webview在安卓侧不能缩放的问题

1、webview必须在vue页面,否则拿不到 this.scope.getAppWebview
2、关键代码为onReady中的代码
3、嵌套的H5页面必须是支持缩放的,Meta标签中user-scable为yes

<template>
    <view class="page_wrapper">
        <view class="title" :style="{'padding-top':statusHeight+'px'}">
            <text class="jnIconFont title_icon" @tap.stop="goBack">&#xe615;</text>
            <text class="title_text">{{name}}</text>
        </view>
        <web-view ref='webview' :src="protocolUrl" class="webview" :webview-styles="webviewStyles"
            :style="{'top': mapTop+'px','height': mapHeight+'px'}"></web-view>
    </view>
</template>

<script>
    var wv;
    export default {
        data() {
            return {
                name:'',
                //状态栏高度
                statusHeight: 0,
                //地图顶部距离屏幕顶部的距离
                mapTop: 0,
                mapHeight: 0,
                //地址
                protocolUrl: '',
                //webview样式
                webviewStyles: {
                    progress: {
                        color: '#2F69F8'
                    }
                }
            }
        },
        onLoad(option){
            let param = '';
            try {
                    // 解码并解析URL参数
                param = JSON.parse(decodeURIComponent(option.detail));
            } catch (error) {
                // 若解析失败,则直接解析原始参数
                param = JSON.parse(option.detail);
            }
            this.name = param.name;
            this.protocolUrl = param.webUrl;// 设置组件的protocolUrl属性为参数中的webUrl字段
        },
        methods: {
            /**
             * 返回上一页
             */
            goBack() {
                // 调用uni.navigateBack方法返回上一页
                uni.navigateBack({});
            }
        },
        onReady() {
                // #ifdef APP-PLUS
                var currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
                setTimeout(()=> {
                    wv = currentWebview.children()[0]
                    wv.setStyle({scalable:true,top:this.mapTop+'px'})
                }, 1000); //如果是页面初始化调用时,需要延时一下
                // #endif
        },
          created() {
            let _that = this;
            uni.getSystemInfo({
                success: (res) => {
                    // 存储状态栏高度
                    _that.statusHeight = res.statusBarHeight;
                    // 设置地图顶部距离屏幕顶部的距离
                    _that.mapTop = res.statusBarHeight + uni.upx2px(88);
                    // 设置地图高度,屏幕高度减去状态栏高度和88upx后,再减去地图顶部距离屏幕顶部的距离
                    _that.mapHeight = res.screenHeight - res.statusBarHeight - uni.upx2px(88);
                }
            });
        },
    }
</script>

<style lang="scss">
    .page_wrapper {
        background-color: #FFFFFF;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .title {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 750rpx;

            &_icon {
                margin-left: 10rpx;
                width: 88rpx;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                color: #333333;
                font-size: 44rpx;
            }

            &_text {
                font-size: 32rpx;
                font-weight: 500;
                text-align: center;
                color: #333333;
                line-height: 88rpx;
                height: 88rpx;
                text-align: center;
                width: 550rpx;
                margin-left: 2rpx;
            }
        }

        .webview {
            //margin-top:150rpx;
            position: fixed;
            width: 750rpx;
            left: 0rpx;
            right: 0rpx;
            bottom: 0rpx;
        }
    }
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。