项目背景,在已经完善的汉语微信小程序基础上,实现登录时切换中英文界面的功能,这里只要做前端固定文案部分,接口返回的内容先不考虑。实现代码如下:
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>
这样就妥啦!!