uniapp修改webview内容
在uniapp中,如需引用外部网页可使用
let wv;
wv = plus.webview.create("", "custom-webview", {
plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突
top: uni.getSystemInfoSync().statusBarHeight + 40 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
})
wv.loadURL(url)//本地:_www/static/webview/dazhong.html
2、按需求替换文件
wv.overrideResourceRequest([
{
match: 'http[s]?:.*?.png',
redirect: '_www/static/image/qdy.png'
},
{
match: '被替换的css文件地址',
redirect: '_www/static/webview/dazhonglayout.css'
},
])
注意:
如需要修改的地方太多或者非外部引入的js/css文件,可以用浏览器打开调试模式,找到源代码,将整个html文件拷贝到本地,在根据自己的需要进行修改,然后将上述代码中wv.loadURL(url)中的url改为'_www'+根路径。改动小,且改动的内容属于外部引入文件,可以将源文件复制一份到本地,修改后再替换为本地文件直接将需要改动的样式添加在以.css结尾的文件中 ,改动.css?4d4ef6ea6260ef7a0ed 这种后缀文件无效。
3、将标签append到当前页面
//此对象相当于html5plus里的plus.webview.currentWebview()。
//在uni-app里vue页面直接使用plus.webview.currentWebview()无效
var currentWebview = this.$scope.$getAppWebview() || this.$parent.$scope.$getAppWebview();
currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
4、设置webview的显示和隐藏
// #ifdef APP-PLUS
plus.webview.hide('custom-webview');//隐藏
plus.webview.show('custom-webview');//显示
// #endif
5、完整代码
export default {
onShow(){
// #ifdef APP-PLUS
wv = plus.webview.create("", "custom-webview", {
plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突
top: uni.getSystemInfoSync().statusBarHeight + 40 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
})
wv.loadURL(url)
//下列是替换match所匹配的文件
wv.overrideResourceRequest([
{
match: '被替换的css文件地址',
redirect: '_www/static/webview/dazhonglayout.css'
},
])
var currentWebview = this.$scope.$getAppWebview() || this.$parent.$scope.$getAppWebview();
currentWebview.append(wv);
// #endif
},
methods:{
setWebView(e){
// #ifdef APP-PLUS
plus.webview[e]('custom-webview');
// #endif
}
}
}
webview使用方法官方文档
发表评论