美文网首页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