CN114253535A - H5页面多语言渲染方法及装置 - Google Patents

Abstract

本申请公开了一种H5页面多语言渲染方法，包括：接收H5页面访问请求，H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符；依据H5页面访问请求中的目标语言配置信息、请求访问的H5页面中的文案标识符、以及文案配置数据，确定与请求访问的H5页面相匹配的文案信息，文案配置数据中包括至少一个语言语种的语言资源包，语言资源包由文案标识符与相对应的文案信息构成；依据与请求访问的H5页面相匹配的文案信息，渲染请求访问的H5页面。本申请还公开了另一种H5页面多语言渲染方法及相关联的装置。采用本申请提供的渲染H5页面的方案，前端开发成本低、效率高，且易维护，能够更好地满足APP中的多语言展示需求。

Description

H5页面多语言渲染方法及装置

本文件是申请号为“201710409373.8”、申请日为“2017年06月02日”、申请名称为“H5页面多语言渲染方法及装置”的专利申请的分案申请。

技术领域

本申请涉及计算机技术领域，尤其涉及H5页面多语言渲染方法及装置。

背景技术

随着移动互联网技术的发展，APP(全称Application，应用程序)的功能越来越强大。 同时，H5页面因其灵活性高、开发成本低、制作周期短等优势，在APP中的应用也越来越普遍。

伴随着经济全球化趋势，为了满足业务的国际化发展需求，如何实现APP中H5页面的多语言展示也就成为亟待解决的问题。目前各大主流APP在解决H5页面的多语言展示 问题时采用的方案主要有两种。

一种是采用离线H5多语言的形式，由前端存储离线多语言资源包，并且由前端控制 H5页面文案在多种语言之间的切换。采用这种方式，前端的开发任务较重且效率较低，多 语言资源包的更新需要前端发布资源包，因此对多语言资源包的维护亦非常困难。

另一种是采用在线H5多语言的形式，由服务端下发多语言资源包，且多语言资源包以 属性文件的形式固定写死在服务端代码资源属性文件中，因此更新多语言资源包需要服务 端通过发布的方式解决，不能实现实时更新。此外，为了支持多语言形式的H5页面，需要 设计多套前端H5页面中的静态文案，以便服务端根据当前语言版本渲染对应的前端H5页 面，从而也存在开发效率低，前端开发维护成本较大等方面缺陷。

发明内容

本申请实施例提供一种H5页面多语言渲染方法及装置，旨在提供一种前端开发成本 低、效率高，且易维护的渲染H5页面的方案，以满足APP中的多语言展示需求。

本申请实施例采用下述技术方案：

第一方面，本申请实施例提供一种H5页面多语言渲染方法，包括：

接收H5页面访问请求，所述H5页面访问请求中包括目标语言配置信息，且请求访问 的H5页面中包括文案标识符；

依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案 标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息；所述文案 配置数据中包括至少一个语言语种的语言资源包，所述语言资源包由文案标识符与相对应 的文案信息构成；

依据与所述请求访问的H5页面相匹配的文案信息，渲染所述请求访问的H5页面。

优选地，第一方面提供的H5页面多语言渲染方法中，所述H5页面访问请求中还包括 请求访问的H5页面的页面标识信息，所述目标语言配置信息包括目标语言的语种信息；

则依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文 案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息，包括：

依据所述目标语言的语种信息，确定与所述目标语言的语种信息相对应的第一语言资 源包；依据所述请求访问的H5页面的页面标识信息，确定请求访问的H5页面的第一文案 标识符；

依据所述文案配置数据，将所述第一语言资源包中与所述第一文案标识符相对应的文 案信息确定为与所述请求访问的H5页面相匹配的文案信息。

优选地，第一方面提供的H5页面多语言渲染方法中，依据所述请求访问的H5页面的 页面标识信息，确定请求访问的H5页面的第一文案标识符，包括：

依据所述请求访问的H5页面的页面标识信息，确定请求访问的H5页面；

采用Velocity模板获取所述请求访问的H5页面中构成动态文案的文案标识符，作为所 述第一文案标识符。

优选地，第一方面提供的H5页面多语言渲染方法中，在接收H5页面访问请求之后，在确定与所述请求访问的H5页面相匹配的文案信息之前，所述方法还包括：

对所述H5页面访问请求进行解析，确定所述H5页面访问请求中的所述目标语言配置 信息。

优选地，第一方面提供的H5页面多语言渲染方法中，在接收H5页面访问请求之后，在对所述H5页面访问请求进行解析之前，所述方法还包括：

拦截所述H5页面访问请求，以便从所述H5页面访问请求中解析出所述目标语言配置 信息。

优选地，第一方面提供的H5页面多语言渲染方法中，在接收H5页面访问请求之后，在对所述H5页面访问请求进行解析之前，所述方法还包括：

依据所述H5页面访问请求中包括的请求访问的H5页面的页面标识信息，将所述H5页面访问请求分发至与所述页面标识信息相对应的业务页面视图。

优选地，第一方面提供的H5页面多语言渲染方法中，在对所述H5页面访问请求进行 解析，确定所述H5页面访问请求中的所述目标语言配置信息之后，所述方法还包括：

将所述目标语言配置信息存储在与所述H5页面访问请求相对应的线程追踪文件中；

则在确定与所述请求访问的H5页面相匹配的文案信息之前，所述方法还包括：

从所述线程追踪文件中提取所述H5页面访问请求中的所述目标语言配置信息，以便查 找与所述请求访问的H5页面相匹配的文案信息。

优选地，第一方面提供的H5页面多语言渲染方法中，还包括：

根据预设更新策略，将存储在远程文案平台的语言资源包拉取到本地存储；

将存储在本地的所述语言资源包加载到Java虚拟机的缓存中，形成所述文案配置数据。

优选地，第一方面提供的H5页面多语言渲染方法中，将存储在远程文案平台的语言资 源包拉取到本地存储，包括：

依据请求访问的H5页面所属的APP，确定存储在所述远程文案平台上与所述APP相对应的语言资源包；

将与所述APP相对应的语言资源包从所述远程文案平台拉取到所述本地存储。

优选地，第一方面提供的H5页面多语言渲染方法中，所述语言资源包包括版本信息；

则将与所述APP相对应的语言资源包从所述远程文案平台拉取到所述本地存储，包括：

当本地已存储有所述语言资源包，比较所述远程文案平台与所述本地存储的语言资源 包的版本信息；

若所述远程文案平台比所述本地存储的语言资源包的版本更新，则将所述远程文案平 台中的语言资源包拉取到所述本地存储。

优选地，第一方面提供的H5页面多语言渲染方法中，所述预设更新策略包括立即更新、 定时更新或者周期更新。

优选地，第一方面提供的H5页面多语言渲染方法中，所述语言资源包以.properties属 性配置文件的格式存储在本地。

优选地，第一方面提供的H5页面多语言渲染方法中，所述文案配置数据以数据结构 MAP的格式存储在Java虚拟机的缓存中。

第二方面，本申请实施例提供了另一种H5页面多语言渲染方法，包括：

发送H5页面访问请求，所述H5页面访问请求中包括目标语言配置信息，且请求访问 的H5页面中包括文案标识符，用于供服务器依据所述H5页面访问请求中的目标语言配置 信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问 的H5页面相匹配的文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包， 所述语言资源包由文案标识符与相对应的文案信息构成；

接收并展示所述服务器依据与所述请求访问的H5页面相匹配的文案信息渲染的所述 请求访问的H5页面。

优选地，第二方面提供的H5页面多语言渲染方法中，在发送H5页面访问请求之前，所述方法还包括：

客户端的APP向无线网关发送远程过程调用协议，所述远程过程调用协议携带有所述 目标语言配置信息，用于请求访问所述H5页面；

H5容器从所述无线网关中获取所述目标语言配置信息，并将所述目标语言配置信息设 置到所述H5页面访问请求的头域部分。

第三方面，本申请实施例提供一种H5页面多语言渲染装置，包括：

请求接收模块，接收H5页面访问请求，所述H5页面访问请求中包括目标语言配置信 息，且请求访问的H5页面中包括文案标识符；

文案信息确定模块，依据所述H5页面访问请求中的目标语言配置信息、所述请求访问 的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的 文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包，所述语言资源包由 文案标识符与相对应的文案信息构成；

渲染模块，依据与所述请求访问的H5页面相匹配的文案信息，渲染所述请求访问的 H5页面。

第四方面，本申请实施例提供另一种H5页面多语言渲染装置，包括：

请求发送模块，发送H5页面访问请求，所述H5页面访问请求中包括目标语言配置信 息，且请求访问的H5页面中包括文案标识符，用于供服务器依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包，所述语言资源包由文案标识符与相对应的文案信息构成；

接收展示模块，接收并展示所述服务器依据与所述请求访问的H5页面相匹配的文案信 息渲染的所述请求访问的H5页面。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

服务器接收到包括有目标语言配置信息的H5页面访问请求后，在文案配置数据中查找 确定与请求访问的H5页面相匹配的文案信息，进而依据这些文案信息渲染请求访问的H5 页面。具体地，本申请实施例中请求访问的H5页面中包含文案标识符，在不同语言语种的 语言资源包中，文案标识符又与不同的文案信息相对应。因此，依据H5页面访问请求中的 目标语言配置信息、请求访问的H5页面中的文案标识符、以及文案配置数据，就可以确定 出与请求访问的H5页面相匹配的文案信息，即确定出请求访问的H5页面在所请求展示的 语言语种下应展示的文案，从而满足了APP中的多语言展示需求。

由于本申请实施例的H5页面中采用文案标识符替代了现有H5页面中的静态文案，并 利用包括有多个语种的语言资源包，因此可以通过查询语言资源包确定与文案标识符相对 应的、不同语种需求下的不同的文案信息。这种方式克服了现有技术中需要在前端存储多 种语言资源包或者开发多套前端页面的问题，有效降低了前端的开发成本，开发效率更高， 并且通过更新语言资源包即可更新H5页面，因此也易于维护，从而能够更好的满足APP 中的多语言展示需求。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的 示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例提供的适用于服务器侧的H5页面多语言渲染方法的流程示意图；

图2为本申请实施例提供的第二种适用于服务器侧的H5页面多语言渲染方法的流程示 意图；

图3为本申请实施例提供的H5页面多语言渲染方法中远程文案平台的存储模型示意 图；

图4为本申请实施例提供的适用于服务器侧的H5页面多语言渲染装置的结构示意图；

图5-1为现有技术中H5页面的示例图；

图5-2为本申请所采用的以文案标识符替代图5-1中静态文案的动态H5页面的示例图；

图5-3为本申请所采用的以文案信息替代图5-2中文案标识符的渲染示例图；

图6-1为在客户端选择语言配置信息的示例图；

图6-2为具体示例中目标语言选择为英语后展示出的重置登录密码的H5页面；

图6-3为具体示例中目标语言选择为英语后展示出的用于确认如何重置支付密码的H5 页面；

图6-4为具体示例中目标语言选择为英语后展示出的重置支付密码的H5页面。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应 的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部 分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做 出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。

参见图1所示，本申请提供了一种H5页面多语言渲染方法，包括：

S101：接收H5页面访问请求，H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符；

S102：依据H5页面访问请求中的目标语言配置信息、请求访问的H5页面中的文案标 识符、以及文案配置数据，确定与请求访问的H5页面相匹配的文案信息；文案配置数据中 包括至少一个语言语种的语言资源包，语言资源包由文案标识符与相对应的文案信息构成；

S103：依据与请求访问的H5页面相匹配的文案信息，渲染请求访问的H5页面。

图1所示的流程可适用于APP服务器端(APP，全称Application，指在智能终端上运行的第三方应用程序)。服务器端在执行步骤S101接收到包括有目标语言配置信息的H5页面访问请求后，执行步骤S102在文案配置数据中确定出与请求访问的H5页面相匹配的文案信息，进而执行步骤S103依据上述相匹配的文案信息完成H5页面的渲染，从而满足APP中用多种语言展示H5页面的需求。

采用本申请实施例的技术方案，前端不用存储多语言资源包，服务器端也不用将多语 言资源包写死在代码资源属性文件中，而是可以将多语言资源包存储在文案配置数据中， 供服务器端依据APP发出的H5页面访问请求进行查询，确定出与请求访问的H5页面相匹 配的文案信息。由于本申请请求访问的H5页面中包括文案标识符，因此，在渲染前端H5 页面时，可以直接用与请求访问的H5页面相对应的多语言文案信息替换文案标识符，渲染 到前端页面展示，从而无需设计多套H5页面就可以满足多语言页面的显示需求。因此，采 用本申请实施例提供的技术方案，能够简化前端的开发，前端开发成本更低，开发效率更 高；并且，可以通过对文案配置数据的更新和维护实现多语言文案信息的更新与维护，因 而也更易于维护，且使得多语言文案的实时更新亦成为可能。

以下将从多方面详细介绍本申请所提供的H5页面多语言渲染方法的具体实施。

服务器在执行步骤S101时接收到的H5页面访问请求，由客户端通过其APP发出，可以是用户打开移动终端(可理解为客户端APP的硬件载体)、启动APP后，请求使用具体 的在线H5业务时发出的。更具体地，上述H5页面访问请求的发出过程的一种具体实施过 程可以描述为：

当用户访问某H5页面需要切换语言版本时，操作客户端的APP向无线网关发送远程 过程调用协议(简称RPC，全称Remote Procedure Call Protocol)以请求具体的在线H5业 务。上述远程过程调用协议中携带有与用户选择切换的语言语种和/或版本有关的目标语言 配置信息，用于请求访问H5页面。

在此基础上，H5容器从上述无线网关中获取目标语言配置信息，可具体表现为语言语 种和/或版本设置信息(语言版本locale)，并将目标语言配置信息设置到H5页面访问请求 的头域部分。例如，可以由H5容器执行代理请求，将语言版本locale设置到HTTPS请求的header user-agent中，并向APP的在线H5页面的URL地址发出上述H5页面访问请求。

服务器侧在接收到客户端的APP发出的访问H5页面的请求后，可以采用拦截器对上 述H5页面访问请求进行拦截，以便从H5页面访问请求中解析出目标语言配置信息，进而实现语言语种和/或版本的切换。通常，客户端的APP需要访问多个不同的H5页面，此处 采用拦截器对H5页面访问请求进行拦截，有利于对该请求做进一步语言解析等处理，避免 服务器侧依据默认的语言语种和/或版本等信息展示H5页面而导致无法达到用户的预期展示效果，因此有利于实现多语言展示功能。此处所采用的拦截器能够动态拦截Action调用的对象，使得开发者可以定义在一个action执行的前后执行的代码，也可以在一个action执行前阻止其执行，同时也提供了一种可以提取action中可重用部分的方式。

服务器侧在接收到客户端的APP发出的访问H5页面的请求后，还可以进入页面视图 统一分发器模块，依据H5页面访问请求中包括的请求访问的H5页面的页面标识信息，将H5页面访问请求分发至与页面标识信息相对应的具体的业务页面视图。通常，客户端的APP需要访问多个不同的H5页面以实现不同的业务。因此，服务器侧在响应上述H5页面访问 请求时进行请求的分发，由与请求访问的H5页面相对应的业务页面视图模块对该请求做进一步解析等处理，有利于对该H5页面访问请求的处理。

需要说明的是，本申请实施例对于H5页面访问请求的拦截和分发的执行顺序不做限 定。

服务器侧在接收到客户端的APP发出的访问H5页面的请求后，还可以对H5页面访问 请求进行解析，确定H5页面访问请求中的目标语言配置信息。这一解析过程，可以在上述 拦截和分发步骤执行之后进行。由以上描述可知，目标语言配置信息可能被设置到H5页面 访问请求的头域部分(例如https请求的header user-agent)中。由于http协议中的头域部分 通常会向被访问的网站提供所使用的浏览器类型、操作系统及版本、加密等级、CPU类型、 浏览器渲染引擎、浏览器语言、浏览器插件等信息的标识，因此，对H5页面访问请求进行 解析，即可确定客户端APP希望采用的语言语种和/或版本信息，进而能够根据用户的需求 进行多语言的展示。

进一步地，在对H5页面访问请求进行解析，确定H5页面访问请求中的目标语言配置 信息之后，还可以将目标语言配置信息存储在与H5页面访问请求相对应的线程追踪文件 中。由于客户端的APP可能需要访问多个不同的H5页面以实现不同的业务，而用户对于语言语种和/或版本的需求在同一客户端的APP上往往是一致的。因此，可以在服务器侧建立线程追踪文件，以解决互联网系统采用SOA架构部署而成的大型分布式系统中日志的追踪问题。具体地说，一个看似简单的用户请求(可理解为用户通过操作客户端的APP发出 的请求)，在后台可能涉及多个应用系统，每一个应用系统都是相互独立的，系统与系统之 间采用RPC进行调用。建立有线程追踪组件(可称为tracer组件)，采用线程追踪文件(可 称为tracerContext，作为tracer组件中的追踪上下文)记录就能够追踪一个用户请求整个生命周期中的所有调用记录和过程，线程追踪文件起到了多应用间存储和透传上下文信息的作用。

再具体到本申请实施例的应用场景，在实现H5页面的多语言渲染问题时，当服务器从 H5访问请求中解析出目标语言配置信息(可具体化为locale)后，将这一信息设置到线程 追踪文件(例如，可称为tracerContext)中，可以方便其他线程和应用获取这一信息。尤其 是在依据目标语言配置信息等确定与H5页面访问请求相匹配的文案信息之前，可以自动从 线程追踪文件中提取H5页面访问请求中的目标语言配置信息，以便查找与请求访问的H5 页面相匹配的文案信息。

本申请实施例中的H5页面访问请求中还可包括请求访问的H5页面的页面标识信息， 目标语言配置信息可具体包括目标语言的语种信息；则在执行上述步骤S102依据H5页面 访问请求中的目标语言配置信息、请求访问的H5页面中的文案标识符、以及文案配置数据， 确定与请求访问的H5页面相匹配的文案信息时，参见图2所示，可具体包括：

S1021：依据目标语言的语种信息，确定与目标语言的语种信息相对应的第一语言资源 包；

S1022：依据请求访问的H5页面的页面标识信息，确定请求访问的H5页面的第一文案标识符；

S1023：依据文案配置数据，将第一语言资源包中与第一文案标识符相对应的文案信息 确定为与请求访问的H5页面相匹配的文案信息。

由于在文案配置数据中包括至少一个语言语种的语言资源包，这些语言资源包中包括 相对应的文案标识符和文案信息，因此，一方面，依据目标语言配置信息(可具体化为目 标语言的语种信息)就能在文案配置数据中确定出与目标语言的语种信息相对应的语言资 源包，记为第一语言资源包，表示客户端的APP请求以该语言资源包所对应的语种渲染H5 页面。

另一方面，根据H5页面访问请求还可以确定请求访问的H5页面的页面标识信息(该 页面标识信息可以表示客户端的APP请求的具体的在线H5业务，可以具体化为H5在线业 务的URL地址或其他标识信息)。由于客户端的APP请求访问的H5页面中包括文案标识符，并且不同H5页面的文案标识符可能是不同的，因此，依据请求访问的H5页面的页面 标识信息，可以先确定客户端的APP请求访问的具体H5页面，进而可以确定该请求访问 的H5页面的文案标识符，记为第一文案标识符。更具体地，可以采用Velocity模板获取请 求访问的H5页面中构成动态文案的文案标识符，将获取到的文案标识符作为第一文案标识 符。

以上两方面的执行顺序不做限定。在以上两方面的基础上，进一步在第一语言资源包 中查找到与第一文案标识符相对应的文案信息，将查找到的文案信息确定为与请求访问的 H5页面相匹配的文案信息，供服务器依据这些文案信息渲染请求访问的H5页面。在渲染 时，可以用查找到的文案信息替换该文案信息所对应的第一文案标识符，将这些文案信息 直接渲染和嵌入到前端的HTML5代码中，以完成对请求访问的H5页面的渲染。

以下将进一步详细说明多语言H5页面的文案信息的查找确定与页面渲染相关的原理。

现有技术中的H5页面通常为静态文案，参见图5-1所示，文案都是由前端静态写死在 HTML5中的，访问H5页面时将展示确定文字的文案。在本申请实施例中，将静态固定的语言文案替换为H5页面中的文案标识符，参见图5-2所示，这些文案标识符(例如图5-2 中key1～key6)可以表现为占位符的形式，记为key。这种文案标识符可以体现为代码、数 字、文字或其组合等任何形式。这就使得本申请中的多语言H5页面随着语种的变化而动态 的替换和渲染成为可能。

在本申请实施例中，建立有语言资源包，每一种语种都可对应至少一个语言资源包， 同一种语种所对应的语言资源包可以按照更新的先后、应用场景的不同等因素划分出不同 的版本供选用。在每一语言资源包中，相对应的存储有文案标识符(可记为key)和文案信 息(可记为message)，每一个文案标识符(key)都在语言资源包中对应有文案信息(message)， 从而可以在渲染H5页面时用相对应的文案信息(例如图5-3中msg1～msg6)替换H5页面 中的文案标识符(例如图5-2中key1～key6)，参见图5-3所示，进而实现H5页面的多语言 展示。

在本申请实施例中采用VM，全称为Velocity Module(Velocity模板)。Velocity是一个 基于java的模板引擎(template engine)，允许开发人员仅仅使用简单的模板语言(template language)引用java代码定义的对象和变量。本申请请求访问的H5页面可以表示为前端 H5 VM页面，可以理解为由HTML5标签语言和VM模板语言混合而成。前端和后端分离， 前端只关心布局、页面样式等问题，对于动态的、不确定的都可以采用文案标识符的形式 体现，在渲染运行时再使用velocity模板语言替换为文案。

在本申请实施例中，velocity模板语言可以使用java代码、Bean、变量，在velocity模 板中引用了java变量(具体为文案标识符key)，可以采用Bean2Velocity工具，把不确定的 动态多语言文案(可以理解为文案标识符key，可具体体现为java变量的形式)替换为具体 的相对应的文案信息(可以理解为对应语种的语言资源包中存储的、与文案标识符key相对 应的文案信息message)，直接渲染和嵌入到前端的HTML5代码中。

在本申请中，可以在H5 VM中直接使用上述Bean2Velocity工具，将每个H5页面涉及 到的静态文案都采用这种方式替换为与页面相对应的文案标识符。需要说明的是，客户端 APP要访问的所有H5页面，都可以复用同一个Bean2Velocity工具，使得java接口和java变量都可以在velocity模板中使用。而每个不同H5页面的文案标识符通常是不同的，因此先依据H5页面访问请求确定具体的请求访问的H5页面后，再依据该H5页面的文案标识 符确定用于渲染的相匹配的文案信息。

以上详细说明了如何利用Velocity模板动态实现多语言H5页面的文案信息的查找与渲 染，在此过程中，文案配置数据必不可少。因此，以下将详细举例说明文案配置数据及其 包含的语言资源包的具体实现。

本申请中所采用的语言资源包可以由翻译人员对涉及到的文案条目按照需要进行多语 言翻译，并且在远程文案平台进行批量导入，后台可以为远程文案平台提供数据库的增删 查改功能，以便根据业务发展需要更新文案信息。通常，后台按照APP多语言需求，提前 在录入需要支持的多语言文案信息，并完成发布上线。后台可按照一定形式将语言资源包 持久化到数据库(DB)中，并对外提供统一的查询服务接口，包括语言资源包的版本查询 和多语言资源包的查询等。

更具体地，可以采用图3所示的存储模型存储包括文案标识符(key)和文案信息(message)的语言资源包。在此处例举的远程文案平台中，首先按照APP的名称(appname)这一维度进行划分，从而使得该远程文案平台支持多个应用的多语言展示。其次采用版本化管理，采用版本号(version)的方式记录语言资源包的更新情况。每一个语言资源包对应一种locale，例如：en、zh-Hans、zh-HK等。每一语言资源包(locale)中的存储形式可表 现为<key,message>，其中，key表示前端在线H5页面静态文案替换成的文案标识符，message表示该静态文案在当前语种下应采用的实际对应的语言文案，即文案信息。

在某些情况下，服务器侧可以通过DRM开关(分布式动态资源管理器)动态调整后台 持久化的多语言资源包拉取策略并同步到服务器内存及磁盘文件。

具体地，服务器可以根据预设更新策略，将存储在远程文案平台的语言资源包拉取到 本地存储，进而将存储在本地的语言资源包加载到Java虚拟机的缓存中，形成供查找确定 文案信息的文案配置数据。

预设更新策略可以包括立即更新、定时更新或者周期更新，这一策略的信息可以标识 位的形式体现。若更新策略为停止更新，则将停止从远程文案平台拉取语言资源包。

通常情况下，服务器侧的应用启动后，即可开始执行多语言资源包数据的加载初始化 步骤。初始化时，可以先检查服务器的本地磁盘中是否存储有语言资源包，例如，可以检 查磁盘上本地目录“/home/admin/conf/locale”。多语言资源包可以以.properties属性配置文 件的格式存储在本地，例如，其格式可设定为{appName(应用名).locale(语言语种/版 本).timestamp(时间戳).proterties}。具体地，语言资源包 “clientsc.zh-HK.20170227114458.properties”，表示该语言资源包适用于名为“clientsc”的 APP，采用中文进行渲染，产生对应的时间戳为“20170227114458”，文件格式为.properties 属性配置文件的格式。

若服务器的磁盘本地存储有上述语言资源包，则可将语言资源包加载到本地文件模块， 再依次读取文件IO流，并对*.properties属性格式文件进行解析，在加载和解析成功后，可 更新服务器的Java虚拟机的缓存(可简称为JVM)，将存储在本地磁盘的语言资源包加载 到Java虚拟机的缓存中，形成本申请实施例所采用的文案配置数据。存储在Java虚拟机的 缓存中的文案配置数据，可以以数据结构MAP的格式存储，例如，体现为Map<Stringlocale, Map<String key,String message>>的形式。

服务器侧还可按照预设更新策略，将存储在远程文案平台的语言资源包拉取到本地存 储，以便更新本地已存储的语言资源包。当然，若本地尚未存储语言资源包，直接从远程 文案平台拉取即可。在具体实施时，可具体包括以下步骤：

依据请求访问的H5页面所属的APP，确定存储在远程文案平台上与APP相对应的语言资源包；具体地，可以通过APP的名称(appname)在远程文案平台上确定相对应的语言 资源包；

将与APP相对应的语言资源包从远程文案平台拉取到本地存储。

参见图3所示的存储模型，远程文案平台中存储语言资源包时，除了用APP的名称区 分对应的语言资源包之外，还可以包括版本信息。此时，可以无条件的将语言资源包从远 程文案平台拉取到本地存储，覆盖已存储在本地的原语言资源包；也可以先比较远程文案 平台与本地存储的语言资源包的版本信息，若远程文案平台比本地存储的语言资源包的版 本更新，则将版本更新的远程文案平台中的语言资源包拉取到本地存储。

在上述过程中，若出现语言资源包拉取失败的情况，可以更改更新策略为立即更新， 以便再次进行拉取语言资源包，使得服务器侧能够获取到最新的语言资源包；也可以在定 时更新或周期更新的策略下，留待下一次启动更新时获取最新的语言资源包。

服务器在成功拉取语言资源包存储到本地之后，可依据这一语言资源包更新服务器的 JVM(java虚拟机)的缓存，以便在用户请求访问H5页面时，能够按照最新的文案信息渲 染H5页面。

在以上给出的实施例中，服务器接收到包括有目标语言配置信息的H5页面访问请求 后，在文案配置数据中查找确定与请求访问的H5页面相匹配的文案信息，进而依据这些文 案信息渲染请求访问的H5页面。具体地，本申请实施例中请求访问的H5页面中包含文案标识符，在不同语言语种的语言资源包中，文案标识符又与不同的文案信息相对应。因此，依据H5页面访问请求中的目标语言配置信息、请求访问的H5页面中的文案标识符、以及 文案配置数据，就可以确定出与请求访问的H5页面相匹配的文案信息，即确定出请求访问 的H5页面在所请求展示的语言语种下应展示的文案，从而满足了APP中的多语言展示需 求。

由于本申请实施例的H5页面中采用文案标识符替代了现有H5页面中的静态文案，并 利用包括有多个语种的语言资源包，因此可以通过查询语言资源包确定与文案标识符相对 应的、不同语种需求下的不同的文案信息。这种方式克服了现有技术中需要在前端存储多 种语言资源包或者开发多套前端页面的问题，有效降低了前端的开发成本，开发效率更高， 并且通过更新语言资源包即可更新H5页面，因此也易于维护，从而能够更好的满足APP 中的多语言展示需求。

与上述服务器侧的H5页面多语言渲染方法相对应地，本申请实施例还提供了一种H5 页面多语言渲染方法，适用于客户端，包括：

发送H5页面访问请求，H5页面访问请求中包括目标语言配置信息，且请求访问的H5 页面中包括文案标识符，用于供服务器依据H5页面访问请求中的目标语言配置信息、请求 访问的H5页面中的文案标识符、以及文案配置数据，确定与请求访问的H5页面相匹配的文案信息；文案配置数据中包括至少一个语言语种的语言资源包，语言资源包由文案标识符与相对应的文案信息构成；

接收并展示服务器依据与请求访问的H5页面相匹配的文案信息渲染的请求访问的H5 页面。

在发送H5页面访问请求之前，方法还包括以下生成包括有目标语言配置信息的H5页 面访问请求的过程：

客户端的APP向无线网关发送远程过程调用协议，远程过程调用协议携带有目标语言 配置信息，用于请求访问H5页面；

H5容器从无线网关中获取目标语言配置信息，并将目标语言配置信息设置到H5页面 访问请求的头域部分，从而向服务器侧发出的H5页面访问请求中将包括目标语言配置信 息。

采用本申请实施例提供的方法，前端无需存储多语言资源包，也无需针对多语言展示 问题进行更多设计，因此，前端的开发成本大幅度降低、开发效率提高，且客户端的APP 更易于维护，并可实现文案的实时更新。因此，这种渲染多语言H5页面的方案，能够满足 APP中的多语言展示需求。

本申请实施例还相对于H5页面多语言渲染方法，提供了对应的适用于服务器侧的装 置，参见图4所示，包括：

请求接收模块101，接收H5页面访问请求，H5页面访问请求中包括目标语言配置信息， 且请求访问的H5页面中包括文案标识符；

文案信息确定模块102，依据H5页面访问请求中的目标语言配置信息、请求访问的H5 页面中的文案标识符、以及文案配置数据，确定与请求访问的H5页面相匹配的文案信息； 文案配置数据中包括至少一个语言语种的语言资源包，语言资源包由文案标识符与相对应 的文案信息构成；

渲染模块103，依据与请求访问的H5页面相匹配的文案信息，渲染请求访问的H5页面。

本申请实施例还相对于H5页面多语言渲染方法，提供了对应的适用于客户端侧的装 置，包括：

请求发送模块，发送H5页面访问请求，H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符，用于供服务器依据H5页面访问请求中的目标语言配置信息、请求访问的H5页面中的文案标识符、以及文案配置数据，确定与请求访问的H5页面相匹配的文案信息；文案配置数据中包括至少一个语言语种的语言资源包，语言资源包由文案标识符与相对应的文案信息构成；

接收展示模块，接收并展示服务器依据与请求访问的H5页面相匹配的文案信息渲染的 请求访问的H5页面。

基于以上解决方案，本申请实施例实现了一套标准的在线H5，无需多套页面，前端不 用存储多语言资源包，服务端也不用写死在代码资源属性文件中，语言资源包采用远程文 案平台统一管理，更新多语言文案时可通过设置服务器侧的更新策略实现实时同步更新， 前端和服务端均不用发布。另外，前端也不用关心H5页面中的静态文案语言，一切均由服 务器端控制，在渲染前端H5页面时直接把目标语言对应的多语言文案信息给前端展示，从 而能够达到前端快速高效率开发、易维护、实时更新等目的，满足APP中的多语言展示需求。

下面以本申请实施例提供的多语言H5页面渲染方法及装置应用在移动终端APP中， 用于找回密码、修改密码、重置密码等业务为例，说明多语言H5页面的展示效果。

如图6-1所示，用户可以通过在客户端勾选语言设置信息并保存，将希望使用的语种信 息保存在客户端。目标语言配置信息体现用户所需的语言语种，可以是用户在使用客户端 APP时配置，也可以是客户端的APP在运行时自动从客户端所保存的语种信息中获取。

当客户端的APP向服务器发出访问H5页面的请求后，服务器将根据请求中所包括的 目标语言配置信息确定出相匹配的文案信息，并渲染到客户端展示，具体的确定过程和渲 染过程如以上实施例中所述，此处不再赘述。图6-2所示为用户选择英文页面后展示出的重 置登录密码的H5页面，图6-3所示为用户选择英文页面后展示出的用于确认如何重置支付 密码的H5页面，图6-4所示为用户选择英文页面后展示出的重置支付密码的H5页面。

以图6-2所示页面为例，在现有技术中，图6-2所示页面中显示出的文字均为静态文案， 需要在前端开发时写死。而在本申请实施例中，可以将文案均替换为文案标识符，例如， 将“back”所对应的文案替换为文案标识符key1，强“Recover Login Password”所对应的 文案替换为文案标识符key2，以此类推。

为了实现本申请实施例，在后台建立语言资源包中，在该页面所对应的APP的语种为 英语的语言资源包(Locale)中建立文案标识符key和文案信息message的对应关系，即：在语言资源包中，key1对应message1“back”，key2对应message2“Recover LoginPassword”， 依此类推。在渲染H5页面时，采用以Velocity模板实现的Bean2Velocity工具，将H5页面 中动态的文案标识符key替换为具体的文案信息message，展示到客户端，达到图6-2所示 的效果。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产 品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程 序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和 /或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程 和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程 序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以 产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于 实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装 置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式 工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置 的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方 框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机 或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他 可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方 框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络 接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非 易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技 术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计 算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、 电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储 器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储 或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按 照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数 据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包 含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所 述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因 此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形 式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储 介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说， 本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、 改进等，均应包含在本申请的权利要求范围之内。

Claims (22)

1.一种H5页面多语言渲染方法，包括：

接收H5页面访问请求，所述H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符；

依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包，所述语言资源包从远程文案平台获取得到；

依据与所述请求访问的H5页面相匹配的文案信息，渲染所述请求访问的H5页面。

2.根据权利要求1所述方法，所述方法应用于服务器，所述语言资源包由所述服务器从远程文案平台获取得到；

其中，接收H5页面访问请求，包括：

接收客户端发送的H5页面访问请求。

3.根据权利要求1所述方法，

所述语言资源包由文案标识符与相对应的文案信息构成，每一种语种对应至少一个语言资源包。

4.根据权利要求1所述方法，所述H5页面访问请求中还包括请求访问的H5页面的页面标识信息，所述目标语言配置信息包括目标语言的语种信息；

则依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息，包括：

依据所述目标语言的语种信息，确定与所述目标语言的语种信息相对应的第一语言资源包；

依据所述请求访问的H5页面的页面标识信息，确定请求访问的H5页面的第一文案标识符；

依据所述文案配置数据，将所述第一语言资源包中与所述第一文案标识符相对应的文案信息确定为与所述请求访问的H5页面相匹配的文案信息。

5.根据权利要求4所述方法，依据所述请求访问的H5页面的页面标识信息，确定请求访问的H5页面的第一文案标识符，包括：

依据所述请求访问的H5页面的页面标识信息，确定请求访问的H5页面；

采用Velocity模板获取所述请求访问的H5页面中构成动态文案的文案标识符，作为所述第一文案标识符。

6.根据权利要求4所述方法，依据与所述请求访问的H5页面相匹配的文案信息，渲染所述请求访问的H5页面，包括：

将所述第一文案标识符相对应的文案信息替换所述第一文案标识符，将所述第一文案标识符相对应的文案信息渲染和嵌入到前端的HTML5代码中，以完成对所述请求访问的H5页面的渲染。

7.根据权利要求1～6之任一所述方法，在接收H5页面访问请求之后，在确定与所述请求访问的H5页面相匹配的文案信息之前，所述方法还包括：

对所述H5页面访问请求进行解析，确定所述H5页面访问请求中的所述目标语言配置信息。

8.根据权利要求7所述方法，在接收H5页面访问请求之后，在对所述H5页面访问请求进行解析之前，所述方法还包括：

拦截所述H5页面访问请求，以便从所述H5页面访问请求中解析出所述目标语言配置信息。

9.根据权利要求8所述方法，在接收H5页面访问请求之后，在对所述H5页面访问请求进行解析之前，所述方法还包括：

依据所述H5页面访问请求中包括的请求访问的H5页面的页面标识信息，将所述H5页面访问请求分发至与所述页面标识信息相对应的业务页面视图。

10.根据权利要求7所述方法，在对所述H5页面访问请求进行解析，确定所述H5页面访问请求中的所述目标语言配置信息之后，所述方法还包括：

将所述目标语言配置信息存储在与所述H5页面访问请求相对应的线程追踪文件中；

则在确定与所述请求访问的H5页面相匹配的文案信息之前，所述方法还包括：

从所述线程追踪文件中提取所述H5页面访问请求中的所述目标语言配置信息，以便查找与所述请求访问的H5页面相匹配的文案信息。

11.根据权利要求1所述方法，还包括：

根据预设更新策略，将存储在远程文案平台的语言资源包拉取到本地存储；

将存储在本地的所述语言资源包加载到Java虚拟机的缓存中，形成所述文案配置数据。

12.根据权利要求11所述方法，将存储在远程文案平台的语言资源包拉取到本地存储，包括：

依据请求访问的H5页面所属的APP，确定存储在所述远程文案平台上与所述APP相对应的语言资源包；

将与所述APP相对应的语言资源包从所述远程文案平台拉取到所述本地存储。

13.根据权利要求12所述方法，所述语言资源包包括版本信息；

则将与所述APP相对应的语言资源包从所述远程文案平台拉取到所述本地存储，包括：

当本地已存储有所述语言资源包，比较所述远程文案平台与所述本地存储的语言资源包的版本信息；

若所述远程文案平台比所述本地存储的语言资源包的版本更新，则将所述远程文案平台中的语言资源包拉取到所述本地存储。

14.根据权利要求12或13所述方法，所述预设更新策略包括立即更新、定时更新或者周期更新。

15.根据权利要求1～6、8～13之任一所述方法，所述语言资源包以.properties属性配置文件的格式存储在本地。

16.根据权利要求1～6、8～13之任一所述方法，所述文案配置数据以数据结构MAP的格式存储在Java虚拟机的缓存中。

17.一种H5页面多语言渲染方法，包括：

发送H5页面访问请求，所述H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符，用于供所述服务器依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包，所述语言资源包从远程文案平台获取得到；

接收并展示所述服务器依据与所述请求访问的H5页面相匹配的文案信息渲染的所述请求访问的H5页面。

18.根据权利要求17所述方法，所述方法应用于客户端，所述语言资源包由所述服务器从远程文案平台获取得到；

其中，发送H5页面访问请求，包括：

向所述服务器发送H5页面访问请求。

19.根据权利要求17所述方法，

所述语言资源包由文案标识符与相对应的文案信息构成，每一种语种对应至少一个语言资源包。

20.根据权利要求17所述方法，在发送H5页面访问请求之前，所述方法还包括：

客户端的APP向无线网关发送远程过程调用协议，所述远程过程调用协议携带有所述目标语言配置信息，用于请求访问所述H5页面；

H5容器从所述无线网关中获取所述目标语言配置信息，并将所述目标语言配置信息设置到所述H5页面访问请求的头域部分。

21.一种H5页面多语言渲染装置，包括：

请求接收模块，接收H5页面访问请求，所述H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符；

文案信息确定模块，依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包，所述语言资源包从远程文案平台获取得到；

渲染模块，依据与所述请求访问的H5页面相匹配的文案信息，渲染所述请求访问的H5页面。

22.一种H5页面多语言渲染装置，包括：

请求发送模块，发送H5页面访问请求，所述H5页面访问请求中包括目标语言配置信息，且请求访问的H5页面中包括文案标识符，用于供所述服务器依据所述H5页面访问请求中的目标语言配置信息、所述请求访问的H5页面中的文案标识符、以及文案配置数据，确定与所述请求访问的H5页面相匹配的文案信息；所述文案配置数据中包括至少一个语言语种的语言资源包，所述语言资源包从远程文案平台获取得到；

接收展示模块，接收并展示所述服务器依据与所述请求访问的H5页面相匹配的文案信息渲染的所述请求访问的H5页面。

Images