一种跨移动终端的UI控件的生成方法及装置.pdf

《一种跨移动终端的UI控件的生成方法及装置.pdf》由会员分享，可在线阅读，更多相关《一种跨移动终端的UI控件的生成方法及装置.pdf（16页珍藏版）》请在专利查询网上搜索。

1、(10)申请公布号 CN 103677839 A (43)申请公布日 2014.03.26 CN 103677839 A (21)申请号 201310695692.1 (22)申请日 2013.12.17 G06F 9/44(2006.01) (71)申请人 深圳市迈桥科技有限公司 地址 518067 广东省深圳市南山区深南大道 10128 号南山区软件园西塔楼 2901、 2902、 2910 (72)发明人 施东荣 陈文浩 张岩 林建平 廖炳才 王付国 (74)专利代理机构 北京联瑞联丰知识产权代理 事务所 ( 普通合伙 ) 11411 代理人 黄冠华 (54) 发明名称 一种跨移动终端的。

2、 UI 控件的生成方法及装 置 (57) 摘要 本发明提出了一种跨移动终端的 UI 控件的 生成方法， 包括如下步骤 ： 将不同的移动操作系 统所对应的开源 js 引擎封装成具有统一 API 接 口的适配层 ； 对所述适配层进行初始化 ； 对 js 执 行环境进行初始化 ； 使用所述开源 js 引擎将所述 API 接口对应的 js 对象注入到所述 js 执行环境 中， 并将js函数与移动操作系统本地UI创建函数 进行绑定 ； 在所述 js 执行环境中调用 UI 创建接 口函数， 找到相应的本地 UI 创建函数并调用 ； 将 所述UI控件绘制在所述移动终端的显示屏上。 本 发明还涉及一种实现上述。

3、方法的装置。实施本发 明的跨移动终端的 UI 控件的生成方法及装置， 具 有以下有益效果 ： 开发难度较小、 开发成本较低、 开发周期较短。 (51)Int.Cl. 权利要求书 2 页 说明书 7 页 附图 6 页 (19)中华人民共和国国家知识产权局 (12)发明专利申请 权利要求书2页 说明书7页 附图6页 (10)申请公布号 CN 103677839 A CN 103677839 A 1/2 页 2 1. 一种跨移动终端的 UI 控件的生成方法， 其特征在于， 包括如下步骤 ： A） 将不同的移动操作系统所对应的开源 js 引擎封装成具有统一 API 接口的适配层 ； B） 对所述适配层。

4、进行初始化 ； C） 对 js 执行环境进行初始化 ； D） 使用所述开源 js 引擎将所述 API 接口对应的 js 对象注入到所述 js 执行环境中， 并 将 js 函数与移动操作系统本地 UI 创建函数进行绑定 ； E） 在所述 js 执行环境中调用 UI 创建接口函数， 找到相应的本地 UI 创建函数并调用 ； F） 将所述 UI 控件绘制在所述移动终端的显示屏上。 2. 根据权利要求 1 所述的跨移动终端的 UI 控件的生成方， 其特征在于， 所述步骤 E） 进 一步包括 ： E1） js 应用执行 js 代码， 调用 js 注入对象的成员函数 ； E2） 所述适配层找到所述成员函数。

5、所对应的本地 UI 创建函数 ； E2） 执行所述本地 UI 创建函数。 3. 根据权利要求 2 所述的跨移动终端的 UI 控件的生成方法， 其特征在于， 所述步骤 F） 进一步包括 ： F1） 通过测量确定 UI 控件的大小 ； F2） 根据控件参数对所述 UI 控件的位置进行布局 ； F3） 调用所述 API 接口将所述 UI 控件绘制在所述移动终端的显示屏上。 4. 根据权利要求 1 所述的跨移动终端的 UI 控件的生成方法， 其特征在于， 在所述步骤 F） 之后还包括 ： G1） 触发刷新所述 UI 控件的操作 ； G2） 判断是否重新进行测量， 如是， 重新计算每个 UI 控件的大小。

6、并执行步骤 G3） ； 否则， 执行步骤 G3） ； G3） 判断是否重新进行布局， 如是， 重新对所述每个 UI 控件的位置进行布局并执行步 骤 G4） ； 否则， 执行步骤 G4） ； G4） 判断是否重新绘制所述 UI 控件， 如是， 重新绘制所述 UI 控件 ； 否则， 不执行任何操 作。 5. 根据权利要求 1 至 4 任意一项所述的跨移动终端的 UI 控件的生成方法， 其特征在 于， 还包括 UI 原生控件事件的交互流程， 所述交互流程包括 ： H1） 本地将 UI 原生控件事件的名称和回调的 js 函数保存起来 ； H2） UI 原生控件事件被触发， 找到对应的 js 函数 ； 。

7、H3） 通过适配层的开源 js 引擎将所述 js 函数回调到所述 js 执行环境中。 6. 一种实现如权利要求 1 所述的跨移动终端的 UI 控件的生成方法的装置， 其特征在 于， 包括 ： 封装单元 ： 用于将不同的移动操作系统所对应的开源js引擎封装成具有统一API接口 的适配层 ； 适配层初始化单元 ： 用于对所述适配层进行初始化 ； 执行环境初始化单元 ： 用于对 js 执行环境进行初始化 ； 对象注入绑定单元 ： 用于使用所述开源 js 引擎将所述 API 接口对应的 js 对象注入到 权 利 要 求 书 CN 103677839 A 2 2/2 页 3 所述 js 执行环境中， 并。

8、将 js 函数与移动操作系统本地 UI 创建函数进行绑定 ； 接口函数调用单元 ： 用于在所述js执行环境中调用UI创建接口函数， 找到相应的本地 UI 创建函数并调用 ； 控件绘制单元 ： 用于将所述 UI 控件绘制在所述移动终端的显示屏上。 7. 根据权利要求 6 所述的跨移动终端的 UI 控件的生成方法的装置， 其特征在于， 所述 接口函数调用单元进一步包括 ： 代码执行调用模块 ： 用于调用 js 应用执行 js 代码， 调用 js 注入对象的成员函数 ； UI 创建函数获取模块 ： 用于使所述适配层找到所述成员函数所对应的本地 UI 创建函 数 ； UI 创建函数执行模块 ： 用于执。

9、行所述本地 UI 创建函数。 8. 根据权利要求 7 所述的跨移动终端的 UI 控件的生成方法的装置， 其特征在于， 所述 控件绘制单元进一步包括 ： 测量模块 ： 用于通过测量确定 UI 控件的大小 ； 布局模块 ： 用于根据控件参数对所述 UI 控件的位置进行布局 ； 调用绘制模块 ： 用于调用所述 API 接口将所述 UI 控件绘制在所述移动终端的显示屏 上。 9. 根据权利要求 6 所述的跨移动终端的 UI 控件的生成方法的装置， 其特征在于， 还包 括刷新单元， 所述刷新单元进一步包括 ： 触发模块 ： 用于触发刷新所述 UI 控件的操作 ； 测量判断模块 ： 用于判断是否重新进行测。

10、量， 如是， 重新计算每个 UI 控件的大小 ； 布局判断模块 ： 用于判断是否重新进行布局， 如是， 重新对所述每个 UI 控件的位置进 行布局 ； 绘制判断模块 ： 用于判断是否重新绘制所述 UI 控件， 如是， 重新绘制所述 UI 控件 ； 否 则， 不执行任何操作。 10. 根据权利要求 6 至 9 任意一项所述的跨移动终端的 UI 控件的生成方法的装置， 其 特征在于， 还包括交互单元， 所述交互单元进一步包括 ： 存储模块 ： 用于使本地将 UI 原生控件事件的名称和回调的 js 函数保存起来 ； 控件事件触发模块 ： 用于在 UI 原生控件事件被触发时， 找到对应的 js 函数 。

11、； 回调模块 ： 用于通过适配层的开源 js 引擎将所述 js 函数回调到所述 js 执行环境中。 权 利 要 求 书 CN 103677839 A 3 1/7 页 4 一种跨移动终端的 UI 控件的生成方法及装置 技术领域 0001 本发明涉及用户界面开发领域， 特别涉及一种跨移动终端的 UI 控件的生成方法 及装置。 背景技术 0002 UI(User Interface， 用户界面 ) 是操作系统与用户直接交互的图形界面 , 当前 的主流的移动操作系统有苹果的 iOS, Google 的 Android 以及微软公司的 windowMobile 等。这些图形界面在不同的移动平台操作系统中。

12、的表现形式和风格都有差异。由于系统底 层机制的不同， 想要在不同的移动操作平台上获得表现样式和交互方式的一致的控件， 就 必须对多个移动操作平台做相应的微调适配， 以达到形式的统一。图 1 为应用开发者通过 特定的编程语言在具体的移动操作系统上开发用户界面的时序图。 0003 现有技术中， 由于不同操作系统提供的编程语言有差异， 应用开发者想要做到图 形交互界面适应各种移动操作系统， 必须精通相应的编程语言以及系统提供的各种图形界 面编程接口， 增加了开发的难度。 此外， 图形交互界面的风格在不同移动操作系统中存在较 大的差异， 想做到统一需要做大量的适配、 调整工作， 其开发成本较高， 同时。

13、开发周期也较 长。 发明内容 0004 本发明要解决的技术问题在于， 针对现有技术的上述开发难度较大、 开发成本较 高、 开发周期较长的缺陷， 提供一种开发难度较小、 开发成本较低、 开发周期较短的跨移动 终端的 UI 控件的生成方法及装置。 0005 本发明解决其技术问题所采用的技术方案是 ： 构造一种跨移动终端的 UI 控件的 生成方法， 包括如下步骤 ： A） 将不同的移动操作系统所对应的开源 js 引擎封装成具有统一 API 接口的适配层 ； B） 对所述适配层进行初始化 ； C） 对 js 执行环境进行初始化 ； D） 使用所述开源 js 引擎将所述 API 接口对应的 js 对象注。

14、入到所述 js 执行环境中， 并 将 js 函数与移动操作系统本地 UI 创建函数进行绑定 ； E） 在所述 js 执行环境中调用 UI 创建接口函数， 找到相应的本地 UI 创建函数并调用 ； F） 将所述 UI 控件绘制在所述移动终端的显示屏上。 0006 在本发明所述的跨移动终端的 UI 控件的生成方法中， 所述步骤 E） 进一步包括 ： E1） js 应用执行 js 代码， 调用 js 注入对象的成员函数 ； E2） 所述适配层找到所述成员函数所对应的本地 UI 创建函数 ； E2） 执行所述本地 UI 创建函数。 0007 在本发明所述的跨移动终端的 UI 控件的生成方法中， 所述步。

15、骤 F） 进一步包括 ： F1） 通过测量确定 UI 控件的大小 ； 说 明 书 CN 103677839 A 4 2/7 页 5 F2） 根据控件参数对所述 UI 控件的位置进行布局 ； F3） 调用所述 API 接口将所述 UI 控件绘制在所述移动终端的显示屏上。 0008 在本发明所述的跨移动终端的 UI 控件的生成方法中， 在所述步骤 F） 之后还包括 ： G1） 触发刷新所述 UI 控件的操作 ； G2） 判断是否重新进行测量， 如是， 重新计算每个 UI 控件的大小并执行步骤 G3） ； 否则， 执行步骤 G3） ； G3） 判断是否重新进行布局， 如是， 重新对所述每个 UI 控。

16、件的位置进行布局并执行步 骤 G4） ； 否则， 执行步骤 G4） ； G4） 判断是否重新绘制所述 UI 控件， 如是， 重新绘制所述 UI 控件 ； 否则， 不执行任何操 作。 0009 在本发明所述的跨移动终端的 UI 控件的生成方法中， 还包括 UI 原生控件事件的 交互流程， 所述交互流程包括 ： H1） 本地将 UI 原生控件事件的名称和回调的 js 函数保存起来 ； H2） UI 原生控件事件被触发， 找到对应的 js 函数 ； H3） 通过适配层的开源 js 引擎将所述 js 函数回调到所述 js 执行环境中。 0010 本发明还涉及一种实现上述跨移动终端的 UI 控件的生成方。

17、法的装置包括 ： 封装单元 ： 用于将不同的移动操作系统所对应的开源js引擎封装成具有统一API接口 的适配层 ； 适配层初始化单元 ： 用于对所述适配层进行初始化 ； 执行环境初始化单元 ： 用于对 js 执行环境进行初始化 ； 对象注入绑定单元 ： 用于使用所述开源 js 引擎将所述 API 接口对应的 js 对象注入到 所述 js 执行环境中， 并将 js 函数与移动操作系统本地 UI 创建函数进行绑定 ； 接口函数调用单元 ： 用于在所述js执行环境中调用UI创建接口函数， 找到相应的本地 UI 创建函数并调用 ； 控件绘制单元 ： 用于将所述 UI 控件绘制在所述移动终端的显示屏上。。

18、 0011 在本发明所述的实现上述跨移动终端的 UI 控件的生成方法的装置中， 所述接口 函数调用单元进一步包括 ： 代码执行调用模块 ： 用于调用 js 应用执行 js 代码， 调用 js 注入对象的成员函数 ； UI 创建函数获取模块 ： 用于使所述适配层找到所述成员函数所对应的本地 UI 创建函 数 ； UI 创建函数执行模块 ： 用于执行所述本地 UI 创建函数。 0012 在本发明所述的实现上述跨移动终端的 UI 控件的生成方法的装置中， 所述控件 绘制单元进一步包括 ： 测量模块 ： 用于通过测量确定 UI 控件的大小 ； 布局模块 ： 用于根据控件参数对所述 UI 控件的位置进行。

19、布局 ； 调用绘制模块 ： 用于调用所述 API 接口将所述 UI 控件绘制在所述移动终端的显示屏 上。 0013 在本发明所述的实现上述跨移动终端的 UI 控件的生成方法的装置中， 还包括刷 新单元， 所述刷新单元进一步包括 ： 说 明 书 CN 103677839 A 5 3/7 页 6 触发模块 ： 用于触发刷新所述 UI 控件的操作 ； 测量判断模块 ： 用于判断是否重新进行测量， 如是， 重新计算每个 UI 控件的大小 ； 布局判断模块 ： 用于判断是否重新进行布局， 如是， 重新对所述每个 UI 控件的位置进 行布局 ； 绘制判断模块 ： 用于判断是否重新绘制所述 UI 控件， 如。

20、是， 重新绘制所述 UI 控件 ； 否 则， 不执行任何操作。 0014 在本发明所述的实现上述跨移动终端的 UI 控件的生成方法的装置中， 还包括交 互单元， 所述交互单元进一步包括 ： 存储模块 ： 用于使本地将 UI 原生控件事件的名称和回调的 js 函数保存起来 ； 控件事件触发模块 ： 用于在 UI 原生控件事件被触发时， 找到对应的 js 函数 ； 回调模块 ： 用于通过适配层的开源 js 引擎将所述 js 函数回调到所述 js 执行环境中。 0015 实施本发明的跨移动终端的UI控件的生成方法及装置， 具有以下有益效果:由于 通过将不同的移动操作系统所对应的开源js引擎封装成具有。

21、统一API接口的适配层 ； 对适 配层和 js 执行环境初始化后， 使用开源 js 引擎将 API 接口对应的 js 对象注入到 js 执行 环境中， 并将 js 函数与移动操作系统本地 UI 创建函数进行绑定 ； 在 js 执行环境中调用 UI 创建接口函数， 找到相应的本地UI创建函数并调用， 最后将UI控件绘制在移动终端的显示 屏上， 这样通过在多种移动操作系统中提供统一的适配层， 适配层提供完整统一的 JS 语言 编程接口， 应用开发者只需要了解 JS 语言、 属性以及适配层提供的 UI 创建接口函数 , 即可 在移动终端上呈现风格统一、 交互方式一致的图形交互界面元素， 其只需要一次。

22、开发， 所以 其开发难度较小、 开发成本较低、 开发周期较短。 附图说明 0016 为了更清楚地说明本发明实施例或现有技术中的技术方案， 下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍， 显而易见地， 下面描述中的附图仅仅是本 发明的一些实施例， 对于本领域普通技术人员来讲， 在不付出创造性劳动性的前提下， 还可 以根据这些附图获得其他的附图。 0017 图 1 为现有技术中应用开发者通过特定的编程语言在具体的移动操作系统上开 发用户界面的时序图 ； 图 2 为本发明跨移动终端的 UI 控件的生成方法及装置一个实施例中生成方法的流程 图 ； 图3为所述实施例中将不同的移动操作系统。

23、所对应的开源js引擎封装成具有统一API 接口的适配层的示意图 ； 图 4 为所述实施例中在 js 应用调用适配层创建 UI 控件的时序图 ； 图 5 为所述实施例中在 js 执行环境中调用 UI 创建接口函数， 找到相应的本地 UI 创建 函数并调用的具体流程图 ； 图 6 为所述实施例中将 UI 控件绘制在移动终端的显示屏上的具体流程图 ； 图 7 为所述实施例中判断 UI 控件绘制是否刷新的具体流程图 ； 图 8 为所述实施例中 UI 控件事件交互的流程图 ； 图 9 是所述实施例中 UI 控件事件交互的示意图 ； 说 明 书 CN 103677839 A 6 4/7 页 7 图 10 。

24、是所述实施例中装置的结构示意图。 具体实施方式 0018 下面将结合本发明实施例中的附图， 对本发明实施例中的技术方案进行清楚、 完 整地描述， 显然， 所描述的实施例仅仅是本发明一部分实施例， 而不是全部的实施例。基于 本发明中的实施例， 本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他 实施例， 都属于本发明保护的范围。 0019 在本发明跨移动终端的 UI 控件的生成方法及装置实施例中， 其跨移动终端的 UI 控件的生成方法的流程图如图 2 所示。图 2 中， 该生成方法包括 ： 步骤 S01 将不同的移动操作系统所对应的开源 js 引擎封装成具有统一 API 接口的适 配层。

25、 ： 本步骤中， 将不同的移动操作系统所对应的开源 js 引擎封装成具有统一 API 接口的 适配层。具体地， 在不同的移动操作平台上， 选择一个效率较高的开源 js 引擎， 再用移动操 作系统提供的原生开发代码， 对开源js引擎做相应的封装， 提供给js应用开发者一套完整 的 UI 控件创建、 销毁、 更改属性、 添加交互事件监听等等。适配层根据不同的移动操作系统 之间的差异， 选择的开源 js 引擎 （js 语言解释引擎） 也有所差异。在 iOS 上， 采用的是苹果 公司自助研发的 javaScriptCoreJS 解释引擎 ； 在 Android 系统上， 采用的是 mozilla 公司。

26、 的 Rhino 引擎， 不过由于 Android 平台的特殊性 ( 开发语言非纯 java 语言 )， 所以 Rhino 引 擎的执行方式采用了解释形语法， 执行 js 语言的效率很低， 所以在 Android 平台上同时使 用了 Rhino 和 v8 两种 js 语言解释引擎， V8 是 google 提供的开源 js 引擎， 这种引擎的 js 语言执行速度非常快 步骤 S02 对适配层进行初始化 ： 本步骤中， 对适配层进行初始化， js 应用的运行依托 于适配层 , 在运行任何 js 代码之前， 要先进行适配层程序的初始化。 0020 步骤 S03 对 js 执行环境进行初始化 ： 本。

27、步骤中， 对 js 执行环境进行初始化。由 适配层完成对 js 执行环境的初始化， 并将其作为应用 js 代码的执行环境。 0021 步骤 S04 使用开源 js 引擎将 API 接口对应的 js 对象注入到 js 执行环境中， 并将 js 函数与移动操作系统本地 UI 创建函数进行绑定 ： 本步骤中， 使用开源 js 引擎将 API 接 口对应的 js 对象注入到 js 执行环境中， 并将 js 函数和移动操作系统本地 UI 创建函数进 行绑定。 0022 步骤 S05 在 js 执行环境中调用 UI 创建接口函数， 找到相应的本地 UI 创建函数并 调用 ： 本步骤中， 本步骤中， 在 j。

28、s 执行环境中调用 UI 创建接口函数， 找到相应的本地 UI 创 建函数， 并调用该本地 UI 创建函数。 0023 步骤S06将UI控件绘制在移动终端的显示屏上 ： 本步骤中， 将UI控件绘制在移动 终端的显示屏上。这样通过在多种移动操作系统中提供统一的适配层， 适配层提供完整统 一的 js 语言编程接口， 应用开发者只需要了解 js 语言、 属性以及适配层提供的 UI 创建接 口函数， 即可在移动终端上呈现风格统一、 交互方式一致的图形交互界面元素， 其只需要一 次开发， 所以其开发难度较小、 开发成本较低、 开发周期较短。 0024 图 3 是本实施例中将不同的移动操作系统所对应的开源。

29、 js 引擎封装成具有统一 API 接口的适配层的示意图， 不同的移动操作系统采用对应的开源 js 引擎 （js 语言解释引 擎） ， 在各种移动操作平台上利用相应的本地原生代码打包成 js 适配层， 该 js 适配层提供 说 明 书 CN 103677839 A 7 5/7 页 8 统一的 js 开发 API 接口， js 应用通过调用 js 适配层 （本实施例中简称为适配层） 提供的统 一的创建 UI 控件的接口， 在多种移动操作系统上得到风格统一、 交互方式一直的 UI 控件。 0025 图 4 为本实施例中在 js 应用调用适配层创建 UI 控件的时序图。 0026 对于本实施例而言，。

30、 上述步骤 S05 还可进一步细化， 其细化后的流程图如图 5 所 示。图 5 中， 上述步骤 S05 进一步包括 ： 步骤 S51 js 应用执行 js 代码， 调用 js 注入对象的成员函数 ： 本步骤中， js 应用执行 js 代码， 调用 js 注入对象的成员函数。 0027 步骤 S52 适配层找到成员函数所对应的本地 UI 创建函数 ： 本步骤中， 适配层找到 上述成员函数所对应的本地 UI 创建函数。 0028 步骤 S53 执行本地 UI 创建函数 ： 本步骤中， 在找到本地 UI 创建函数后， 执行本地 UI 创建函数。 0029 本实施例中， UI 控件在适配层被抽象为包装。

31、类， 是所有控件的基类， 其内部声明了 控件所支持的全部属性和样式， 内部包含一个原生控件对象的句柄， 实际的操作都是针对 这个原生对象的操作。与大部分 GUI( 图形界面 ) 操作系统一样， 同时引入了容器的概念。 容器派生自包装类， 具备所有包装类特性的同时 , 还支持添加、 移除子元素功能。 0030 对于本实施例而言， 上述步骤 S06 还可进一步细化， 其细化后的流程图如图 6 所 示。图 6 中， 上述步骤 S06 进一步包括 ： 步骤 S61 通过测量确定 UI 控件的大小 ： 本步骤中， 通过测量确定 UI 控件的大小。具体 来讲， 本步骤就是通过对所有 UI 控件提供的实际或。

32、相对尺寸来确定 UI 控件实际可用空间 的过程。 此过程是一个递归过程， 子控件根据父容器所提供的最大能够显示的区域， 结合自 身的宽高设置， 得到最佳的大小， 并将这个结果保留为布局的依据。 如果子控件本身也是一 个容器， 那么将会做同样的逻辑并继续向上传递直到递归层的尽头。 0031 步骤 S62 根据控件参数对 UI 控件的位置进行布局 ： 本步骤中， 根据控件参数对 UI 控件的位置进行布局。本步骤实际是根据 UI 控件设定的各种属性， 进行实际位置的调整过 程。在 UI 控件确定了大小之后， 要根据对齐方式 (align)、 边界距离 (margin) 等参数来确 定最终的布局位置。。

33、 0032 步骤S63 调用API接口将UI控件绘制在移动终端的显示屏上 ： 本步骤中， 当UI控 件的大小、 位置都确定后， 调用 API 接口将 UI 控件绘制在移动终端的显示屏上。这样绘制 出来的 UI 控件在不同的移动操作系统上会呈现的风格统一， 其交互方式也是一致的。 0033 在本实施例的一些情况下， 有时会进行 UI 控件的刷新。这时， 在步骤 S06 之后还 包括如下步骤 ： 步骤 S71 触发刷新 UI 控件的操作 ： 本步骤中， 触发刷新 UI 控件的操作。 0034 步骤 S72 判断是否重新进行测量 ： 本步骤中， 判断是否重新进行测量， 如果判断的 结果为是， 则执行。

34、步骤 S73 ； 否则， 执行步骤 S74。 0035 步骤 S73 重新计算每个 UI 控件的大小 ： 本步骤中， 重新计算每个 UI 控件的大小。 执行完本步骤， 执行步骤 S74。 0036 步骤 S74 判断是否重新进行布局 ： 本步骤中， 判断是否重新进行布局， 如果判断的 结果为是， 则执行步骤 S75 ； 否则， 执行步骤 S76。 0037 步骤 S75 重新对每个 UI 控件的位置进行布局 ： 本步骤中， 重新对每个 UI 控件的 说 明 书 CN 103677839 A 8 6/7 页 9 位置进行布。执行完本步骤， 执行步骤 S76。 0038 步骤 S76 判断是否重新。

35、绘制 UI 控件 ： 本步骤中， 判断是否重新绘制 UI 控件， 如果 判断的结果为是， 则执行步骤 S77 ； 否则， 执行步骤 S78。 0039 步骤 S77 重新绘制 UI 控件 ： 本步骤中， 重新绘制 UI 控件。 0040 步骤 S78 不执行任何操作 ： 本步骤中， 不执行任何操作。 0041 在本实施例中， 该生成方法还包括 UI 原生控件事件的交互流程， 交互流程图如图 8 所示。图 8 中， 该交互流程包括如下步骤 ： 步骤 S81 本地将 UI 原生控件事件的名称和回调的 js 函数保存起来 ： 本步骤中， 通过 初始化注入的方法， 本地将 UI 原生控件事件的名称和回。

36、调的 js 函数保存起来。 0042 步骤 S82 UI 原生控件事件被触发， 找到对应的 js 函数 ： 本步骤中， UI 原生控件事 件被触发， 找到对应的 js 函数。 0043 步骤 S83 通过适配层的开源 js 引擎将 js 函数回调到 js 环境中 ： 通过适配层的 开源 js 引擎将 js 函数回调到 js 执行环境中。 0044 图 9 是本实施例中 UI 控件事件交互的示意图。 0045 本实施例还涉及一种实现上述跨移动终端的 UI 控件的生成方法的装置， 器结构 示意图如图 10 所示。图 10 中， 该装置包括封装单元 1、 适配层初始化单元 2、 执行环境初始 化单元。

37、3、 对象注入绑定单元4、 接口函数调用单元5和控件绘制单元6 ； 其中， 封装单元1用 于将不同的移动操作系统所对应的开源js引擎封装成具有统一API接口的适配层 ； 适配层 初始化单元2用于对适配层进行初始化 ； 执行环境初始化单元3用于对js执行环境进行初 始化 ； 对象注入绑定单元 4 用于使用开源 js 引擎将 API 接口对应的 js 对象注入到 js 执行 环境中， 并将js函数与移动操作系统本地UI创建函数进行绑定 ； 接口函数调用单元5用于 在 js 执行环境中调用 UI 创建接口函数， 找到相应的本地 UI 创建函数并调用 ； 控件绘制单 元 6 用于将 UI 控件绘制在移。

38、动终端的显示屏上。 0046 本实施例中， 接口函数调用单元 5 进一步包括代码执行调用模块 51、 UI 创建函数 获取模块 52 和 UI 创建函数执行模块 53 ； 其中， 代码执行调用模块 51 用于调用 js 应用执 行 js 代码， 调用 js 注入对象的成员函数 ； UI 创建函数获取模块 52 用于使适配层找到成员 函数所对应的本地 UI 创建函数 ； UI 创建函数执行模块 53 用于执行本地 UI 创建函数。控 件绘制单元 6 进一步包括测量模块 61、 布局模块 62 和调用绘制模块 63 ； 其中， 测量模块 61 用于通过测量确定UI控件的大小 ； 布局模块62用于根。

39、据控件参数对UI控件的位置进行布 局 ； 调用绘制模块 63 用于调用 API 接口将 UI 控件绘制在移动终端的显示屏上。 0047 本实施例中， 该装置还包括刷新单元 7 和交互单元 8 ； 其中， 刷新单元 7 进一步包 括触发模块 71、 测量判断模块 72、 布局判断模块 73 和绘制判断模块 74 ； 其中， 触发模块 71 用于触发刷新 UI 控件的操作 ； 测量判断模块 72 用于判断是否重新进行测量， 如是， 重新计 算每个 UI 控件的大小 ； 布局判断模块 73 用于判断是否重新进行布局， 如是， 重新对每个 UI 控件的位置进行布局 ； 绘制判断模块 74 用于判断是否。

40、重新绘制 UI 控件， 如是， 重新绘制 UI 控件 ； 否则， 不执行任何操作。 交互单元8进一步包括存储模块81、 控件事件触发模块82和 回调模块 83 ； 其中， 存储模块 81 用于使本地将 UI 原生控件事件的名称和回调的 js 函数保 存起来 ； 控件事件触发模块82用于在UI原生控件事件被触发时， 找到对应的js函数 ； 回调 模块 83 用于通过适配层的开源 js 引擎将 js 函数回调到 js 环境中。 说 明 书 CN 103677839 A 9 7/7 页 10 0048 总之， 在本实施例中， 在不同的操作平台， 提供一套完整的适配层， 通过 js 适配层 完成js函。

41、数和移动操作系统本地API的映射， 创建本地原生控件并展示给用户。 js是通用 的 web 开发语言， 通过 js 语言在不同移动系统平台开发统一的编程接口， 可以让 web 程序 员在不了解移动平台开发 API 的情况下， 也可以开发原生应用， 降低开发难度。通过 js 适 配层和统一的 js 编程接口， 一套代码或一次编程可以适配多种移动操作系统， 做到了跨平 台的统一性。 0049 以上所述仅为本发明的较佳实施例而已， 并不用以限制本发明， 凡在本发明的精 神和原则之内， 所作的任何修改、 等同替换、 改进等， 均应包含在本发明的保护范围之内。 说 明 书 CN 103677839 A 10 1/6 页 11 图 1 图 2 说 明 书 附 图 CN 103677839 A 11 2/6 页 12 图 3 图 4 说 明 书 附 图 CN 103677839 A 12 3/6 页 13 图 5 图 6 说 明 书 附 图 CN 103677839 A 13 4/6 页 14 图 7 说 明 书 附 图 CN 103677839 A 14 5/6 页 15 图 8 图 9 说 明 书 附 图 CN 103677839 A 15 6/6 页 16 图 10 说 明 书 附 图 CN 103677839 A 16 。