web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面。
我的功能是 扫描二维码打开二维码的页面
但是web-view铺满全屏 1.状态栏遮挡页面 2.没有区别app和h5页面
所以 打算加一个顶部导航
一、新建一个页面 叫做web_view.vue 然后再考虑把web-view放到当前这个页面 页面接参数url 这样可以打开所有要用web-view打开的网址
参数路径传递的问题
路径要传递的话 如果路径带参数 传递可能会丢失参数
一种是可以把参数拆分一下 拼接 但是我觉得很麻烦 而且参数不固定所以没用
第二种就是url编码 encodeURIComponent(URIstring) 拿到之后解码 decodeURIComponent(URIstring)
二、就是放入web-view组件
这就遇到了web-view铺满的问题 如果直接在页面中直接写入web-view组件放入url 那就铺满了
想放个标题或者是不想让状态栏遮挡的话怎么办呢?
一种:引用了web-view组件之后 进行修改
// #ifdef APP-PLUS
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
setTimeout(function() {
wv = currentWebview.children()[0]
wv.setStyle({top:150,height:300})
}, 1000); //如果是页面初始化调用时,需要延时一下 // #endif
一种:直接用js创建web-view组件
// #ifdef APP-PLUS
var w=plus.webview.create(url,'id',{
top:uni.getSystemInfoSync().statusBarHeight+50,
//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
//因为设置top之后 webview的高度依然不变会往下移 底部会被遮住 所以设置一下高度
height:uni.getSystemInfoSync().windowHeight - 44 -uni.getSystemInfoSync().statusBarHeight
},{preload:'preload webview'}); // 可直接通过以下方法获取preload值
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
currentWebview.append(w);//一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
// #endif