项目背景，在已经完善的汉语微信小程序基础上，实现登录时切换中英文界面的功能，这里只要做前端固定文案部分，接口返回的内容先不考虑。实现代码如下：
1、首先在微信小程序的根目录下创建“language”文件夹，用于存储语言相关的js文件。用_en.js代表英语，_zh.js代表汉语。
_en.js代码举例：
const languageMap = { "登录": "Login", "请输入手机号": "Mobile phone number", "密码": "Password", "登录说明": "Login instructions" } module.exports = { languageMap: languageMap }
_zh.js代码举例：
const languageMap = { "登录": "登录", "请输入手机号": "请输入手机号", "密码": "密码", "登录说明": "登录说明" } module.exports = { languageMap: languageMap }
2、在utils文件夹下创建languageUtils.js，目的是写入操作语言的通用方法。
languageUtils.js：
const app = getApp(); // 获取当前存的语言选择结果，如果没有默认用中文 const languageVersion = function () { return wx.getStorageSync(\'lang\') || \'zh\'; } //返回翻译数据 function translate() { return require(\'../language/_\' + languageVersion() + \'.js\').languageMap; } //切换语言方法 const changeLanguage= function (langType) { if (langType== 1) { wx.setStorageSync(\'lang\', \'en\') } else { wx.setStorageSync(\'lang\', \'zh\') } } //抛出方法 module.exports = { languageVersion: languageVersion, changeLanguage: changeLanguage, _lang: translate, }
切换语言就用小程序自己的Picker组件来操作，比较简单，举个小栗子：
<picker bindchange="changeLang" value="{{langInex}}" range="{{array}}">
<view class="picker" >
{{array[langInex]}} <i class="sz szxia"></i>
</view>
</picker>
3、正式使用，代码如下
需要使用页面的Js文件：
//先将js文件引入页面 var lang = require(\'../../utils/languageUtils\'); //生命周期函数 onShow: function () { this.initLanguage(); }, //初始化展示语言 initLanguage() { this.setData({ _lang: lang._lang() })
//把页面的Title值顺便修改一下 wx.setNavigationBarTitle({ title: this.data._lang["登录"], }) }
页面的wxml文件：
<form bindsubmit="formSubmit">
<view class="wp100">
<input class="loginInput" value="{{mobile}}" name="mobile" focus="{{mobileFocus}}" type="number" maxlength="11"
placeholder="{{_lang[\'请输入手机号\']}}" />
</view>
<view class="wp100 pt20 pr">
<input class="loginInput wp100" focus="{{pwdFocus}}" name="pwd" type="password" placeholder="{{_lang[\'密码\']}}" />
</view>
<view class="wp100 pt50">
<button class="loginBtn" formType="submit">{{_lang["登录"]}}</button>
</view>
</form>
这样就妥啦！！
请发表评论