CN109240673A - 一种基于react-native的视图动态加载更新方法及系统 - Google Patents
一种基于react-native的视图动态加载更新方法及系统 Download PDFInfo
- Publication number
- CN109240673A CN109240673A CN201810876362.5A CN201810876362A CN109240673A CN 109240673 A CN109240673 A CN 109240673A CN 201810876362 A CN201810876362 A CN 201810876362A CN 109240673 A CN109240673 A CN 109240673A
- Authority
- CN
- China
- Prior art keywords
- template
- code
- view
- javascript
- react
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种基于react‑native的视图动态加载更新方法及系统，模板服务端获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，得到通用视图模板；模板服务端接收并保持通用视图模板和模板标识；本发明通过将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，以得到通用视图模板，通用视图模板和其对应的模板标识保存在模板服务端内，客户端通过模板标识去请求模板服务端内的视图模板代码，以实现实时动态加载代码，由于视图模板代码存储于模板服务端，可以有效的减少应用安装包的大小。
Description
技术领域
本发明涉及计算机领域，特别涉及一种基于react-native的视图动态加载更新方法及系统。
背景技术
react-native是一个开源的跨平台开发框架，用于开发移动应用(Android、iOS应用)。它使用React语法编码，能够做到一份代码，多平台运行。同时，框架还支持热更新，应用无需安装新版本应用，只需要下载新版本react-native代码包，便可使用到新版本的内容，很大程度上节省了开发与运营人员的工作。基于以上优点，react-native正被广泛地使用。
在移动应用程序的页面中往往存在相似的视图，它们具有相似的布局和数据结构。为了便于开发与维护，开发者将这部分视图抽象为通用的视图模板，提供给不同的页面复用，最后打包到应用内发布。当通用视图模板需要调整并发布了新版本，依赖通用视图模板的应用为了更新模板也需要发布新版本，通常使用全量更新或热更新。用户需要重新安装应用或等待热更新完成后，才能够使用新版本内容。
通用视图模板虽然在代码层面上做了抽象复用，但应用对接使用时并不友好。缺点在于：
1.通用视图模板发布后无法立刻更新到用户运行的页面上。为了让用户更新到新视图，应用也必须发布新版本，增大了应用开发与运营的成本。同时，用户必须下载安装新版本或等待热更新，对用户造成不好的体验。
2.随着通用视图模板的不断添加，模板自身的包大小也在不断变大，直接影响到应用的安装包大小，消耗用户的数据流量与等待时间。
发明内容
本发明所要解决的技术问题是：提供一种基于react-native的视图动态加载更新方法及系统，以减少应用安装包的大小。
为了解决上述技术问题，本发明采用的一种技术方案为：
一种基于react-native的视图动态加载更新方法，包括步骤：
S1、模板服务端获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于所述JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、模板服务端接收所述通用视图模板的模板标识，保存所述通用视图模板和模板标识。
为了解决上述技术问题，本发明采用的另一种技术方案为：
一种基于react-native的视图动态加载更新系统，包括模板服务端，所述模板服务端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，其特征在于，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S1、获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于所述JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、接收所述通用视图模板的模板标识，保存所述通用视图模板和模板标识。
本发明的有益效果在于：模板服务端将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，以得到通用视图模板，通用视图模板和其对应的模板标识保存在模板服务端内，客户端通过模板标识去请求模板服务端内的视图模板代码，以实现实时动态加载代码，由于视图模板代码存储于模板服务端，可以有效的减少应用安装包的大小。
附图说明
图1为本发明实施例的一种基于react-native的视图动态加载更新方法的流程示意图；
图2为本发明实施例涉及的检查视图模板版本更新的流程示意图；
图3为本发明实施例的一种基于react-native的视图动态加载更新系统的结构示意图。
标号说明：
1、一种基于react-native的视图动态加载更新系统；2、模板服务端；3、第一处理器；4、第一存储器；5、客户端；6、第二处理器；7、第二存储器。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
本发明最关键的构思在于：通过将初始视图模板的React模板代码转换为JavaScript模板代码，将包括JavaScript模板代码的通用视图模板和其对应的模板标识保存在模板服务端内，供客户端实时动态加载。
在此之前，为了便于理解本发明的技术方案，对于本发明中涉及的英文缩写、设备等进行说明如下：
(1)、react-native：见背景技术。
(2)、JavaScript：它是一种直译式脚本语言，支持应用运行实时动态加载。
请参照图1以及图2，一种基于react-native的视图动态加载更新方法，包括步骤：
S1、模板服务端获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于所述JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、模板服务端接收所述通用视图模板的模板标识，保存所述通用视图模板和模板标识。
从上述描述可知，本发明的有益效果在于：模板服务端将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，以得到通用视图模板，通用视图模板和其对应的模板标识保存在模板服务端内，客户端通过模板标识去请求模板服务端内的视图模板代码，以实现实时动态加载代码，由于视图模板代码存储于模板服务端，可以有效的减少应用安装包的大小。
进一步地，所述步骤S2之后还包括以下步骤：
S3.1、客户端接收请求第一视图的视图请求信息，获取所述第一视图的第一模板标识，发送包括所述第一模板标识的第一模板代码请求信息至模板服务端；
S3.2、模板服务端接收所述第一模板代码请求信息，判断是否存在与所述第一模板标识相对应的第一JavaScript模板代码，若存在，则返回所述第一JavaScript模板代码至客户端；
S3.3、客户端接收模板服务端发送的第一JavaScript模板代码，获取在所述第一视图上显示的第一数据参数，生成并显示所述第一视图。
由上述描述可知，提供了一种客户端获取视图模板代码的实施方式，以实现减少应用安装包大小的技术效果。
进一步地，所述步骤S2之后还包括以下步骤：
S4.1、客户端获取第二视图的本地模板版本号以及第二模板标识，将所述本地模板版本号以及第二模板标识发送至模板服务端；
S4.2、模板服务端接收所述本地模板版本号以及第二模板标识，根据所述本地模板版本号以及第二模板标识判断所述第二视图是否需要模板更新，返回模板更新信息至客户端，所述模板更新信息若需要更新，则生成并返回更新第二视图模板信息至客户端，若不需要更新，则生成并返回不更新第二视图模板信息至客户端；
S4.3、客户端接收模板服务端发送的模板更新信，若所述模板更新信息为更新第二视图模板信息，则生成并发送包括所述第二模板标识的第二模板代码请求信息至模板服务端，若所述模板更新信息为不更新第二视图模板信息，则使用本地JavaScript模板代码；
S4.4、模板服务端接收所述第二模板代码请求信息，判断是否存在与所述第二模板标识相对应的第二JavaScript模板代码，若存在，则返回所述第二JavaScript模板代码至客户端；
S4.5、客户端接收所述第二JavaScript模板代码，更新本地JavaScript模板代码为所述第二JavaScript模板代码。
由上述描述可知，客户端具有检查视图模板版本更新的功能，在模板服务端发布新的视图模板时，客户端在检查到视图模板需要更新时，获取在模板服务端内最新的模板代码即可，开发商无需发布新版本，用户也无需下载安装新版本的软件，从而节省了软件更新的开发和运营成本，提升了用户体验。
进一步地，所述步骤S4.1之前还包括步骤：
S4.0、客户端判断软件内是否存在本地JavaScript模板代码，若存在，则执行步骤S4.1，若不存在，则获取第二模板标识，发送包括所述第二模板标识的第二模板代码请求信息至模板服务端，之后执行步骤S4.4。
由上述描述可知，若当前软件中没有相应的本地JavaScript模板代码，则直接向模板服务端请求获取最新的视图模板代码。
进一步地，所述步骤S1中将初始视图模板的React模板代码转换为JavaScript模板代码具体为：通过Babel编译器将初始视图模板的React模板代码转换为JavaScript模板代码。
由上述描述可知，Babel编译器用于代码转换的技术较为成熟，使用较为广泛，有利于整个程序的稳定运行。
请参照图3，一种基于react-native的视图动态加载更新系统，包括模板服务端，所述模板服务端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S1、获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于所述JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、接收所述通用视图模板的模板标识，保存所述通用视图模板和模板标识。
从上述描述可知，本发明的有益效果在于：模板服务端将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，以得到通用视图模板，通用视图模板和其对应的模板标识保存在模板服务端内，客户端通过模板标识去请求模板服务端内的视图模板代码，以实现实时动态加载代码，由于视图模板代码存储于模板服务端，可以有效的减少应用安装包的大小。
进一步地，还包括客户端，所述客户端包括第二存储器、第二处理器及存储在第二存储器上并可在第二处理器上运行的第二计算机程序，所述步骤S2之后，所述第二处理器执行所述第二计算机程序时实现以下步骤：
S3.1、接收请求第一视图的视图请求信息，获取所述第一视图的第一模板标识，发送包括所述第一模板标识的第一模板代码请求信息至模板服务端；
S3.3、接收模板服务端发送的第一JavaScript模板代码，获取在所述第一视图上显示的第一数据参数，生成并显示所述第一视图；
所述步骤S2之后，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S3.2、接收所述第一模板代码请求信息，判断是否存在与所述第一模板标识相对应的第一JavaScript模板代码，若存在，则返回所述第一JavaScript模板代码至客户端。
由上述描述可知，提供了一种客户端获取视图模板代码的实施方式，以实现减少应用安装包大小的技术效果。
进一步地，所述步骤S2之后，所述第二处理器执行所述第二计算机程序时实现以下步骤：
S4.1、获取第二视图的本地模板版本号以及第二模板标识，将所述本地模板版本号以及第二模板标识发送至模板服务端；
S4.3、接收模板服务端发送的模板更新信，若所述模板更新信息为更新第二视图模板信息，则生成并发送包括所述第二模板标识的第二模板代码请求信息至模板服务端，若所述模板更新信息为不更新第二视图模板信息，则使用本地JavaScript模板代码；
S4.5、接收所述第二JavaScript模板代码，更新本地JavaScript模板代码为所述第二JavaScript模板代码；
所述步骤S2之后，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S4.2、接收所述本地模板版本号以及第二模板标识，根据所述本地模板版本号以及第二模板标识判断所述第二视图是否需要模板更新，返回模板更新信息至客户端，所述模板更新信息若需要更新，则生成并返回更新第二视图模板信息至客户端，若不需要更新，则生成并返回不更新第二视图模板信息至客户端；
S4.4、接收所述第二模板代码请求信息，判断是否存在与所述第二模板标识相对应的第二JavaScript模板代码，若存在，则返回所述第二JavaScript模板代码至客户端。
由上述描述可知，客户端具有检查视图模板版本更新的功能，在模板服务端发布新的视图模板时，客户端在检查到视图模板需要更新时，获取在模板服务端内最新的模板代码即可，开发商无需发布新版本，用户也无需下载安装新版本的软件，从而节省了软件更新的开发和运营成本，提升了用户体验。
进一步地，所述步骤S4.1之前，所述第二处理器执行所述第二计算机程序时实现以下步骤：
S4.0、判断软件内是否存在本地JavaScript模板代码，若存在，则执行步骤S4.1，若不存在，则获取第二模板标识，发送包括所述第二模板标识的第二模板代码请求信息至模板服务端。
由上述描述可知，若当前软件中没有相应的本地JavaScript模板代码，则直接向模板服务端请求获取最新的视图模板代码。
进一步地，所述步骤S1中将初始视图模板的React模板代码转换为JavaScript模板代码具体为：通过Babel编译器将初始视图模板的React模板代码转换为JavaScript模板代码。
由上述描述可知，Babel编译器用于代码转换的技术较为成熟，使用较为广泛，有利于整个程序的稳定运行。
请参照图1以及图2，本发明的实施例一为：
一种基于react-native的视图动态加载更新方法，包括步骤：
S1、模板服务端获取由React语法编写的初始视图模板，通过Babel编译器将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、模板服务端接收通用视图模板的模板标识，保存通用视图模板和模板标识。
开发者在模板服务端添加视图模板后，在客户端显示第一视图的步骤为：
S3.1、客户端接收请求第一视图的视图请求信息，获取第一视图的第一模板标识，发送包括第一模板标识的第一模板代码请求信息至模板服务端；
S3.2、模板服务端接收第一模板代码请求信息，判断是否存在与第一模板标识相对应的第一JavaScript模板代码，若存在，则返回第一JavaScript模板代码至客户端；
S3.3、客户端接收第一JavaScript模板代码，获取在第一视图上显示的第一数据参数，生成并显示第一视图。
开发者在模板服务端添加视图模板后，客户端进行视图模板版本更新的步骤为：
S4.0、客户端判断软件内是否存在本地JavaScript模板代码，若存在，则执行步骤S4.1，若不存在，则获取第二模板标识，发送包括第二模板标识的第二模板代码请求信息至模板服务端，之后执行步骤S4.4；
S4.1、客户端获取第二视图的本地模板版本号以及第二模板标识，将本地模板版本号以及第二模板标识发送至模板服务端；
S4.2、模板服务端接收本地模板版本号以及第二模板标识，根据本地模板版本号以及第二模板标识判断第二视图是否需要模板更新，返回模板更新信息至客户端，模板更新信息若需要更新，则生成并返回更新第二视图模板信息至客户端，若不需要更新，则生成并返回不更新第二视图模板信息至客户端；
S4.3、客户端接收模板更新信息，若模板更新信息为更新第二视图模板信息，则生成并发送包括第二模板标识的第二模板代码请求信息至模板服务端，若模板更新信息为不更新第二视图模板信息，则使用本地JavaScript模板代码；
S4.4、模板服务端接收第二模板代码请求信息，判断是否存在与第二模板标识相对应的第二JavaScript模板代码，若存在，则返回第二JavaScript模板代码至客户端；
S4.5、客户端接收第二JavaScript模板代码，更新本地JavaScript模板代码为第二JavaScript模板代码。
请参照图1以及图2，本发明的实施例二为：
一种基于react-native的视图动态加载更新系统1，包括模板服务端2以及客户端5，模板服务端2包括第一存储器4、第一处理器3及存储在第一存储器4上并可在第一处理器3上运行的第一计算机程序，第一处理器3执行第一计算机程序时实现上述实施例一中的步骤S1、步骤S2、步骤S3.2、步骤S3.4、步骤S4.2以及步骤S4.4；客户端5包括第二存储器7、第二处理器6及存储在第二存储器7上并可在第二处理器6上运行的第二计算机程序，第二处理器6执行第二计算机程序时实现上述实施例一中的步骤S3.1、步骤S3.3、步骤S4.0、步骤S4.1、步骤S4.3以及步骤S4.5。
对于本实施例来说，模板服务端2包括模板开发人员所在的开发端以及视图模板服务器，视图模板服务器可以实现的功能包括视图模板添加、版本更新和查询功能。
其中视图模板添加与版本更新执行的即为上述实施例一中的步骤S2，只是版本更新时，新的JavaScript模板代码会替换旧的JavaScript模板代码。视图模板服务器对外开放两个接口，分别是与客户端5配合使用的视图模板版本更新检测和与开发端配合使用的获取模板代码接口。
模板开发人员在开发端上设置有一个模板代码转换工具，模板开发人员在开发端完成React语法编写的初始视图模板，通过模板代码转换工具进行代码转化的过程为上述实施例一中的步骤S1，具体的过程进一步描述如下：内部通过Babel编译器提供的命令转换React语法编写的模板代码，输出JavaScript语法的模板代码。再对JavaScript模板代码追加修饰代码，之后将应用传递给模板代码的数据模型赋值给模板代码，由模板代码读取并显示，从而支持视图模板管理工具绑定数据模型并在模板视图中显示。最终输出可以被视图模板管理工具使用的模板代码。
在上述中，Babel编译器提供的命令为：babel sourcefile--out-file outfile，饰代码选用：var render＝function render(model){return_react2.default.createElement(％s,model)}；render；)。
模板开发人员在开发端上的后台界面输入模板标识、模板名称以及当前版本号，通过获取模板代码接口，上传视图模板代码至视图模板服务器。
客户端5上设置有一个视图模板管理工具，以组件的形式提供应用使用。功能包括检查视图模板版本更新、获取视图模板代码、根据模板标识与数据参数渲染模板视图与内容。其中检查视图模板版本更新即为执行步骤S4.0、步骤S4.1、步骤S4.3以及步骤S4.5，此时视图模板服务器要配合执行步骤S4.2以及步骤S4.4。其中获取视图模板代码即为执行步骤S3.1、步骤S3.3，此时视图模板服务器要配合执行步骤S3.2、步骤S3.4。
对于版本更新来说，若遇到模板服务器的视图模板版本更新，视图模板管理工具在渲染视图之前，优先展示默认视图，再向模板服务器发起请求检测版本更新并获取新的模板代码。获取到新的模板代码后，立刻刷新页面中的视图模板。
若软件为一个信息服务类应用，比如今日头条，该应用需要以不同的视图效果展示多种类型的内容，并且内容视图的类型会经常更新。
1.针对每种类型的内容开发通用视图模板，使用模板代码转换工具生成新的视图模板代码，即为步骤S1；
2.将生成的视图模板代码更新到模板服务器，即为步骤S2；
3.今日头条应用开发时依赖视图模板管理工具，通过管理工具加载内容视图，即为执行步骤S3.1、步骤S3.2以及步骤S3.3。
4.今日头条应用v1.0版本发布后，用户安装并使用。
5.内容的类型有更新，需要添加一种新的内容视图。此时针对新的内容视图开发新的视图模板，并生成新的视图模板代码，更新到模板服务器。已经安装今日头条v1.0版本的用户打开页面后可立即看到新的内容视图，即为执行步骤步骤S4.1至步骤S4.5。
若今日头条应用需要显示数十种不同表现形式的视图类型，并且对应用安装包大小有上限要求，希望不断增加的视图类型不会影响安装包的大小。
1.针对每种类型的内容开发通用视图模板，使用模板代码转换工具生成新的视图模板代码，即为步骤S1；
2.将生成的视图模板代码更新到模板服务器，即为步骤S2；
3.今日头条应用开发时依赖视图模板管理工具，通过管理工具加载内容视图，即为执行步骤S3.1、步骤S3.2以及步骤S3.3。
4.新版本需要新增二十种内容视图，此时针对新的内容视图开发新的视图模板，并生成新的视图模板代码，更新到模板服务器。应用立即支持新的内容视图，无需更新，安装包大小保持不变，即为执行步骤S4.1至步骤S4.5。
综上所述，本发明提供的一种基于react-native的视图动态加载更新方法及系统。模板服务端将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于JavaScript模板代码编写的初始视图模板，以得到通用视图模板，通用视图模板和其对应的模板标识保存在模板服务端内，客户端通过模板标识去请求模板服务端内的视图模板代码，以实现实时动态加载代码，由于视图模板代码存储于模板服务端，可以有效的减少应用安装包的大小；客户端在模板服务端发布新的视图模板时，客户端在检查到视图模板需要更新时，获取在模板服务端内最新的模板代码即可，开发商无需发布新版本，用户也无需下载安装新版本的软件，从而节省了软件更新的开发和运营成本，提升了用户体验。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种基于react-native的视图动态加载更新方法，其特征在于，包括步骤：
S1、模板服务端获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于所述JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、模板服务端接收所述通用视图模板的模板标识，保存所述通用视图模板和模板标识。
2.根据权利要求1所述的一种基于react-native的视图动态加载更新方法，其特征在于，所述步骤S2之后还包括以下步骤：
S3.1、客户端接收请求第一视图的视图请求信息，获取所述第一视图的第一模板标识，发送包括所述第一模板标识的第一模板代码请求信息至模板服务端；
S3.2、模板服务端接收所述第一模板代码请求信息，判断是否存在与所述第一模板标识相对应的第一JavaScript模板代码，若存在，则返回所述第一JavaScript模板代码至客户端；
S3.3、客户端接收模板服务端发送的第一JavaScript模板代码，获取在所述第一视图上显示的第一数据参数，生成并显示所述第一视图。
3.根据权利要求1所述的一种基于react-native的视图动态加载更新方法，其特征在于，所述步骤S2之后还包括以下步骤：
S4.1、客户端获取第二视图的本地模板版本号以及第二模板标识，将所述本地模板版本号以及第二模板标识发送至模板服务端；
S4.2、模板服务端接收所述本地模板版本号以及第二模板标识，根据所述本地模板版本号以及第二模板标识判断所述第二视图是否需要模板更新，返回模板更新信息至客户端，所述模板更新信息若需要更新，则生成并返回更新第二视图模板信息至客户端，若不需要更新，则生成并返回不更新第二视图模板信息至客户端；
S4.3、客户端接收模板服务端发送的模板更新信，若所述模板更新信息为更新第二视图模板信息，则生成并发送包括所述第二模板标识的第二模板代码请求信息至模板服务端，若所述模板更新信息为不更新第二视图模板信息，则使用本地JavaScript模板代码；
S4.4、模板服务端接收所述第二模板代码请求信息，判断是否存在与所述第二模板标识相对应的第二JavaScript模板代码，若存在，则返回所述第二JavaScript模板代码至客户端；
S4.5、客户端接收所述第二JavaScript模板代码，更新本地JavaScript模板代码为所述第二JavaScript模板代码。
4.根据权利要求3所述的一种基于react-native的视图动态加载更新方法，其特征在于，所述步骤S4.1之前还包括步骤：
S4.0、客户端判断软件内是否存在本地JavaScript模板代码，若存在，则执行步骤S4.1，若不存在，则获取第二模板标识，发送包括所述第二模板标识的第二模板代码请求信息至模板服务端，之后执行步骤S4.4。
5.根据权利要求1所述的一种基于react-native的视图动态加载更新方法，其特征在于，所述步骤S1中将初始视图模板的React模板代码转换为JavaScript模板代码具体为：通过Babel编译器将初始视图模板的React模板代码转换为JavaScript模板代码。
6.一种基于react-native的视图动态加载更新系统，包括模板服务端，所述模板服务端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，其特征在于，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S1、获取由React语法编写的初始视图模板，将初始视图模板的React模板代码转换为JavaScript模板代码，将软件的数据模型赋值于所述JavaScript模板代码编写的初始视图模板，得到通用视图模板；
S2、接收所述通用视图模板的模板标识，保存所述通用视图模板和模板标识。
7.根据权利要求6所述的一种基于react-native的视图动态加载更新系统，其特征在于，还包括客户端，所述客户端包括第二存储器、第二处理器及存储在第二存储器上并可在第二处理器上运行的第二计算机程序，所述步骤S2之后，所述第二处理器执行所述第二计算机程序时实现以下步骤：
S3.1、接收请求第一视图的视图请求信息，获取所述第一视图的第一模板标识，发送包括所述第一模板标识的第一模板代码请求信息至模板服务端；
S3.3、接收模板服务端发送的第一JavaScript模板代码，获取在所述第一视图上显示的第一数据参数，生成并显示所述第一视图；
所述步骤S2之后，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S3.2、接收所述第一模板代码请求信息，判断是否存在与所述第一模板标识相对应的第一JavaScript模板代码，若存在，则返回所述第一JavaScript模板代码至客户端。
8.根据权利要求6所述的一种基于react-native的视图动态加载更新系统，其特征在于，所述步骤S2之后，所述第二处理器执行所述第二计算机程序时实现以下步骤：
S4.1、获取第二视图的本地模板版本号以及第二模板标识，将所述本地模板版本号以及第二模板标识发送至模板服务端；
S4.3、接收模板服务端发送的模板更新信，若所述模板更新信息为更新第二视图模板信息，则生成并发送包括所述第二模板标识的第二模板代码请求信息至模板服务端，若所述模板更新信息为不更新第二视图模板信息，则使用本地JavaScript模板代码；
S4.5、接收所述第二JavaScript模板代码，更新本地JavaScript模板代码为所述第二JavaScript模板代码；
所述步骤S2之后，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S4.2、接收所述本地模板版本号以及第二模板标识，根据所述本地模板版本号以及第二模板标识判断所述第二视图是否需要模板更新，返回模板更新信息至客户端，所述模板更新信息若需要更新，则生成并返回更新第二视图模板信息至客户端，若不需要更新，则生成并返回不更新第二视图模板信息至客户端；
S4.4、接收所述第二模板代码请求信息，判断是否存在与所述第二模板标识相对应的第二JavaScript模板代码，若存在，则返回所述第二JavaScript模板代码至客户端。
9.根据权利要求8所述的一种基于react-native的视图动态加载更新系统，其特征在于，所述步骤S4.1之前，所述第二处理器执行所述第二计算机程序时实现以下步骤：
S4.0、判断软件内是否存在本地JavaScript模板代码，若存在，则执行步骤S4.1，若不存在，则获取第二模板标识，发送包括所述第二模板标识的第二模板代码请求信息至模板服务端。
10.根据权利要求6所述的一种基于react-native的视图动态加载更新系统，其特征在于，所述步骤S1中将初始视图模板的React模板代码转换为JavaScript模板代码具体为：通过Babel编译器将初始视图模板的React模板代码转换为JavaScript模板代码。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810876362.5A CN109240673B (zh) | 2018-08-03 | 2018-08-03 | 一种基于react-native的视图动态加载更新方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810876362.5A CN109240673B (zh) | 2018-08-03 | 2018-08-03 | 一种基于react-native的视图动态加载更新方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109240673A true CN109240673A (zh) | 2019-01-18 |
| CN109240673B CN109240673B (zh) | 2021-11-05 |
Family
ID=65070141
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810876362.5A Active CN109240673B (zh) | 2018-08-03 | 2018-08-03 | 一种基于react-native的视图动态加载更新方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109240673B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109992248A (zh) * | 2019-02-25 | 2019-07-09 | 百度在线网络技术（北京）有限公司 | 语音应用的实现方法、装置、设备及计算机可读存储介质 |
| CN111090442A (zh) * | 2019-11-11 | 2020-05-01 | 腾讯音乐娱乐科技（深圳）有限公司 | 一种应用更新方法、装置和存储介质 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030050995A1 (en) * | 2001-09-13 | 2003-03-13 | International Business Machines Corporation | Method and system for delivering dynamic information in a network |
| US20130212487A1 (en) * | 2012-01-09 | 2013-08-15 | Visa International Service Association | Dynamic Page Content and Layouts Apparatuses, Methods and Systems |
| CN106126249A (zh) * | 2016-06-29 | 2016-11-16 | 武汉斗鱼网络科技有限公司 | 一种在前端实现行为、数据、视图联动的方法及系统 |
| US20170034306A1 (en) * | 2015-07-30 | 2017-02-02 | Nasdaq, Inc. | Software application architecture |
| CN106557348A (zh) * | 2016-11-25 | 2017-04-05 | 百度在线网络技术（北京）有限公司 | 视图展示方法和装置 |
| CN107368294A (zh) * | 2017-05-25 | 2017-11-21 | 阿里巴巴集团控股有限公司 | 应用原型生成方法、模板训练方法、装置及系统 |
| CN107391169A (zh) * | 2017-06-09 | 2017-11-24 | 口碑控股有限公司 | 安卓页面的动态更新方法和装置 |
| CN107632826A (zh) * | 2016-07-14 | 2018-01-26 | 腾讯科技（深圳）有限公司 | 一种源代码的编译方法和客户端 |
| CN108021614A (zh) * | 2017-08-18 | 2018-05-11 | 口碑(上海)信息技术有限公司 | 一种用于页面动态加载的方法及系统 |
| CN108089878A (zh) * | 2017-12-14 | 2018-05-29 | 腾讯科技（深圳）有限公司 | 页面信息展现和生成方法、装置及系统 |
-
2018
- 2018-08-03 CN CN201810876362.5A patent/CN109240673B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030050995A1 (en) * | 2001-09-13 | 2003-03-13 | International Business Machines Corporation | Method and system for delivering dynamic information in a network |
| US20130212487A1 (en) * | 2012-01-09 | 2013-08-15 | Visa International Service Association | Dynamic Page Content and Layouts Apparatuses, Methods and Systems |
| US20170034306A1 (en) * | 2015-07-30 | 2017-02-02 | Nasdaq, Inc. | Software application architecture |
| CN106126249A (zh) * | 2016-06-29 | 2016-11-16 | 武汉斗鱼网络科技有限公司 | 一种在前端实现行为、数据、视图联动的方法及系统 |
| CN107632826A (zh) * | 2016-07-14 | 2018-01-26 | 腾讯科技（深圳）有限公司 | 一种源代码的编译方法和客户端 |
| CN106557348A (zh) * | 2016-11-25 | 2017-04-05 | 百度在线网络技术（北京）有限公司 | 视图展示方法和装置 |
| CN107368294A (zh) * | 2017-05-25 | 2017-11-21 | 阿里巴巴集团控股有限公司 | 应用原型生成方法、模板训练方法、装置及系统 |
| CN107391169A (zh) * | 2017-06-09 | 2017-11-24 | 口碑控股有限公司 | 安卓页面的动态更新方法和装置 |
| CN108021614A (zh) * | 2017-08-18 | 2018-05-11 | 口碑(上海)信息技术有限公司 | 一种用于页面动态加载的方法及系统 |
| CN108089878A (zh) * | 2017-12-14 | 2018-05-29 | 腾讯科技（深圳）有限公司 | 页面信息展现和生成方法、装置及系统 |
Non-Patent Citations (2)
| Title |
|---|
| 刘昊云: ""O2O上门服务客户端系统框架的设计与实现"", 《中国优秀硕士学位论文全文数据库•信息科技辑》 * |
| 杨婷: ""基于模块化的前端开发框架的研究与实现"", 《中国优秀硕士学位论文全文数据库•信息科技辑》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109992248A (zh) * | 2019-02-25 | 2019-07-09 | 百度在线网络技术（北京）有限公司 | 语音应用的实现方法、装置、设备及计算机可读存储介质 |
| CN109992248B (zh) * | 2019-02-25 | 2022-07-29 | 阿波罗智联(北京)科技有限公司 | 语音应用的实现方法、装置、设备及计算机可读存储介质 |
| US11676587B2 (en) | 2019-02-25 | 2023-06-13 | Apollo Intelligent Connectivity (Beijing) Technology Co., Ltd. | Method, apparatus and device for implementing voice application, computer readable storage medium |
| CN111090442A (zh) * | 2019-11-11 | 2020-05-01 | 腾讯音乐娱乐科技（深圳）有限公司 | 一种应用更新方法、装置和存储介质 |
| CN111090442B (zh) * | 2019-11-11 | 2023-07-14 | 腾讯音乐娱乐科技（深圳）有限公司 | 一种应用更新方法、装置和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109240673B (zh) | 2021-11-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN100437579C (zh) | 一种实现ajax网页的方法 | |
| US7707563B2 (en) | System and method for network-based computing | |
| US9471704B2 (en) | Shared script files in multi-tab browser | |
| CN107577509A (zh) | 一种加载应用界面的方法、终端及计算机可读存储介质 | |
| CN104866327B (zh) | 一种php开发方法及框架 | |
| CN106936871A (zh) | 界面展示数据的方法及装置 | |
| CN112085217B (zh) | 部署人工智能服务的方法、装置、设备及计算机介质 | |
| CN104375808B (zh) | 界面显示方法及装置 | |
| CN104731589A (zh) | 用户界面的自动生成方法及自动生成装置 | |
| US9182953B2 (en) | Hybrid dynamic code compiling device, method, and service system thereof | |
| CN108733499A (zh) | 浏览器页面展示数据处理方法及装置 | |
| CN105518633A (zh) | Web服务器系统、应用开发辅助系统、Web服务器系统中的多语言支持方法、Web服务器系统中的多设备支持方法以及应用开发辅助方法 | |
| CN104583945A (zh) | 一种应用升级方法、装置 | |
| CN101840415A (zh) | 一种在b/s架构下通过lua脚本控制本地资源的方法 | |
| CN112764751B (zh) | 接口生成方法和装置、接口请求方法和装置及存储介质 | |
| CN103383687A (zh) | 一种页面处理方法和装置 | |
| CN111068328A (zh) | 游戏广告配置表格的生成方法、终端设备及介质 | |
| CN108717359A (zh) | 一种基于离线包的app模块的更新方法 | |
| CN108595698A (zh) | 图片加载方法、终端设备及介质 | |
| CN102262684A (zh) | 移动终端网页页面生成方法及装置 | |
| CN107463406A (zh) | 发布移动应用的方法和电子设备 | |
| CN113010827A (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
| CN109240673A (zh) | 一种基于react-native的视图动态加载更新方法及系统 | |
| CN109582317A (zh) | 用于调试寄宿应用的方法和装置 | |
| CN110109684A (zh) | 区块链节点管理代理服务安装方法、电子装置及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |