feat(webview): add webview title auto update and debug logs

1. add @titleUpdate event listener for web-view component
2. decode uri component for title and enableSetTitle params
3. refactor updateNavbarTitle to accept dynamic new title
4. add debug console logs for tracking title update flow
5. add success/fail callbacks for navigation bar title setting
This commit is contained in:
2026-07-15 11:55:52 +08:00
parent 1814fffc12
commit b10bf472e3
2 changed files with 18 additions and 8 deletions

View File

@@ -1486,6 +1486,7 @@ export default {
},
title(str) {
console.log(`lang.js setNavigationBarTitle ---------------->`, str);
if (str) {
uni.setNavigationBarTitle({
title: str,

View File

@@ -1,7 +1,7 @@
<template>
<view :style="themeColor">
<view class="iconfont iconshang navigate-back" @click="navigateBack"></view>
<web-view :src="src"></web-view>
<web-view :src="src" @titleUpdate="updateNavbarTitle"></web-view>
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
@@ -20,8 +20,11 @@ export default {
};
},
onLoad(option) {
this.title = option?.title ?? '';
this.enableSetTitle = option?.enable_set_title == 1;
console.log(`webview .......................................`)
this.title = decodeURIComponent(option?.title ?? '');
this.enableSetTitle = decodeURIComponent(option?.enable_set_title) == 1;
console.log(`webview -------------------`, { title: this.title, enableSetTitle: this.enableSetTitle });
// #ifdef H5
this.src = decodeEntity(decodeURIComponent(option.src));
@@ -31,10 +34,8 @@ export default {
this.src = decodeEntity(decodeURIComponent(`${option.src}&from=mp-webview`));
// #endif
},
onReady() {
this.updateNavbarTitle();
},
onShow() {
console.log('webview onShow ------------------------');
this.updateNavbarTitle();
},
watch: {
@@ -52,9 +53,17 @@ export default {
});
},
updateNavbarTitle(newTitle) {
const title = newTitle ?? this.title;
console.log('webview updateNavbarTitle', title);
if (this.enableSetTitle) {
uni.setNavigationBarTitle({
title: newTitle ?? this.title
title: title,
success: function (res) {
console.log('webview updateNavbarTitle success !!')
},
fail: function (err) {
console.error('webview updateNavbarTitle fail !!', err);
}
});
}
}