Taro使用mobx做国际化小程序
效果
目前项目使用的是Taro做小程序开发框架,Taro可以集成mbox,当然一些正常的框架也可以集成mbox,只不过需要自己集成,或者用redux也可以用相同的思想实现。
思路
利用mbox action会重新render页面的能力来实现通过切换action来改变对应的语言,同样的国际化会写成一个字典数据结构的数据,通过设定统一的出口去统一读取字典中的值,并且可以实现参数代入。
核心代码
import { observable } from 'mobx'
// Language是一个函数根据参数key来返回中英文
import Language from 'src/locales/index'
// 正则匹配有参数的形式
const RegEx = /#{(\w+)}/g
const counterStore = observable({
// 当前使用的国际化map
T: {},
// 用来切换语言的函数
setLocales(lang = 'zh') {
this.T = Language(lang)
},
// 对外暴露get函数,通过对应的key来获取
get(key, params) {
let value = this.T[key]
if (!value) {
return ''
}
if (!params) {
return value
}
value = value.replace(RegEx, (a, match) => {
const v = params[match]
if (v) {
return v
}
return ''
})
return value
}
})
export default counterStore
国际化初始化
根据当前手机系统设置的语言来设置当前使用的国际化文字language
@inject((stores, props) => {
return {
localesStore: stores.localesStore || {}
}
})
@observer
class App extends Component {
config = {
pages: [
'pages/index'
],
window: {
}
}
componentWillMount() {
try {
const system = Taro.getSystemInfoSync()
this.props.localesStore.setLocales(system.language)
} catch (e) {
console.log(e)
}
}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
}
方法的使用
首先在对应的国际化文件中初始化想要设置的值
export default {
'login.phone': '手机号码',
'login.phone.placeholder': '请输入手机号码',
'login.code': '验证码',
'login.code.sendmsg': '发送验证码',
'login.btn': '登录',
'login.msg': '今日购物#{discount}的折扣'
}
在对应想要国际化的文件引入localesStore
@inject((stores, props) => {
return {
T: stores.localesStore
}
})
那么在使用的时候只需要T.get("输入想要的key","对应的params object")
<AtButton type='primary' onClick={this.login}>{ T.get('login.btn') }</AtButton>
<View>{ T.get('login.msg', { discount: '7' }) }</View>
看一下例子
这时候我们希望在三秒以后吧国际化文字从中文变成英文,下面是对应的代码:
componentWillMount() {
try {
const system = Taro.getSystemInfoSync()
this.props.localesStore.setLocales(system.language)
// 三秒以后从中文变成英文
setTimeout(() => {
this.props.localesStore.setLocales('en')
}, 3000)
} catch (e) {
console.log(e)
}
}
在对应的国际化英文文件中加入
export default {
'login.phone': '手机号码en',
'login.phone.placeholder': '请输入手机号码',
'login.code': '验证码',
'login.code.sendmsg': '发送验证码',
'login.btn': 'login',
'login.msg': "#{discount} off today's purchase discount"
}
如图,总共刷新了3次,每次3秒以后都会变成English
Taro使用mobx做国际化小程序的更多相关文章
- 想做微信小程序第三方代理,各位觉得一键生成平台能赚到钱吗?
这几年生意不景气,这是很多人的共识.从2009年开始,各种专家就判断"明年经济是最差的一年."然后,这个明年,一直"明"到了2018年,到最后,我们发现,经济就 ...
- 微信小程序开发入门教程(四)---自己动手做个小程序
前面已将基础知识准备的差不多了,下面实际做一个小程序. 一.目标 用于上传照片和文字. 2个主要页面:我me,设置set 二.开始制作 1.打开微信开发者工具(我用的1.02.1907160 Wind ...
- 使用AirtestProject+pytest做支付宝小程序UI自动化测试
一,前言 1,背景 因公司业务需要做支付宝小程序的UI自动化测试,于是在网上查找小程序的自动化资料,发现微信小程序是有自己的测试框架的,但几乎找不到支付宝小程序UI自动化测试相关的资料.白piao失败 ...
- Taro 开发踩坑指南 (小程序,H5, RN)
Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...
- 你的产品适不适合做微信小程序?你需要这篇产品逻辑分析
自2017年1月9日张小龙宣布万众瞩目的“微信小程序”正式上线了.以名字看,感觉像是突出了“将你的程序接入微信”的意思. 我们此前分析过微信的功能迭代节奏:一般微信重要的功能规划周期,大约会在在9 ...
- 从零开始学做微信小程序,看这些就够了!
随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上 ...
- pyqt5 做的小程序,可以用来UI做个小demo
#!/usr/bin/python3# -*- coding: utf-8 -*- """ZetCode PyQt5 tutorial This program crea ...
- 用Taro做个微信小程序Todo, 小白工作记录
微信小程序框架: Taro 做微信小程序的框架, 几个比较主流的: 官方的WePY: https://tencent.github.io/wepy/document.html#/ 美团的mpvue: ...
- 小程序多端框架全面测评:chameleon、Taro、uni-app、mpvue、WePY
摘要: 微信小程序开发技巧. 作者:coldsnap 原文:小程序多端框架全面测评 Fundebug经授权转载,版权归原作者所有. 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一 ...
随机推荐
- license.json
{"license":{"uid":"5359f3d1-8c8c-462b-a17b-b7eb0c3ddb8f","type&qu ...
- Codeforces 1079C Playing Piano(记忆化搜索)
题目链接:Playing Piano 题意:给定长度为n的序列$a_i$,要求得到同样长度的序列$b_i$.满足一下条件: if $a_i < a_{i+1}$ then $b_i < b ...
- Forget Guava: 5 Google Libraries Java Developers Should Know
Forget Guava: 5 Google Libraries Java Developers Should Know Published on 2016 7 13 Somenath PandaFo ...
- jvm学习笔记二(减少GC开销的建议)
一:触发主GC(Garbage Collector)的条件 JVM进行次GC的频率很高,但因为这种GC占用时间极短,所以对系统产生的影响不大.更值得关注的是主GC的触发条件,因为它对系统影响很明显.总 ...
- CF24D Broken robot
题目链接 题意 有一个\(n \times m\)的矩阵.机器人从点\((x,y)\)开始等概率的往下,往右,往左走或者不动.如果再第一列,那么不会往左走,再第m列不会往右走.也就是说机器人不会走出这 ...
- codeforces-1140 (div2)
A.维护一个前缀最大值,不断跳即可 #include <map> #include <set> #include <ctime> #include <cmat ...
- SEO学习知识
监控流量的工具 百度统计 CNZZ 51LA 谷歌分析工具 如何从平台借流量? 竞价(付费).SEO 关键词定位: 定位人:负责人 将公司的业务全部列出来 选词: 根据定位的关键词选择出我们需要优化 ...
- oldboy s21day12.设计商城系统,主要提供两个功能:商品管理、会员管理。
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.写出三元运算的基本格式及作用?'''a if a>b else b''' # 2.什么是匿名函数? ...
- QGE 在齐次 Besov 空间中的准则
在 [Zhang, Zujin. On the blow-up criterion for the quasi-geostrophic equations in homogeneous Besov s ...
- 使用/dev/poll的str_cli函数
void str_cli(FILE *fp, int sockfd) { int stdineof; char buf[MAXLINE]; int n; int wfd; ]; struct dvpo ...