refactor(i18n): 优化i18n相关代码结构和格式
将箭头函数改为函数声明，统一代码风格 调整vue模板中的class顺序和格式 更新pnpm-lock.yaml中的依赖版本 添加@types/web-bluetooth类型定义
This commit is contained in:
feige996
parent
1e0914df26
commit
6009c62a7a
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -166,7 +166,7 @@ importers:
|
||||
version: 0.0.4
|
||||
'@uni-ku/bundle-optimizer':
|
||||
specifier: ^1.3.3
|
||||
version: 1.3.3(postcss@8.4.49)(rollup@4.41.1)(vite@5.2.8(@types/node@20.17.9)(sass@1.77.8)(terser@5.36.0))(vue@3.5.15(typescript@5.7.2))
|
||||
version: 1.3.3(@vueuse/core@12.8.2(typescript@5.7.2))(postcss@8.4.49)(rollup@4.41.1)(vite@5.2.8(@types/node@20.17.9)(sass@1.77.8)(terser@5.36.0))(vue@3.5.15(typescript@5.7.2))
|
||||
'@unocss/eslint-plugin':
|
||||
specifier: ^66.2.3
|
||||
version: 66.2.3(eslint@9.29.0(jiti@2.4.2))(typescript@5.7.2)
|
||||
@ -2221,6 +2221,9 @@ packages:
|
||||
'@types/unist@3.0.3':
|
||||
resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
|
||||
|
||||
'@types/web-bluetooth@0.0.21':
|
||||
resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
|
||||
|
||||
'@types/wechat-miniprogram@3.4.8':
|
||||
resolution: {integrity: sha512-lOqddA707X3SZxVhlZNBZPzYzj7lG/ED2fF30k+aE2oT6R4wfw0Wiup2k2hGrmzYUFyJXfGs01sDCuJMhQMAdg==}
|
||||
|
||||
@ -9275,6 +9278,9 @@ snapshots:
|
||||
|
||||
'@types/unist@3.0.3': {}
|
||||
|
||||
'@types/web-bluetooth@0.0.21':
|
||||
optional: true
|
||||
|
||||
'@types/wechat-miniprogram@3.4.8': {}
|
||||
|
||||
'@types/yargs-parser@21.0.3': {}
|
||||
|
||||
@ -22,7 +22,7 @@ console.log(i18n.global.locale)
|
||||
* @param { string } key 多语言的key，eg: "app.name"
|
||||
* @returns {string} 返回原始的多语言模板，eg: "{heavy}KG"
|
||||
*/
|
||||
export const getTemplateByKey = (key: string) => {
|
||||
export function getTemplateByKey(key: string) {
|
||||
if (!key) {
|
||||
console.error(`[i18n] Function getTemplateByKey(), key param is required`)
|
||||
return ''
|
||||
@ -40,7 +40,8 @@ export const getTemplateByKey = (key: string) => {
|
||||
return keyList.reduce((pre, cur) => {
|
||||
return pre[cur]
|
||||
}, message)
|
||||
} catch (error) {
|
||||
}
|
||||
catch (error) {
|
||||
console.error(`[i18n] Function getTemplateByKey(), key param ${key} is not existed.`)
|
||||
return ''
|
||||
}
|
||||
@ -50,11 +51,11 @@ export const getTemplateByKey = (key: string) => {
|
||||
* formatI18n('我是{name},身高{detail.height},体重{detail.weight}',{name:'张三',detail:{height:178,weight:'75kg'}})
|
||||
* 暂不支持数组
|
||||
* @param template 多语言模板字符串，eg: `我是{name}`
|
||||
* @param {Object|undefined} data 需要传递的数据对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
|
||||
* @param {object | undefined} data 需要传递的数据对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
|
||||
* @returns
|
||||
*/
|
||||
function formatI18n(template: string, data?: any) {
|
||||
return template.replace(/\{([^}]+)\}/g, function (match, key: string) {
|
||||
return template.replace(/\{([^}]+)\}/g, (match, key: string) => {
|
||||
// console.log( match, key) // => { detail.height } detail.height
|
||||
const arr = key.trim().split('.')
|
||||
let result = data
|
||||
@ -71,7 +72,7 @@ function formatI18n(template: string, data?: any) {
|
||||
* => formatI18n('我是{name},身高{detail.height},体重{detail.weight}',{name:'张三',detail:{height:178,weight:'75kg'}})
|
||||
* 没有key的，可以不传 data；暂不支持数组
|
||||
* @param template 多语言模板字符串，eg: `我是{name}`
|
||||
* @param {Object|undefined} data 需要传递的数据对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
|
||||
* @param {object | undefined} data 需要传递的数据对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
|
||||
* @returns
|
||||
*/
|
||||
export function t(key, data?) {
|
||||
|
||||
@ -6,45 +6,6 @@
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="center flex-col mt-6">
|
||||
<view class="text-red-500 p-4 leading-6">
|
||||
经过我的测试发现，小程序里面会有2处BUG：
|
||||
<view>
|
||||
<text class="line-through">1. 页面标题多语言不生效</text>
|
||||
<text class="ml-2 text-green-500">已解决</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="line-through">2. 多语言传递的参数不生效，如下 heavy</text>
|
||||
<text class="ml-2 text-green-500">已解决</text>
|
||||
<view class="ml-2 text-green-500">把 $t 改为自定义的 t 即可</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-green-500">多语言测试</view>
|
||||
<view class="m-4">{{ $t('app.name') }}</view>
|
||||
<view class="italic text-gray-500">使用$t: {{ $t('weight', { heavy: 100 }) }}</view>
|
||||
<view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
|
||||
<view class="italic text-gray-500">使用t: {{ t('weight', { heavy: 100 }) }}</view>
|
||||
<view class="m-4">{{ t('weight', { heavy: 100 }) }}</view>
|
||||
<view class="m-4">{{ t('introduction', user) }}</view>
|
||||
|
||||
<view class="text-green-500 mt-12">切换语言</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange" class="radio-group">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in languages" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="item.value === current" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- http://localhost:9000/#/pages/index/i18n -->
|
||||
<button @click="testI18n" class="mt-20 mb-44">测试弹窗</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import i18n, { t } from '@/locale/index'
|
||||
import { testI18n } from '@/utils/i18n'
|
||||
@ -63,7 +24,7 @@ const languages = [
|
||||
},
|
||||
]
|
||||
|
||||
const radioChange = (evt) => {
|
||||
function radioChange(evt) {
|
||||
// console.log(evt)
|
||||
current.value = evt.detail.value
|
||||
// 下面2句缺一不可！！！
|
||||
@ -72,6 +33,73 @@ const radioChange = (evt) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="mt-6 center flex-col">
|
||||
<view class="p-4 text-red-500 leading-6">
|
||||
经过我的测试发现，小程序里面会有2处BUG：
|
||||
<view>
|
||||
<text class="line-through">
|
||||
1. 页面标题多语言不生效
|
||||
</text>
|
||||
<text class="ml-2 text-green-500">
|
||||
已解决
|
||||
</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="line-through">
|
||||
2. 多语言传递的参数不生效，如下 heavy
|
||||
</text>
|
||||
<text class="ml-2 text-green-500">
|
||||
已解决
|
||||
</text>
|
||||
<view class="ml-2 text-green-500">
|
||||
把 $t 改为自定义的 t 即可
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-green-500">
|
||||
多语言测试
|
||||
</view>
|
||||
<view class="m-4">
|
||||
{{ $t('app.name') }}
|
||||
</view>
|
||||
<view class="text-gray-500 italic">
|
||||
使用$t: {{ $t('weight', { heavy: 100 }) }}
|
||||
</view>
|
||||
<view class="m-4">
|
||||
{{ $t('weight', { heavy: 100 }) }}
|
||||
</view>
|
||||
<view class="text-gray-500 italic">
|
||||
使用t: {{ t('weight', { heavy: 100 }) }}
|
||||
</view>
|
||||
<view class="m-4">
|
||||
{{ t('weight', { heavy: 100 }) }}
|
||||
</view>
|
||||
<view class="m-4">
|
||||
{{ t('introduction', user) }}
|
||||
</view>
|
||||
|
||||
<view class="mt-12 text-green-500">
|
||||
切换语言
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<radio-group class="radio-group" @change="radioChange">
|
||||
<label v-for="item in languages" :key="item.value" class="uni-list-cell uni-list-cell-pd">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="item.value === current" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- http://localhost:9000/#/pages/index/i18n -->
|
||||
<button class="mb-44 mt-20" @click="testI18n">
|
||||
测试弹窗
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-list {
|
||||
position: relative;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { t } from '@/locale/index'
|
||||
|
||||
/** 非vue 文件使用 i18n */
|
||||
export const testI18n = () => {
|
||||
export function testI18n() {
|
||||
// 下面同样生效
|
||||
uni.showModal({
|
||||
title: 'i18n 测试',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user