uni-app app webview 安卓机 title显示问题
uni-app app webview 安卓机 title显示问题
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC操作系统版本 | windows10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.1.3 |
| 手机系统 | Android |
| 手机系统版本 | Android 7.0 |
| 手机厂商 | 华为 |
| 手机机型 | mate30 |
| 页面类型 | vue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
操作步骤：
- 任一外链地址，再安卓机上
预期结果：
- 希望不显示url
实际结果：
- 显示url
bug描述：
- webview 头部title再安卓上显示html得title，并且再加载得过程中title显示得是url
更多关于uni-app app webview 安卓机 title显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
// #ifdef APP-PLUS
var that = this;
that.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
var w = plus.webview.create(this.weburl, ‘id’, {
// top: uni.getSystemInfoSync().statusBarHeight + 44 ,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
//因为设置top之后 webview的高度依然不变会往下移 底部会被遮住 所以设置一下高度
// height: uni.getSystemInfoSync().windowHeight - 44 - uni.getSystemInfoSync().statusBarHeight,
titleNView:{
“autoBackButton”: true,
“type”: “default”,
“backgroundColor”: “#FFFFFF”,
titleText:‘xx’
}
}, {
preload: ‘preload webview’
}); // 可直接通过以下方法获取preload值
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
currentWebview.append(w); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
// #endif
更多关于uni-app app webview 安卓机 title显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
针对uni-app中Webview在安卓机上显示URL而非页面title的问题，这里给出解决方案：
- 原生配置方案： 在manifest.json中配置Webview的title显示行为：
"app-plus": {
"webview": {
"titleNView": {
"titleText": "自定义标题",
"titleColor": "#FFFFFF",
"autoBackButton": true
}
}
}
- 动态设置方案： 在加载Webview时通过JS动态设置标题：
// 在vue页面中
onLoad() {
const currentWebview = this.$scope.$getAppWebview();
currentWebview.setStyle({
titleNView: {
titleText: '自定义标题'
}
});
}
- 监听URL变化方案：
// 监听Webview页面标题变化
plus.webview.currentWebview().addEventListener('titleUpdate', function(e){
plus.webview.currentWebview().setTitle(e.title);
}, false);
- 加载完成回调方案：
const wv = plus.webview.create(url, 'webview', {
titleNView: {
titleText: '加载中...'
}
});
wv.addEventListener('loaded', function(){
wv.setStyle({
titleNView: {
titleText: document.title || '默认标题'
}
});
}, false);