refactor(privacy-popup): 重构隐私弹窗的国际化文案处理逻辑

修复了小程序启动早期Lang未完成初始化时$lang返回空串的问题,将文案计算移到弹窗前一次性执行,统一多平台的文案获取逻辑
This commit is contained in:
2026-07-01 13:46:49 +08:00
parent b2eb04ab98
commit 24ae55867a

View File

@@ -2,23 +2,23 @@
<view>
<view class="privacy-mask" v-if="showPop">
<view class="privacy-wrap">
<view class="privacy-title">{{ $lang('components.privacyPopup.title') }}</view>
<view class="privacy-title">{{ i18n.title }}</view>
<view class="privacy-desc">
{{ $lang('components.privacyPopup.descPrefix', { appName: appName }) }}
<text class="privacy-link" @tap="openPrivacyContract">{{ privacyContractName }}</text>
{{ i18n.descPrefix }}
<text class="privacy-link" @tap="openPrivacyContract">{{ i18n.privacyContractName }}</text>
<!-- #ifdef QUICKAPP-WEBVIEW || H5 || MP-HARMONY -->
<text class="privacy-link" @tap="openPrivacyService">{{ privacyServiceName }}</text>
<text class="privacy-link" @tap="openPrivacyService">{{ i18n.privacyServiceName }}</text>
<!-- #endif -->
{{ $lang('components.privacyPopup.descSuffix', { appName: appName }) }}
{{ i18n.descSuffix }}
</view>
<view class="privacy-button-flex">
<button class="privacy-button-btn bg-disagree" @tap="handleDisagree">{{ $lang('components.privacyPopup.disagreeBtn') }}</button>
<button class="privacy-button-btn bg-disagree" @tap="handleDisagree">{{ i18n.disagreeBtn }}</button>
<!-- #ifdef QUICKAPP-WEBVIEW || MP-WEIXIN -->
<button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree">{{ $lang('components.privacyPopup.agreeBtn') }}</button>
@agreeprivacyauthorization="handleAgree">{{ i18n.agreeBtn }}</button>
<!-- #endif -->
<!-- #ifdef H5 || MP-HARMONY -->
<button id="agree-btn" class="privacy-button-btn bg-agree" @tap="handleAgree">{{ $lang('components.privacyPopup.agreeBtn') }}</button>
<button id="agree-btn" class="privacy-button-btn bg-agree" @tap="handleAgree">{{ i18n.agreeBtn }}</button>
<!-- #endif -->
</view>
</view>
@@ -43,14 +43,23 @@ export default {
showPop: false,
privacyAuthorization: null,
privacyResolves: new Set(),
privacyContractName: this.$lang('components.privacyPopup.defaultContractNameMp'),
appName: this.$lang('components.privacyPopup.defaultAppNameMp'),
// #ifdef H5 || MP-HARMONY
appName: this.$lang('components.privacyPopup.defaultAppNameH5'),
privacyContractName: this.$lang('components.privacyPopup.defaultContractNameH5'),
privacyServiceName: this.$lang('components.privacyPopup.defaultServiceNameH5'),
// #endif
// 平台提供的隐私协议名称(由 wx.getPrivacySetting 等异步设置)
// 弹窗前才参与计算 i18n.privacyContractName
platformContractName: '',
// 弹窗文案: 在 popUp() 之前由 prepareI18n() 一次性计算
// 关键: 不在 data() 中调 $lang(避免 boot 未完成时缓存空串)
// 也不在 mounted/computed 中调(method/computed 响应式不稳定)
// 此时 Lang.boot() 必然已完成(PrivacyManager.show() 在 await boot() 后才执行)
i18n: {
title: '',
descPrefix: '',
descSuffix: '',
privacyContractName: '',
privacyServiceName: '',
disagreeBtn: '',
agreeBtn: '',
disagreeTip: '',
},
}
},
mounted() {
@@ -76,7 +85,7 @@ export default {
// #ifdef MP-WEIXIN
wx.getPrivacySetting({
success: (res) => {
this.privacyContractName = res.privacyContractName
this.platformContractName = res.privacyContractName || ''
}
});
// #endif
@@ -86,7 +95,7 @@ export default {
has.getPrivacySetting({
success: (res) => {
if (res.privacyContractName) {
this.privacyContractName = res.privacyContractName
this.platformContractName = res.privacyContractName
}
},
})
@@ -101,6 +110,57 @@ export default {
}
},
methods: {
/**
* 在弹窗前**一次性**计算所有 i18n 文案
* 关键修复: 微信小程序首次启动时, main.js 同步 $mount() 导致 data() 求值时
* Lang.boot() 尚未完成, $lang() 返回空串; 即使 boot 完成后 emit $forceUpdate,
* data 字段不会重新求值, computed 依赖追踪也可能被压缩器优化掉。
* 此方法在 popUp() 之前同步执行, 此时 Lang.boot() 必然已完成,
* 一次性把 i18n 字段填好, 模板只读 data 即可, 效果与 H5 一致。
*/
prepareI18n() {
const $lang = this.$lang.bind(this);
// 应用名称(按平台取值)
// #ifdef H5 || MP-HARMONY
const appName = $lang('components.privacyPopup.defaultAppNameH5');
// #endif
// #ifndef H5 || MP-HARMONY
const appName = $lang('components.privacyPopup.defaultAppNameMp');
// #endif
// 隐私协议名称: 平台提供的优先, 否则回退 i18n 默认值
let privacyContractName;
if (this.platformContractName) {
privacyContractName = this.platformContractName;
} else {
// #ifdef H5 || MP-HARMONY
privacyContractName = $lang('components.privacyPopup.defaultContractNameH5');
// #endif
// #ifndef H5 || MP-HARMONY
privacyContractName = $lang('components.privacyPopup.defaultContractNameMp');
// #endif
}
// 服务协议名称(仅 H5/鸿蒙端显示)
// #ifdef H5 || MP-HARMONY
const privacyServiceName = $lang('components.privacyPopup.defaultServiceNameH5');
// #endif
// #ifndef H5 || MP-HARMONY
const privacyServiceName = '';
// #endif
this.i18n = {
title: $lang('components.privacyPopup.title'),
descPrefix: $lang('components.privacyPopup.descPrefix', { appName }),
descSuffix: $lang('components.privacyPopup.descSuffix', { appName }),
privacyContractName,
privacyServiceName,
disagreeBtn: $lang('components.privacyPopup.disagreeBtn'),
agreeBtn: $lang('components.privacyPopup.agreeBtn'),
disagreeTip: $lang('components.privacyPopup.disagreeTip'),
};
},
/**
* 接收全局隐私弹窗事件
* 由 App.vue → PrivacyManager.show() → uni.$emit('privacy:show') 触发
@@ -295,7 +355,7 @@ export default {
PrivacyManager.disagree()
uni.showModal({
content: this.$lang('components.privacyPopup.disagreeTip'),
content: this.i18n.disagreeTip,
success: () => {
this.$emit('disagree')
}
@@ -321,6 +381,10 @@ export default {
},
popUp() {
// 弹窗前**一次性**计算所有 i18n 文案
// 此时 App.vue 已 await boot() + await PrivacyManager.show() 完成,
// Lang.boot() 必然已完成, $lang() 返回真实翻译(效果与 H5 一致)
this.prepareI18n()
this.showPop = true;
},