위 챗 애플 릿 국제 화 탐색 실현(소스 주소 첨부)
공식 문 서 는 국제 화 방안 을 제 시 했 지만 배치 가 좀 복잡 하고 프로젝트 구조 에 대한 요구 가 있다 고 생각 합 니 다.만약 에 낡은 프로젝트 의 변경 비용 이 너무 많 으 면 스스로 작은 절차 국제 화 방안 을 실현 하기 로 결정 했다.
원본 주소:https://github.com/cachecats/miniprogram-i18n
프로젝트 구조
전체 디 렉 터 리 구 조 는 다음 그림 과 같 습 니 다.
2.1 언어 팩 준비
i18n 디 렉 터 리 의 각 언어 패키지 구 조 는 일치 해 야 한다.즉,대상 의 key 은 일치 하고 value 은 해당 하 는 언어 텍스트 이다.모든 작은 모듈 을 하나의 대상 으로 나 누 는 것 을 권장 하 며,하나의 대상 의 내용 이 너무 많아 서 는 안 된다.
zh-CN.js
export default {
common: {
language: ' ',
chinese: ' ',
english: ' ',
},
tabBarTitles: [' ', ' ', ' '],
navTitle: {
home: ' ',
forum: ' ',
mine: ' ',
setting: ' '
},
home: {
motto: ' ， ',
respect: ' ',
getUserInfo: ' '
},
forum: {
forumModule: ' ',
tip: ' ， '
},
comment: {
title: ' ',
msg: ' ， '
},
mine: {
title: ' ',
toNewPage: ' '
},
setting: {
title: ' '
}
}
export default {
common: {
language: 'Language',
chinese: 'Chinese',
english: 'English',
},
tabBarTitles: ['Home', 'Forum', 'Mine'],
navTitle: {
home: 'Home',
forum: 'Forum',
mine: 'Mine',
setting: 'setting'
},
home: {
motto: 'We would rather have an imperfect change than see a hopeless future',
respect: 'to warrior',
getUserInfo: 'Get avatar nickname'
},
forum: {
forumModule: 'I am forum module',
tip: 'The following is a component to show the international configuration of the component'
},
comment: {
title: 'Comment Components',
msg: 'The network leads, cherish this relationship'
},
mine: {
title: 'This is mine page',
toNewPage: 'Go to new page'
},
setting: {
title: 'I am setting page'
}
}도구 류
LangUtils 은 국제 화 에 필요 한 모든 방법 을 밀봉 했다.이 는 현재 언어 획득,언어 설정,현재 언어의 자원 파일 획득,TabBar 설정,NavigationBar 설정 등 방법 을 포함한다.실현 방향 은 현재 설 정 된 언어 를 애플 릿 이 제공 하 는 storage 에 존재 하 는 것 입 니 다.프로젝트 를 초기 화 할 때마다
storage 에서 언어 를 읽 고 읽 지 못 하면 기본 값 은 중국어 로 설정 합 니 다.그 다음 에 각 페이지 나 구성 요소 의
data 에서 페이지 에 필요 한 텍스트 자원 을 도입 하고 wxml 에서 data 에 연 결 된 변 수 를 사용 하여 문 자 를 보 여 줍 니 다.또한 라 이 프 사이클 의 onShow 방법 에서 현재 언어 를 다시 읽 고 data 을 설정 하여 언어 를 바 꿀 때마다 언어 팩 을 정확하게 불 러 옵 니 다.먼저
LangUtils 의 코드 를 보십시오.
import zh from '../i18n/zh-CN.js'
import en from '../i18n/en-US.js'
import Constants from '../constants/Constants';
export default{
// 。 app.js 。
initLang(){
//
let lang = wx.getStorageSync('lang')
if(!lang){
// ,
this.setLang(Constants.langCN)
}
},
//
setLang(lang){
try{
wx.setStorageSync('lang', lang)
}catch(e){
console.log(' ', e)
}
},
//
getLang(){
try{
let lang = wx.getStorageSync('lang')
return lang;
}catch(e){
console.log(' ', e)
}
},
//
getLangSrc(){
let lang = this.getLang();
if(lang === Constants.langCN){
return zh;
} else if(lang === Constants.langEN){
return en;
}else{
return zh;
}
},
// NavigationBarTitle
setNavigationBarTitle(title){
wx.setNavigationBarTitle({
title: title
})
},
/**
* tabBar。 tabBar app.json ， wx.setTabBarItem
* tabBar
*/
setTabBarLang(){
let tabBarTitles = this.getLangSrc().tabBarTitles;
console.log('tabBarTitles', tabBarTitles)
tabBarTitles.forEach((item, index) => {
console.log(item, index)
wx.setTabBarItem({
index: index,
text: item,
success: (res) => {
console.log('setTabBarItem success', res)
},
fail: (err) => {
console.log('setTabBarItem fail', err)
}
});
});
},
}Constants 은 상수 에 대한 포장 이 고 여기 에는 중 영문 코드 표지 가 저장 되 어 있다.
Constants.js
/**
*
*/
export default{
//
langCN: 'zh-CN',
//
langEN: 'en-US',
}tabBar 의 처리 입 니 다.tabBar 은 app.json 에서 죽 었 다 고 쓰 여 있 기 때문에 텍스트 를 동적 으로 바 꿀 수 없 기 때문에 언어 가 바 뀔 때마다 작은 프로그램 으로 만 노출 되 는 wx.setTabBarItem 방법 으로 순환 하 는 설정 tabBar 입 니 다.이로써 전기 준비 작업 은 이미 끝 났 으 니 구체 적 인 페이지 와 구성 요 소 를 처리 하 겠 습 니 다.
3.프로젝트 사용
세 군데 바 꿔 야 돼 요.
app.js 초기 화 언어 xxx.js 의 data 에 언어 속성 을 추가 하고 onShow 수명 주기 방법 에서 setData 을 호출 하여 언어 xxx.wxml 의 텍스트 는 data 리 바 인 딩 변수 3.1 app.js 언어 초기 화
프로젝트 입구 파일
app.js 에서 초기 화 합 니 다.
//
import LangUtils from './utils/LangUtils'
App({
onLaunch: function () {
//
LangUtils.initLang();
LangUtils.setTabBarLang();
}
})js 에서 의 사용 은 세 단계 로 나 뉜 다.
우선
LangUtils.js 도입그 다음 에
data 에서 변 수 를 lang 으로 정의 하고 ... 대상 의 재 구성 대 가 를 통 해 언어 파일 에서 해당 모듈 에 정 의 된 변 수 를 모두 lang 에 할당 하여 호출 하기에 편리 합 니 다.settings 모듈 이 라면 이렇게 쓸 수 있 습 니 다:lang: {...LangUtils.getLangSrc().settings}.빈 대상 만 쓸 수도 있다.lang: {},그리고 onShow() 방법 에서 lang 에 값 을 부여 할 수도 있다.onShow() 생명주기 방법 에서 lang 의 값 을 갱신 하여 언어 가 바 뀌 지 않도록 한다.애플 릿 제목 을 설정 하려 면 LangUtils.setNavigationBarTitle() 방법 을 사용 하 십시오.
// pages/setting/setting.js
import LangUtils from '../../utils/LangUtils'
let langSrc = LangUtils.getLangSrc()
Page({
/**
*
*/
data: {
lang: {
...langSrc.setting
}
},
/**
* --
*/
onShow: function () {
this.setLanguage();
},
/**
*
*/
setLanguage() {
langSrc = LangUtils.getLangSrc();
this.setData({
lang: {
...langSrc.setting
}
})
// NavigationBarTitle
LangUtils.setNavigationBarTitle(langSrc.navTitle.setting);
}
})wxml 에 서 는 일반 변수 사용 방법 과 같 습 니 다.
<view class="setting-container">
<text class="title">{{lang.title}}</text>
</view>Component 과 Page 국제 화 는 기본적으로 같 지만 생명주기 방법 이 다 르 기 때문에 약간의 차이 가 있다.Coponents 의 this.setLanguage() 은 생명주기 의 pageLifetimes 의 show 방법 에서 호출 된다.
// pages/forum/components/comment.js
import LangUtils from '../../../../utils/LangUtils'
let langSrc = LangUtils.getLangSrc();
Component({
data: {
lang: {
...langSrc.comment
}
},
pageLifetimes: {
//
show: function () {
console.log('page show---')
this.setLanguage();
},
},
/**
*
*/
methods: {
/**
*
*/
setLanguage() {
langSrc = LangUtils.getLangSrc();
this.setData({
lang: {
...langSrc.comment
}
})
}
}
})데모 의
home 페이지 에 언어 를 전환 합 니 다.사용자 가 언어 를 변경 한 후 LangUtils.setLang 을 호출 하여 언어 값 을 변경 하고 LangUtils.setTabBarLang 을 호출 하여 tabBar 의 텍스트 를 다시 설정 해 야 합 니 다.
전환 후 효과
//index.js
//
const app = getApp()
import Constants from '../../constants/Constants'
//
import LangUtils from '../../utils/LangUtils'
let langSrc = LangUtils.getLangSrc();
//
const LANGUAGE_OPTIONS = [{
key: Constants.langCN,
value: ' '
},
{
key: Constants.langEN,
value: 'English'
}
]
Page({
data: {
// common home lang。
// ， data ， 。
lang: {
...langSrc.common,
...langSrc.home
},
langOptions: LANGUAGE_OPTIONS,
index: 0
},
onLoad: function () {
// picker
let lang = LangUtils.getLang();
this.setData({
index: lang === Constants.langCN ? 0 : 1
})
},
onShow: function () {
// onShow ，
this.setLanguage();
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
/**
*
*/
onLanguageChange(e) {
const index = e.detail.value
console.log(e)
this.setData({
index: index
})
//
LangUtils.setLang(this.data.langOptions[index].key);
// tabBar
LangUtils.setTabBarLang();
this.setLanguage();
},
/**
*
*/
setLanguage() {
langSrc = LangUtils.getLangSrc();
this.setData({
lang: {
...langSrc.common,
...langSrc.home
}
})
// NavigationBarTitle
LangUtils.setNavigationBarTitle(langSrc.navTitle.home);
}
})코드 는 언뜻 보기 에는 많 지만 제3자 모듈 을 도입 하지 않 아 도 되 고 요구 에 따라 프로젝트 구 조 를 바 꾸 지 않 아 도 된다 는 장점 이 있다.사실 전기의 준비 작업 을 다 한 후에 후기 에 유지 하 는 것 이 매우 편리 하 다.
물론 이 방안 은 최적화 할 수 있 는 부분 도 있다.예 를 들 어 각 페이지 의
onShow 방법 에서 비슷 한 논 리 를 집행 하고 나중에 시간 이 있 으 면 최적화 할 것 이다.프로젝트 주소:https://github.com/cachecats/miniprogram-i18n
위 챗 애플 릿 국제 화 탐색 실현(소스 주소 첨부)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 애플 릿 국제 화 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
