There are more and more developers who use uni-app to make internationalized App, and everyone is concerned about internalization.

# Framework internal components and API internalization

Since version 3.1.5, uni-app has improved its internalization support with the internal components of the framework whose internal languages are as follows:

  • Simplified Chinese
  • Traditional Chinese
  • English
  • French
  • Spanish

Display of components and interfaces will automatically switch according to the system language environment, and the unsupported system language environment will be displayed in English.

# Internationalization of application content

The internalization of content in vue and js is a common solution. uni-app is based on vue.js and has mature i18n plug-in. Here is the usage of i18n plug-in shared by uni-app developers (opens new window)

# Internalization of pages.json

pages.json is not part of vue, and there are also text contents in native tabbar and native navigation bar. The internalization scheme of this part is as follows:

  • Bottom Tabbar uses the api of uni.setTabBarItem to dynamically set the text;
  • For the title at the top, use uni.setNavigationBarTitle to dynamically set the text (if each page needs to be set, you can use Vue.mixin); If the text button of titleNView is used on the App side, the general practice is to replace it with an icon. If text is necessary, setstyle can be used on the app side. Refer to https://ask.dcloud.net.cn/article/35374 (opens new window); On the H5 end, the text can be dynamically modified with the dom operation.
  • Of course, it is also possible not to use the native navigation bar and customize the title in the front end (rendering speed is not as fast as native), and these problems will not be involved.

# Internalization of native ui interface in application

When the native capabilities of the interface including album selection, scan code and map are called in the application, the ui of these native interfaces cannot be controlled in the front end.

  • In the map part, you can use the web map in the web-view component embedded with google, or you can encapsulate google's native map sdk with the native plug-in mechanism of uni-app.
  • Scanning part. App 3.1.5+ has internally internationalized.
  • Other native ui interfaces, such as album selection, cannot be internationalized, so that you can develop a native plug-in to replace it.

# Internationalization of application name and iOS privacy prompt

For details of cloud packaging, see https://ask.dcloud.net.cn/article/35860 (opens new window). Off-line packaging is configured in the native project by itself.