ZF sun
b10bf472e3
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
83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
||
<view :style="themeColor">
|
||
<view class="iconfont iconshang navigate-back" @click="navigateBack"></view>
|
||
<web-view :src="src" @titleUpdate="updateNavbarTitle"></web-view>
|
||
|
||
<!-- 隐私弹窗 -->
|
||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { decodeEntity } from '@/common/js/util.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
src: '',
|
||
title: '', // 标题栏标题
|
||
enableSetTitle: false, // 是否强制设置标题，用来替换Webview中的默认标题
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
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));
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
this.src = decodeEntity(decodeURIComponent(`${option.src}&from=mp-webview`));
|
||
// #endif
|
||
},
|
||
onShow() {
|
||
console.log('webview onShow ------------------------');
|
||
this.updateNavbarTitle();
|
||
},
|
||
watch: {
|
||
title(newVal) {
|
||
this.updateNavbarTitle(newVal);
|
||
},
|
||
enableSetTitle() {
|
||
this.updateNavbarTitle();
|
||
}
|
||
},
|
||
methods: {
|
||
navigateBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
updateNavbarTitle(newTitle) {
|
||
const title = newTitle ?? this.title;
|
||
console.log('webview updateNavbarTitle', title);
|
||
if (this.enableSetTitle) {
|
||
uni.setNavigationBarTitle({
|
||
title: title,
|
||
success: function (res) {
|
||
console.log('webview updateNavbarTitle success !!')
|
||
},
|
||
fail: function (err) {
|
||
console.error('webview updateNavbarTitle fail !!', err);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.navigate-back {
|
||
position: absolute;
|
||
top: 34rpx;
|
||
left: 34rpx;
|
||
z-index: 5;
|
||
font-size: $font-size-toolbar;
|
||
}
|
||
</style>
|