CN111414158A - 跨平台开发方法、跨平台开发系统及电子设备 - Google Patents

Abstract

本发明实施例涉及一种跨平台开发方法、跨平台开发系统及其电子设备。所述跨平台开发方法包括：通过转换器，将Vue源码转换为JS包；在服务器中部署所述JS包；根据终端的请求，将所述JS包下发至所述终端；在所述终端中，由JS框架接收和执行所述JS包；由所述JS框架发送渲染指令至本地；通过在本地的渲染引擎进行渲染。其以web的开发体验构建高性能、高复用，可扩展的native应用。前端开发人员通过简单学习即可上手业务开发，并且使用一套编码即可在移动端Android、iOS和web端等多平台运行，开发成本大大降低，还提供了预加载、离线包，提高了性能、减少了版本迭代周期。

Description

跨平台开发方法、跨平台开发系统及电子设备

【技术领域】

本发明涉及电子信息技术领域，尤其涉及一种跨平台开发方法、跨平台开发系统及其电子设备。

【背景技术】

传统的本地(Native)开发存在开发成本高、版本迭代周期长、响应速度慢、人员配置多等的情况，很难跟上现阶段企业日益扩大的规模，满足企业的业务上需要迭代快速，上线快速，也需要多容器，多项目接入等的使用需求。例如，传统App的整包更新成本偏大，还需市场审核，周期较长，不利于App的快速迭代发展，而且在开发安卓、IOS和Web端等不同的平台的应用时，同一需求在原生开发下需要iOS端、Android端等不同的开发人员。

因此，迫切需要提供一种新的跨平台开发方式，以满足企业规模迅速扩展的需求。

【发明内容】

本发明实施例提供一种跨平台开发方法、跨平台开发系统及其电子设备，旨在解决现有开发方式所存在的一系列缺陷。

本发明实施例提供以下技术方案：一种跨平台开发方法。该方法包括：通过转换器，将Vue源码转换为JS包；在服务器中部署所述JS包；根据终端的请求，将所述JS包下发至所述终端；在所述终端中，由JS框架接收和执行所述JS包；由所述JS框架发送渲染指令至本地；通过在本地的渲染引擎进行渲染。

可选地，所述通过转换器将Vue源码转换为JS包，具体包括：将模板标签转换为类JSON的树状数据结构，转换数据绑定为返回数据的函数原型；将类型标签转换为类JSON的树状数据结构；结合模板标签和类型标签转换后的内容，以及脚本标签中的内容为一个JS异步模块规范模块。

可选地，所述由JS框架接收和执行所述JS包，具体包括：由JS框架提供每个所述JS包调用的define函数和bootstrap函数；执行define函数用以注册模块，并且执行bootstrap函数进行编译；发送对应的渲染指令至本地。

可选地，通过在本地的渲染引擎进行渲染，具体包括：由本地的渲染引擎提供与渲染指令对应的客户端组件及模块。

可选地，所述本地与JS框架之间通过呼叫本地和呼叫JS两个接口进行通信。

本发明另一实施例提供以下技术方案：一种跨平台开发系统。跨平台开发系统包括：

转换器，用于将Vue源码转换为JS包；服务器，用于部署所述JS包，并且根据终端的请求，将所述JS包下发至终端；JS框架，所述JS框架在所述终端中，用于接收和执行所述JS包，并发送对应的渲染指令；渲染引擎，所述渲染引擎用于执行所述渲染指令进行渲染。

可选地，还包括呼叫本地接口和呼叫JS接口，用于JS框架与本地之间的通信。

可选地，还包括若干个可复用的组件，所述可复用的组件包括：缓存、通讯录、文件、IM即时通讯、网络、推送、数据库。

本发明另一实施例提供以下技术方案：一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如上所述的跨平台开发方法。

与现有技术相比较，本发明实施例提供的跨平台开发方法以web的开发体验构建高性能、高复用，可扩展的native应用。前端开发人员通过简单学习即可上手业务开发，并且使用一套编码即可在移动端Android、iOS和web端等多平台运行，开发成本大大降低，还提供了预加载、离线包，提高了性能、减少了版本迭代周期。

进一步地，跨平台开发系统还可以提供丰富的组件(如缓存、通讯录、文件、IM即时通讯、网络、推送、数据库等)，实现了复用性，也降低了开发成本，让程序员更加专注业务需求上。

【附图说明】

一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。

图1为本发明实施例提供的跨平台开发方法的示意图；

图2为本发明实施例提供的跨平台开发的示意图；

图3a为本发明实施例提供的缓存组件的示意图；

图3b为本发明实施例提供的通讯录组件的示意图；

图3c为本发明实施例提供的文件组件的示意图；

图3d为本发明实施例提供的IM即时通讯组件的示意图；

图3e为本发明实施例提供的网络组件的示意图；

图3f为本发明实施例提供的推送组件的示意图；

图3g为本发明实施例提供的数据库组件的示意图；

图4为本发明实施例提供的电子设备的示意图。

【具体实施方式】

为了便于理解本发明，下面结合附图和具体实施例，对本发明进行更详细的说明。需要说明的是，当元件被表述“固定于”另一个元件，它可以直接在另一个元件上、或者其间可以存在一个或多个居中的元件。当一个元件被表述“连接”另一个元件，它可以是直接连接到另一个元件、或者其间可以存在一个或多个居中的元件。本说明书所使用的术语“上”、“下”、“内”、“外”、“底部”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”“第三”等仅用于描述目的，而不能理解为指示或暗示相对重要性。

除非另有定义，本说明书所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本说明书中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是用于限制本发明。本说明书所使用的术语“和/或”包括一个或多个相关的所列项目的任意的和所有的组合。

此外，下面所描述的本发明不同实施例中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

图1为本发明实施例提供的跨平台开发方法的示意图。如图1所示，所述方法包括：

110：通过转换器，将Vue源码转换为JS包。

亦即将后缀名为.vue，由＜template＞、＜style＞和＜script＞等标签组织好的内容，通过transformer(转换器)转换成JS Bundle(JS包)。

具体的，Vue源码的转换过程可以包括：

首先，将模板标签＜template＞转换为类JSON的树状数据结构，转换数据绑定为返回数据的函数原型，并且将类型标签＜style＞转换为类JSON的树状数据结构。

然后，将模板标签＜template＞转换后的内容、类型标签＜style＞转换后的内容以及脚本标签＜script＞中的内容结合为一个JavaScript AMD模块(JS异步模块规范模块)。

120：在服务器中部署所述JS包。

130：根据终端的请求，将所述JS包下发至所述终端。

该终端可以是Web端、iOS端或Android端等多种不同的平台。在接收到终端的请求以后，JS Bundle即可下发给终端。

140：在所述终端中，由JS框架接收和执行所述JS包。

JS框架(JS Framework)接收和执行所述JS包，并且执行数据绑定，模板编译等的操作，然后输出JSON格式的Virtual DOM。

JS Framework在初始化阶段被原生JavaScript引擎运行。其可以提供被每个JSBundle调用的define函数和bootstrap函数。当JS Bundle从服务器下载后，这些函数就会执行.define函数以注册模块；bootstrap函数会编译主要的模块为Virtual DOM，并发送渲染指令给Native。

由此，同样的一份JSON数据，便可以在不同平台的渲染引擎中能够渲染成不同版本的UI，实现跨平台。在实例运行期间，Native和JS之间的相互调用的循环往复的调用会从Tesla实例初始化持续到销毁。

150：由所述JS框架发送渲染指令至本地(Native)。

具体的，所述本地(Native)与JS框架(JS Framework)之间通过呼叫本地(callNative)和呼叫JS(call JS)两个接口进行通信。

其中，call Native是一个由native代码实现的函数，它被JS代码调用并向native发送指令，例如rendering，networking，autho rizing和其他客户端侧的toast等API。callJS是一个由JS实现的函数，它用于Native向JS发送指令。这些指令由用户交互和Native的回调函数组成。

160：通过在本地的渲染引擎进行渲染。

具体的，客户端组件(Component)及模块(Module)均由本地的渲染引擎提供。其中，组件是指在屏幕内可见，有特定行为，能被配置不同的属性和样式，能响应用户交互。常见的组件包括＜div＞、＜text＞、＜image＞等。

而模块是指一组能被JS Framework调用的API。当然，其中的一些能以异步的方式调用JS Framework，例如：发送HTTP请求。

在一些实施例中，完整的渲染流程包括如下步骤：

1)由Native发起，通过JsBridge传给V8引擎，处理后回传指令到Native

2)DOM相关的操作使用TSLDomHandler切换到DOM线程操作

3)layoutNodeImpl是核心测量过程解析FlexBox布局，计算DOM的位置信息并存储

4)TSLRenderHandler将后续工作线程切换到RenderThread也就是UI线程

5)由Component创建具体的view

6)setLayout实际上是将位置信息转换为原生view识别的params

7)addEvents添加事件

8)bindData设置style及赋值。

本发明实施例还提供了一种跨平台开发系统。图2为本发明实施例提供的跨平台开发系统的架构示意图。如图2所示，跨平台开发系统包括：转换器21，服务器22以及JS框架23等。

转换器21用于将Vue源码转换为JS包。服务器22用于部署所述JS包，并且根据终端的请求，将所述JS包下发至终端。JS框架23所述JS框架在所述终端中，用于接收和执行所述JS包，并发送对应的渲染指令。渲染引擎(如JS Core/V8)用于执行所述渲染指令进行渲染。

请参阅图2，该跨平台开发系统还包括：呼叫本地接口31和呼叫JS接口32，用于JS框架与本地(Native)之间的通信。

在另一些实施例中，还进一步的拓展了若干个可复用的组件。所述可复用的组件包括：缓存、通讯录、文件、IM即时通讯、网络、推送、数据库。以下结合附图详细描述各个不同的组件。

图3a为本发明实施例提供的缓存组件的示意图。缓存组件能够将后台接口请求的数据保存到移动端、web端，便于业务处理。如图3a所示，其包括如下功能：

1)保存数据setStorage(Object)

将后台请求的接口数据存储到本地缓存中，比如登录后个人基本信息

2)获取数据getStorage(Object)

从本地缓存中获取数据，从而减少服务器请求压力

3)判断本地缓存中是否存在数据containStorage(Object)

可以用于业务场景的判断

3)删除本地缓存中的数据removeStorage(Object)

从本地缓存中删除指定数据

4)清空缓存clearStorage(Object)

用户主动删除本地缓存或程序定时清理一些缓存数据已达到节约空间的目的。

图3b为本发明实施例提供的通讯录组件的示意图。如图3b所示，其包括如下功能：

1)打电话makePhoneCall(Object)

根据需求提供拨号打电话功能

2)发短信sendSMS(Object)

根据需求提供发送短信功能

3)新建联系人createConstact(Object)

在移动设备上新建联系人

4)将号码添加到已有联系人

在移动设备上将号码添加到已有联系人中

5)选择联系人pickContact(Object)

在移动设备上选择联系人

6)编辑联系人editContact(Object)

在移动设备上编辑联系人

图3c为本发明实施例提供的文件组件的示意图。文件组件用于在移动设备上操作文件(夹)。如图3c所示，其包括如下功能：

1)保存文件saveFile

将文件保存到设备中指定路径

2)获取文件的信息getFileInfo

获取设备中文件的信息，包含文件大小、文件摘要、文件保存时间

3)获取文件列表getSaveFileList

获取设备中已保存的文件列表，包含文件大小、文件路径、文件保存时间

4)获取本地文件信息getSavedFileInfo

获取设备中已保存的文件信息，包含文件大小、文件路径、文件摘要

5)删除本地文件removeSavedFile

删除设备中已保存的文件(夹)

6)新开页面文档OpenDocument

在新页面中打开文档，文件支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx等。

图3d为本发明实施例提供的IM即时通讯组件的示意图。IM即时通讯组件结合需求场景、可以在移动设备中语音视频，应用于医院中可以实现患者和医生之间的交流，在家即可咨询，问诊，复查，减轻了医生的工作量，也节省了患者的时间成本。如图3d所示，其包括如下功能：

1)IM初始化initIM

IM初始化配置、传入业务方sdkAppId、传入业务方accountType

2)IM初始化后登录loginIM

初始化成功之后才可以登录，否则匹配不上后台接口数据

3)IM登录监听onUserOffLine

ILiveMemStatusListener：监听房间成员状态变化，比如房间成员是否发语音，是否发视频

TIMMessageListener：监听消息回调通知

4)IM退出登录logoutIM

在患者或医生退出登录或者切换账号的时候，需要退出IM，否则下次再登录时就报错

5)同步会话列表asyncConversationList

患者或医生切换账号、更换新设备时，需要同步会话列表，包括系统消息、单聊消息、群组消息

6)获取某人消息记录getMessageList

获取跟患者或医生的消息记录

7)发送消息sendMessage

在单聊或群组中发送消息

8)删除会话deleteConversation

删除与患者(医生)或某个群组的会话记录

图3e为本发明实施例提供的网络组件的示意图。如图3e所示，其包括如下功能：

1)请求网络request

向服务器发送post/get请求

2)上传文件uploadFile

向服务器上传文件

3)下载资源downloadFile

从服务器获取资源，包含图片、文件

4)中断网络请求

中断正在请求的网络，比如下载中的教学视频。

图3f为本发明实施例提供的网络组件的示意图。推送组件可以用于健康资讯推送、患者咨询消息推送、医生解答推送等相关医疗信息的推送。如图3f所示，其包括如下功能：

1)推送设备注册register

根据设备的tokenID注册到推送平台(个推/信鸽)

2)推送设备注销注册

从推送平台中注销设备

3)推送绑定账号bindAccount

绑定推送账号到后台服务器，以便后台发送推送时能够准确的推送到对应的设备中

4)注销绑定账号deleteAccount

从服务器中注销绑定的账号

5)获取token getToken

从设备中获取tokenID。

图3g为本发明实施例提供的数据库组件的示意图。数据库组件可以根据业务场景，实现本地化存储，提高运行效率，减少服务器的请求压力。(场景包括科室、医生、历史咨询、健康资讯等)。如图3g所示，其包括如下功能：

1)执行数据库语句execSQL

执行js代码中的sql语句

2)执行查询rawQuery

查询本地数据

3)新建表create

创建新的表结构

4)插入数据insert

插入数据到本地

5)删除数据delete

删除本地数据

6)更新数据update

更新本地数据。

综上所述，本发明实施例提供的跨平台开发系统具有学习成本低，开发成本低以及快速修复线上bug的优点。

现有的web前端开发人员查看相关文档后即可开发需求，前端开发人员无需了解或者熟悉iOS与Android开发。而且，原来需要iOS与Android开发各一名，现在一名web开发者即可，从代码的可复用性来说，即一份代码多端运行。另外，原有方式修复线上bug后需提交AppStore审核，而本发明实施例提供的方式可以通过下载更新包的方式修复

图4示出了本发明电子设备实施例的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。

如图4所示，该电子设备可以包括：处理器(processor)402、通信接口(Communications Interface)404、存储器(memory)406、以及通信总线408。

其中，处理器402、通信接口404以及存储器406通过通信总线408完成相互间的通信。通信接口404用于与其它设备比如客户端或其它服务器等的网元通信。处理器402用于执行程序410。

具体地，程序410可以包括程序代码，该程序代码包括计算机操作指令。处理器402可能是中央处理器CPU，或者是特定集成电路ASIC(Application Specific IntegratedCircuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。

存储器406用于存放程序410。存储器406可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。程序410具体可以用于使得处理器402执行如上所述的跨平台开发方法的步骤。

在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；在本发明的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本发明的不同方面的许多其它变化，为了简明，它们没有在细节中提供；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (9)

1.一种跨平台开发方法，其特征在于，包括：

通过转换器，将Vue源码转换为JS包；

在服务器中部署所述JS包；

根据终端的请求，将所述JS包下发至所述终端；

在所述终端中，由JS框架接收和执行所述JS包；

由所述JS框架发送渲染指令至本地；

通过在本地的渲染引擎进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述通过转换器，将Vue源码转换为JS包，具体包括：

将模板标签转换为类JSON的树状数据结构，转换数据绑定为返回数据的函数原型；

将类型标签转换为类JSON的树状数据结构；

结合模板标签和类型标签转换后的内容，以及脚本标签中的内容为一个JS异步模块规范模块。

3.根据权利要求1所述的方法，其特征在于，所述由JS框架接收和执行所述JS包，具体包括：

由JS框架提供每个所述JS包调用的define函数和bootstrap函数；

执行define函数用以注册模块，并且执行bootstrap函数进行编译；

发送对应的渲染指令至本地。

4.根据权利要求1所述的方法，其特征在于，通过在本地的渲染引擎进行渲染，具体包括：

由本地的渲染引擎提供与渲染指令对应的客户端组件及模块。

5.根据权利要求1所述的方法，其特征在于，所述本地与JS框架之间通过呼叫本地和呼叫JS两个接口进行通信。

6.一种跨平台开发系统，其特征在于，包括：

转换器，用于将Vue源码转换为JS包；

服务器，用于部署所述JS包，并且根据终端的请求，将所述JS包下发至终端；

JS框架，所述JS框架在所述终端中，用于接收和执行所述JS包，并发送对应的渲染指令；

渲染引擎，所述渲染引擎用于执行所述渲染指令进行渲染。

7.根据权利要求6所述的系统，其特征在于，还包括呼叫本地接口和呼叫JS接口，用于JS框架与本地之间的通信。

8.根据权利要求6所述的系统，其特征在于，还包括若干个可复用的组件，所述可复用的组件包括：缓存、通讯录、文件、IM即时通讯、网络、推送、数据库。

9.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-5任一项所述的跨平台开发方法。

Images