Antecedentes del caso
En el reciente proceso de desarrollo rápido de aplicaciones H5, la URL dinámica H5 correspondiente debe cargarse de acuerdo con el idioma del sistema. Sin embargo, la internacionalización del sitio web en mi proyecto se basa en URL dinámicas y necesito cargar URL dinámicamente en diferentes países e idiomas. Por ejemplo, cuando el idioma del sistema de telefonía móvil es japonés, abra la página web japonesa; cuando el idioma del sistema sea chino simplificado, abra la página web de chino simplificado, y cuando el idioma del sistema sea inglés, abra el sitio web en inglés, como se muestra en la siguiente figura:
solución
Paso 1: vincular variables
El valor del atributo src del componente web debe estar vinculado con una variable y no se puede escribir de forma fija. El loadUrl en la siguiente figura {{}} es una variable vinculada. El loadUrl se define bajo la etiqueta script en el archivo ux. Si se basa en aplicaciones rápidas en el extranjero Para el proyecto creado por la plantilla IDE H5, este paso se puede ignorar. El código de la plantilla IDE ya está hecho.
<!—template部分 -->
<web src="{{loadUrl}}"
</web>
<!—script部分 -->
export default {
data: {
loadUrl: "https://transit.navitime.com/en",
},Paso 2: inicializar variables
En el método onInit () del ciclo de vida rápido de la aplicación, el idioma local del sistema se obtiene a través de la interfaz del dispositivo API de la aplicación rápida, y la URL H5 correspondiente se carga después de evaluar el idioma.
onInit: function () {
const device = require("@system.device")
const res = device.getInfoSync();
let local = res.language; //system lauguage
let region = res.region; //system region
console.info('onInit :localole= ' + local + ", region=" + region);
if (local === 'zh') {
if (region === "CN") {
this.loadUrl = "https://transit.navitime.com/zh-cn/";
} else if (region === "TW") {
this.loadUrl = "https://transit.navitime.com/zh-tw/";
}
} else if (local === 'ja') {
this.loadUrl = "https://transit.navitime.com/ja/?from=huawei.quickapp";
} else {
//Other languages can use the default language H5
this.loadUrl = "https://transit.navitime.com/en";
}
},
Paso tres
Este paso es para el escenario en el que la aplicación H5 Express ya está abierta y ejecutándose. Si el usuario va al sistema para cambiar el idioma en este momento, espera que la página web de H5 también actualice el idioma correspondiente. Si no desea actualizar, puede ignorar este paso, el usuario puede salir de la aplicación y volver a ingresar.
La aplicación rápida proporciona una interfaz para monitorear los cambios de configuración de idioma durante el tiempo de ejecución. El código de adaptación es el siguiente:
onConfigurationChanged(object) {
console.log("onConfigurationChanged object=" + JSON.stringify(object));
if (object.type === "locale") {
const configuration=require("@system.configuration")
var localeObject = configuration.getLocale();
let local= localeObject.language;
let region= localeObject.countryOrRegion;
console.info(onConfigurationChanged(object :localole= ' + local + ", region=" + region);
if (local === 'zh') {
if (region === "CN") {
this.loadUrl = "https://transit.navitime.com/zh-cn/";
} else if (region === "TW") {
this.loadUrl = "https://transit.navitime.com/zh-tw/";
}
} else if (local === 'ja') {
this.loadUrl = "https://transit.navitime.com/ja/?from=huawei.quickapp";
} else {
//Other languages can use the default language H5
this.loadUrl = "https://transit.navitime.com/en";
}
}
},
para resumir
Este caso puede ayudar a los desarrolladores a darse cuenta rápidamente de la internacionalización de la carga de páginas web y proporcionar una buena solución para el lanzamiento global de la aplicación rápida H5.
Enlace original:
https://developer.huawei.com/consumer/cn/forum/topic/0204404985127060222?fid=18
Autor: AppGallery Connect