语言国际化模板 - 更新日志

1.6.0（2020-10-17）

  1. 调整语言选择页面代码，将tabbar多语言设置位置调整到当前部分 for (let i = 0; i < items.length; i++) { if (items[i].value == e.target.value) { items[i].checked = true; // console.log(e.target.value); // console.log(items[i].value);

                // 存储选择的下标
            uni.setStorageSync('index', i);
            // 存储选择的语言
            uni.setStorageSync('select', items[i].language);
            _this.$i18n.locale = items[i].language;
    // tabbar多语言
    uni.setTabBarItem({
        index: 0,
                text: _this.i18n.tabBar.home
    });
    uni.setTabBarItem({
            index: 1,
            text: _this.i18n.tabBar.me
    });
    break;
        }
    }
  2. <!-- v-for循环中的数据国际化,改为使用计算属性 --> <!-- 目前v-for循环多语言存在vue警告,原因与this.$t()的使用有关 Value of key 'XXX' is not a string! Cannot translate the value of keypath 'XXX'. Use the value of keypath as default. 暂无找到根本解决方案,但不影响多语言使用 -->

formatData() { return [ { message: this.$t('message').index.saoma.toString(), value: 0, addrUrl: 'saoma' }, { message: this.$t('message').index.drawer, value: 1, addrUrl: 'drawer' }, { message: this.$t('message').index.judge + '01', value: 0, addrUrl: 'judge01' }, { message: this.$t('message').index.judge + '02', value: 1, addrUrl: 'judge02' } ] }

  1. 调整界面部分显示细节

1.5.3（2020-07-13）

本版本为语言国际化模板1.5.1的更新版本1.5.3， 主要更改有：

---- 本语言国际化模板仅存在页面模板，使用时只下载页面模板即可 ----

---- 本语言国际化模板仅存在页面模板，使用时只下载页面模板即可 ----

---- 本语言国际化模板仅存在页面模板，使用时只下载页面模板即可 ----

  1. 考虑规范性, require 应该与 module.exports 或者 exports 搭配使用; export default 或者 export 应该与 import 搭配使用

此处使用第一种方案:

将代码 // import Chinese from './static/locales/zh-CN.js'; // import English from './static/locales/en-US.js'

改为

let Chinese = require('./static/locales/zh-CN.js'); let English = require('./static/locales/en-US.js')

语言js导出改为 module.exports = { ... }

  1. 增加了繁体中文, 方便更好的体验效果

let Tradition = require('./static/locales/zh-HK.js')

1.5.2（2020-07-13）

本版本为语言国际化模板1.5.1的更新版本1.5.2， 主要更改有：

---- 本语言国际化模板仅存在页面模板，使用时只下载页面模板即可 ---- ---- 本语言国际化模板仅存在页面模板，使用时只下载页面模板即可 ---- ---- 本语言国际化模板仅存在页面模板，使用时只下载页面模板即可 ----

  1. 考虑规范性, require 应该与 module.exports 或者 exports 搭配使用 export default 或者 export 应该与 import 搭配使用

此处使用第一种方案:

将代码 // import Chinese from './static/locales/zh-CN.js' // import English from './static/locales/en-US.js' 改为 let Chinese = require('./static/locales/zh-CN.js') let English = require('./static/locales/en-US.js')

语言js导出改为 module.exports = { ... }

  1. 增加了繁体中文, 方便更好的体验效果

let Tradition = require('./static/locales/zh-HK.js')

1.5.1（2020-06-03）

本版本为语言切换1.4的更新版本1.5， 主要更改有：

----本语言切换仅存在页面模板，使用时只下载页面模板即可

  1. 根据部分反馈，增加了根据手机语言修改应用名称的相关代码设置(取决于当前的系统语言)，
  2. 相关文档见(https://ask.dcloud.net.cn/article/35860)

目前应用内置支持以下四种语言：

英文 中文（简体） 繁体中文（台湾） 繁体中文（香港）

manifest.json文件 => 源码视图 => app-plus 下列代码：

"locales" : {
    "en" : {
        // 英文  
        "name" : "Language Change" // 应用名称 
    },
    "zh" : {
        // 中文
        "name" : "语言切换" // 应用名称 
    }
}

1.4.0（2020-05-10）

本版本为语言切换1.3的更新版本1.4， 主要更改有：

----本语言切换仅存在页面模板，使用时只下载页面模板即可

1.增加了必要的方法注释，更加通俗易懂 APP.vue文件及main.js中添加了必要说明，下载模板后记得查看

如：

<!-- 取值存储的语言 --> 
let lang = uni.getStorageSync('select');
<!-- 判断选择的语言 -->
if (lang) {
    _this.$i18n.locale = lang;
} else {
    _this.$i18n.locale = 'zh-CN';
};

2.简化了语言设置界面的js代码，搭配注释更加简单明了

3.调整了部分界面显示，舒服了哈哈哈哈

4.新增说明，如下多语言设置一律放在onShow函数中

如： onShow() {

<!-- 底部tabbar多语言 --> 
    uni.setTabBarItem({
        index: 0,
        text: this.i18n.tabBar.home
    });
    uni.setTabBarItem({
        index: 1,
        text: this.i18n.tabBar.me
    });

    <!-- 导航栏多语言 -->
    uni.setNavigationBarTitle({
        title: this.i18n.tabBar.home 
    });

    <!-- v-for循环中的数据国际化 -->
    let data = this.dataList;
    data[0].message = this.i18n.index.saoma,
    data[1].message = this.i18n.index.drawer
    data[2].message = this.i18n.index.judge + '01',
    data[3].message = this.i18n.index.judge + '02'
}

1.3.0（2020-04-13）

本版本为语言切换1.2的更新版本1.3， 主要更改有：

1.增加了App.vue文件中的多语言设置

示例： uni.showModal({ title: this.i18n.popup.version, content: this.i18n.popup.vertext, cancelText: this.i18n.popup.cancel, confirmText: this.i18n.popup.confirm, success: res => { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console.log('用户点击取消'); } } });

2.增加了页面中三目运算符条件判断中的多语言设置

示例： <view class="detail" @click="showText(item.addrUrl)">

{{item.message}} 
<text>{{item.value == 0 ? i18n.index.yes : i18n.index.no}}</text>

1.2.0（2020-03-25）

本版本为语言切换1.0的更新版本1.2， 主要更改有： 1.在locales文件下语言包的设置上作了修改，增加了message层级，页面中的写法得到了简化 computed: { i18n () {
return this.$t('message'); }
}, 写法由原来的const lang = this.$i18n.locale;取值使用this.$i18n.messages[lang].xxx.xxx 改为取值使用this.i18n.xx.xx

示例： uni.setNavigationBarTitle({ title: this.i18n.tabBar.home }); 页面取值示例：

{{ i18n.index.sentence }}

2.增加了showModal,showToast的多语言设置

示例： showToast() { uni.showToast({ icon: 'none', title: this.i18n.popup.open, duration: 2000 }); },

uni.showModal({ title: this.i18n.popup.tips, content: this.i18n.popup.modal, cancelText: this.i18n.popup.cancel, confirmText: this.i18n.popup.confirm, success: res => { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console.log('用户点击取消'); } } });

1.0.0（2020-01-16）

版本为1.0.0