美文网首页uin-app简明uniapp教程
使用web-view组件内嵌网页并去除网页title

使用web-view组件内嵌网页并去除网页title

作者: 瑟闻风倾 | 来源:发表于2020-04-01 09:12 被阅读0次

(1) 使用web-view组件内嵌网页

<web-view src="https://www.jianshu.com/u/4da122c54fa1" @message="getMessage"></web-view>
有titile.jpg

实战示例:index.vue

<template>
    <view>
        <web-view :src="url" @message="getMessage"></web-view>
    </view>
</template>

<script>
var wv;//计划创建的webview
export default {
    data() {
        return {
            // url: 'https://www.jianshu.com/u/4da122c54fa1'
            // url: 'http://mes.uchat.com.cn/board/line?deptid=118'
            url: ''
        }
    },
    onLoad(options) {
        if (options && options.deptid) {
            console.log("onLoad:" + options.bid + "," + options.deptid);
            switch (options.bid){
                case "1":
                    this.url = 'http://mes.uchat.com.cn/board/board2?deptId=' + options.deptid;
                    break;
                case "2":
                    this.url = 'http://mes.uchat.com.cn/board/machineBoard?deptId=' + options.deptid;
                    break;
                case "3":
                    this.url = 'http://mes.uchat.com.cn/b/' + options.deptid;
                    break;
                case "4":
                    this.url = 'http://mes.uchat.com.cn/board/line?deptid=' + options.deptid;
                    break;
                default:
                    this.url = 'http://mes.uchat.com.cn/board/line?deptid=118';
                    break;
            }
            
        }
        
    },
    onReady() {
        // #ifdef APP-PLUS
        // var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
        // setTimeout(function() {
        //  wv = currentWebview.children()[0]
        //  wv.setStyle({top:150,height:300})//重设web-view组件的样式,比如调整大小
        //  wv.setStyle({scalable:true})//设置web-view组件可双指缩放
        // }, 1000); //如果是页面初始化调用时,需要延时一下
        // #endif
    },
    methods: {
        getMessage(event) {
            uni.showModal({
                content: JSON.stringify(event.detail),
                showCancel: false
            });
        }
    }
}
</script>

<style>

</style>

(2) 去除网页title—页面不启用系统导航即可

"app-plus": {
    "titleNView": false  //不启用系统导航 
} 
无title.jpg

示例:pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/home/home",
            "style" : {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                // "navigationBarTitleText": "uni-app"
                "app-plus": {
                    "titleNView": false  //不启用系统导航 
                } 
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

备注:常见问题请移步:web-view加载网络html页面的实现及问题

相关文章

网友评论

    本文标题:使用web-view组件内嵌网页并去除网页title

    本文链接:https://www.haomeiwen.com/subject/eugbrhtx.html