feat: 使用曲线救国的方式让小程序支持带参数的多语系

This commit is contained in:
yuanzh 2024-04-21 00:27:23 +08:00
parent 7ac35be33b
commit b9244ea2d3
5 changed files with 21 additions and 3 deletions

View File

@ -1,4 +1,5 @@
{ {
"weight": "{heavy}KG", "weight": "{heavy}KG",
"weight2": "{0}KG",
"app.name": "En Title" "app.name": "En Title"
} }

View File

@ -34,4 +34,19 @@ export const translate = (localeKey: string) => {
} }
return localeKey return localeKey
} }
/**
* formatString('已阅读并同意{0}和{1}','用户协议','隐私政策') ->
* @param template
* @param values
* @returns
*/
export function formatString(template: string, ...values: any) {
console.log(template, values)
// 使用map来替换{0}, {1}, ...等占位符
return template.replace(/{(\d+)}/g, (match, index) => {
const value = values[index]
return value !== undefined ? value : match
})
}
export default i18n export default i18n

View File

@ -1,4 +1,5 @@
{ {
"app.name": "中文标题", "app.name": "中文标题",
"weight": "{heavy}公斤" "weight": "{heavy}公斤",
"weight2": "{0}公斤"
} }

View File

@ -1,5 +1,5 @@
{ {
"name": "unibest-base", "name": "unibest",
"appid": "H57F2ACE4", "appid": "H57F2ACE4",
"description": "", "description": "",
"versionName": "1.0.0", "versionName": "1.0.0",

View File

@ -16,6 +16,7 @@
<view class="text-green-500">多语言测试</view> <view class="text-green-500">多语言测试</view>
<view class="m-4">{{ $t('app.name') }}</view> <view class="m-4">{{ $t('app.name') }}</view>
<view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view> <view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
<view class="m-4">{{ formatString(translate('weight2'), 100) }}</view>
<view class="text-green-500 mt-12">切换语言</view> <view class="text-green-500 mt-12">切换语言</view>
<view class="uni-list"> <view class="uni-list">
@ -35,7 +36,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import i18n from '@/locale/index' import i18n, { formatString, translate } from '@/locale/index'
import { testI18n } from '@/utils/i18n' import { testI18n } from '@/utils/i18n'
const current = ref(uni.getLocale()) const current = ref(uni.getLocale())