Method and device for rendering H5 page based on Vue2.0 and computer equipment

Abstract

The invention belongs to the technical field of computers, and relates to a Vue2.0-based H5 page rendering method and device, computer equipment and a storage medium, and the method comprises the following steps: obtaining a user demand, and editing an active H5 page according to the user demand; the edited active H5 page is previewed, and the edited active H5 page is perfected through previewing; the improved active H5 page is converted into data in a JSON format, and the data are released to generate a JSON; the H5 page is checked by accessing the generated page address; and rendering the H5 page. Project labor cost and maintenance cost can be reduced; according to the method, a new activity scheme generated in daily operation activities can be quickly met, coding is not needed, the method can be realized only by dragging configuration in the activity editor, and project development efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, computer equipment and storage medium for rendering H5 pages based on Vue2.0. Background Art

[0002] In daily marketing operations, different marketing activities need to be created according to different marketing scenarios. Different H5 pages need to be developed to meet different needs. Every time there is a new activity, a dedicated H5 page needs to be written separately, and changes in activities also need to be manually coded. The shortcomings of this method are: H5 activity page development is complex, difficult, and has a long development cycle; H5 activity page has a short life cycle and low reuse, which is bound to cause a waste of R&D resources. Summary of the invention

[0003] In order to solve the above technical problems, on the one hand, the present invention provides a method for rendering H5 pages based on Vue2.0, which adopts the following technical solutions, including:

[0004] Obtain user needs and edit the activity H5 page according to the user needs;

[0005] Preview the edited activity H5 page, and improve the edited activity H5 page through preview;

[0006] Convert the improved activity H5 page into JSON format data and publish the generated JSON;

[0007] View the H5 page by accessing the generated page address;

[0008] Render the H5 page.

[0009] Preferably, the step of obtaining user needs and editing the activity H5 page according to the user needs specifically includes:

[0010] Obtain user needs and design H5 page layout according to the user needs;

[0011] Set the H5 page writing style according to the H5 page layout;

[0012] Add button click, form submission, and data update interactive effects to the H5 page to implement interactive logic.

[0013] Preferably, the step of previewing the edited activity H5 page and improving the edited activity H5 page through preview specifically includes:

[0014] Preview the active H5 page in the local development environment and quickly iterate the development;

[0015] Preview the event H5 page on different devices and browsers to ensure that the event H5 page has good compatibility and responsive layout.

[0016] Preferably, the step of converting the improved active H5 page into data in JSON format and publishing the generated JSON specifically includes:

[0017] By traversing the Vue2.0 component tree, convert the template, style and state information of the Vue2.0 component into a JSON object;

[0018] Format the extracted JSON data;

[0019] Store the formatted JSON data in the server or front-end static files for subsequent rendering and transmission.

[0020] Preferably, the step of viewing the H5 page by accessing the generated page address specifically includes:

[0021] Deploy the edited H5 page to the server so that it can be accessed through the network;

[0022] Access the deployed page address through the browser to view the H5 page.

[0023] Preferably, the step of rendering the H5 page specifically includes:

[0024] The browser loads the HTML, CSS, JS, and JSON resource files required for the page;

[0025] The browser constructs a tree-like DOM tree data structure according to the structure of the HTML file, and each node represents an element on the page;

[0026] The browser applies the style to the corresponding node of the DOM tree according to the CSS selector and style rules;

[0027] The browser executes the JavaScript code in sequence and implements dynamic rendering and interaction of the page by operating the DOM and Vue instances;

[0028] Renders a Vue component.

[0029] In order to solve the above technical problems, the present invention also provides a device for rendering H5 pages based on Vue2.0, which adopts the following technical solution, including:

[0030] An editing module is used to obtain user needs and edit the activity H5 page according to the user needs;

[0031] The preview module is used to preview the edited activity H5 page and improve the edited activity H5 page through preview;

[0032] The conversion module is used to convert the improved activity H5 page into data in JSON format and publish the generated JSON;

[0033] View module, used to view H5 pages by accessing the generated page address;

[0034] Rendering module, used to render H5 pages.

[0035] Preferably, the conversion module comprises:

[0036] The traversal module is used to convert the template, style and state information of the Vue2.0 component into a JSON object by traversing the Vue2.0 component tree;

[0037] The formatting module is used to format the extracted JSON data;

[0038] The storage module is used to store formatted JSON data in the server or front-end static files for subsequent rendering and transmission.

[0039] In order to solve the above technical problems, the present invention also provides a computer device, which adopts the technical solution described below, including a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the above-mentioned method for rendering H5 pages based on Vue2.0 are implemented.

[0040] In order to solve the above technical problems, the present invention also provides a computer-readable storage medium, which adopts the technical solution described below. The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the above-mentioned method for rendering H5 pages based on Vue2.0 are implemented.

[0041] Compared with the prior art, the present invention mainly has the following beneficial effects: firstly, user needs are obtained, and the activity H5 page is edited according to the user needs; then the edited activity H5 page is previewed, and the edited activity H5 page is improved through the preview; then the improved activity H5 page is converted into data in JSON format, and the generated JSON is published; then the H5 page is viewed by accessing the generated page address; finally, the H5 page is rendered; it can reduce project labor costs and maintenance costs; it can quickly meet new activity plans generated in daily operational activities without coding, and can be achieved by simply dragging and dropping the configuration in the activity editor, thereby improving project development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the scheme in the present invention, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0043] Figure 1 It is a flow chart of an embodiment of a method for rendering H5 pages based on Vue2.0 of the present invention;

[0044] Figure 2 It is a schematic diagram of implementing an H5 activity editor based on Vue2.0 used in the method for rendering an H5 page based on Vue2.0 of the present invention;

[0045] Figure 3 It is a structural schematic diagram of an embodiment of a device for rendering H5 pages based on Vue2.0 of the present invention;

[0046] Figure 4 It is a schematic structural diagram of an embodiment of a computer device of the present invention. DETAILED DESCRIPTION

[0047] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present invention; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present invention or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0048] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0049] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings.

[0050] It should be noted that the method for rendering H5 pages based on Vue2.0 provided in the embodiment of the present invention is generally executed by a server / terminal device, and accordingly, the device for rendering H5 pages based on Vue2.0 is generally arranged in a server / terminal device.

[0051] It should be understood that the number of terminal devices, networks and servers is only illustrative. Depending on the implementation requirements, there can be any number of terminal devices, networks and servers.

[0052] Embodiment 1

[0053] Please refer to Figure 1 , shows a flow chart of an embodiment of a method for rendering an H5 page based on Vue2.0 of the present invention. The method for rendering an H5 page based on Vue2.0 comprises the following steps:

[0054] Step S1, obtaining user needs and editing the activity H5 page according to the user needs.

[0055] In this embodiment, the electronic device (server / terminal device) on which the method for rendering H5 pages based on Vue2.0 runs can receive a request for rendering H5 pages based on Vue2.0 through a wired connection or a wireless connection. It should be noted that the above wireless connection method may include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAXX connection, Zigbee connection, UWB (ultra wideband) connection, and other wireless connection methods currently known or to be developed in the future.

[0056] Editing the event H5 page is the first step of the whole process, which involves designing the layout, style and interactive logic of the page. The purpose of this step is to create an attractive H5 page that meets the needs of the event.

[0057] In this embodiment, step S1, obtaining user needs, and editing the activity H5 page according to the user needs may further include the following steps:

[0058] S11. Obtain user needs, and design an H5 page layout according to the user needs.

[0059] When obtaining user needs to design an efficient and attractive H5 page layout, you can fully understand the preferences, habits and pain points of target users through questionnaires, user interviews and data analysis. This process needs to focus on the core of user needs, such as the convenience of information acquisition, visual style preferences and the fluency of interactive experience.

[0060] It should be noted that based on the user needs collected and stored in the database, the following principles should be followed when designing the H5 page layout: clear navigation to ensure that users can quickly locate the required content; clear visual hierarchy, using color, font and spatial layout to guide the flow of vision; concise content to avoid information overload and keep the page light; enhance interactivity and increase user engagement through interactive elements such as clicks and slides.

[0061] Specifically in terms of layout design, modular thinking can be adopted to divide the page into multiple functional modules, such as the guide area, content display area and action call area. Each module is closely centered around user needs to ensure the consistency and effectiveness of information transmission. At the same time, focus on responsive design to ensure that the page can be well displayed on different devices, further improving the user experience.

[0062] For example, you can create a corresponding .vue file in a Vue project, define the component's template, script, and style, and design the page layout. Using Vue's componentization concept, split the page into multiple reusable components, such as navigation bar components, carousel components, content block components, etc. By designing the page layout, you can determine the basic structure and layout of the page, including the page header, main content, and bottom.

[0063] S12. Set the H5 page writing style according to the H5 page layout.

[0064] In the component <style>部分或全局样式文件中编写CSS代码，使用Vue的类绑定和样式绑定特性实现动态样式。利用CSS(或预处理器如Sass、Less)编写样式，并通过Vue的`<style>`标签或全局样式文件引入到项目中。

[0065] 编写样式的作用在于为页面和组件添加样式，使其看起来更加美观和符合品牌风格。

[0066] S13、为H5页面添加按钮点击、表单提交、数据更新交互效果，实现交互逻辑。

[0067] 在组件的<script>部分定义数据(data)、计算属性(computed)、方法(methods)等，通过`v-model`进行数据双向绑定，通过`@click`等指令监听事件。利用Vue的数据绑定和事件处理机制，实现用户与页面的交互。实现交互逻辑的作用在于为页面添加交互效果，如按钮点击、表单提交、数据更新等。

[0068] 图2是本发明的基于Vue2.0渲染H5页面方法中使用的基于Vue2.0实现H5活动编辑器示意图。如图2所示，编辑器是可视化搭建平台的主要工具，主要由以下七个部分构成：

[0069] ①编辑器：承载拖拽布局的页面，包含了下述其他页面可见元素；

[0070] ②模拟器：居中位置渲染了当前页面配置的组件内容，模拟真实页面展示内容；

[0071] ③组件库：左侧展示当前业务下的相关组件内容，以树状结构展示内容；

[0072] ④组件树：左侧展示当前页面添加的组件内容，以树状结构展示；

[0073] ⑤代码块：左侧展示添加的函数，可供组件事件中联动所用，或者组件声明周期中调用；

[0074] ⑥数据源：左侧展示添加的数据源，用于组件中的各项配置；

[0075] ⑦属性配置：展示组件提供出来的表单选项，让用户可以通过配置项来改变组件的行为和样式。

[0076] 步骤S2，对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善。

[0077] 步骤S2的目的在于在最终发布之前，检查页面的布局、样式和交互是否符合预期。通过预览，可以及时发现并修复潜在的问题。

[0078] 在本实施例中，步骤S2，对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善具体还可以包括步骤：

[0079] S21、在本地开发环境中预览活动H5页面，快速迭代开发。

[0080] 例如在命令行中运行npm run serve(或相应的命令)，访问提供的本地地址(如`http: / / localhost:8080`)预览页面。

[0081] 利用Webpack、Vue CLI等工具启动一个开发服务器，实时编译和刷新页面，以便开发者在浏览器中查看。

[0082] 步骤S21的作用在于在本地开发环境中预览页面，进行快速迭代开发，节省开发时间。

[0083] S22、在不同设备和浏览器上预览活动H5页面，确保活动H5页面具有良好的兼容性和响应式布局。

[0084] 例如，可以在浏览器的开发者工具中切换到"Responsive”模式，选择不同的设备和分辨率进行预览；或使用BrowserStack等在线工具进行跨浏览器和设备测试。

[0085] 使用浏览器开发者工具中的设备模拟功能，或借助第三方工具(如BrowserStack)进行跨设备测试。

[0086] 步骤S3，将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON。

[0087] 将经过完善后的H5页面转换成JSON格式的数据，便于存储、传输和动态渲染。JSON作为一种轻量级的数据交换格式，非常适合用于Web开发中。

[0088] 在本实施例中，步骤S3，将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON具体还可以包括步骤：

[0089] S31、通过遍历Vue2.0组件树，将Vue2.0组件的模板、样式和状态信息转换成JSON对象。

[0090] 例如编写一个自定义的序列化函数，遍历Vue实例的`$children`和`$refs`等属性，提取出组件的关键信息，并转换成JSON格式。步骤S31的作用在于从Vue组件中提取出需要渲染到页面的数据，包括页面结构、样式和交互逻辑等。

[0091] S32、对提取出的JSON数据进行格式化。

[0092] 例如在JavaScript代码中调用`JSON.stringify(data,null,2)`(其中`data`是待转换的对象，`2`表示缩进级别)进行格式化输出。使用JSON.stringify()方法将JavaScript对象转换成JSON字符串，并通过缩进等参数控制格式化输出。

[0093] 对提取出的JSON数据进行格式化，使其结构清晰、易于理解和维护。

[0094] S33、将格式化后的JSON数据存储到服务器或前端静态文件中，以便后续的渲染和传输。

[0095] 在Vue项目中，可以使用axios等HTTP客户端库发送POST请求将JSON数据发送到服务器；或使用Webpack等构建工具将JSON文件打包到项目中。

[0096] 使用HTTP请求将JSON数据发送到服务器进行存储，或直接在前端项目中引用静态JSON文件。

[0097] 将格式化后的JSON数据存储到服务器或前端静态文件中，以便后续的渲染和传输。

[0098] 步骤S4，通过访问生成的页面地址来查看H5页面。

[0099] 用户通过访问生成的页面地址来查看H5页面。这一步是用户与页面交互的入口。

[0100] 在本实施例中，步骤S4，通过访问生成的页面地址来查看H5页面具体还可以包括步骤：

[0101] S41、将编辑好的H5页面部署到服务器上，使其可以通过网络访问。

[0102] 例如使用Vue CLI的`npm run build`命令构建项目，将生成的`dist`目录中的内容部署到服务器上。将Vue项目构建成静态文件(如HTML、CSS、JS、JSON等)，并部署到Web服务器上(如Nginx、Apache等)。

[0103] S42、通过浏览器访问部署好的页面地址，查看H5页面。

[0104] 例如用户在浏览器中输入页面地址(如

[0105] `https: / / www.example.com / h5page`)，按下回车键，浏览器自动向服务器发送请求并显示页面。浏览器向服务器发送HTTP请求，服务器返回HTML、CSS、JS、JSON等文件，浏览器解析这些文件并渲染出页面。

[0106] 步骤S5，对H5页面进行渲染。

[0107] 渲染H5页面是将服务器返回的HTML、CSS、JS、JSON等数据转换成用户可交互的Web页面的过程。这一步是用户体验的关键。

[0108] 在本实施例中，步骤S5，对H5页面进行渲染具体还可以包括步骤：

[0109] S51、浏览器加载页面所需的HTML、CSS、JS、JSON资源文件。

[0110] 浏览器自动处理资源的加载和缓存，开发者可以通过设置HTTP头(如Cache-Control)来控制资源的缓存策略。

[0111] 浏览器解析HTML文件，根据文件中的`<link>`、`<script>`、``等标签加载CSS、JS、图片等资源。对于Vue项目，浏览器还会加载Vue和Vue Router等库的JS文件。

[0112] S52、浏览器按照HTML文件的结构，构建出一个树状的数据结构(DOM树)，每个节点代表页面上的一个元素。

[0113] 可以通过优化HTML结构、减少DOM操作等方式提高页面的渲染性能。浏览器将HTML文件解析成DOM树，用于后续的渲染和交互。

[0114] S53、浏览器根据CSS选择器和样式规则，将样式应用到DOM树的相应节点上。

[0115] 开发者在Vue组件的<style>部分或全局样式文件中编写CSS代码，浏览器在解析HTML时会自动应用这些样式。浏览器将CSS样式应用到DOM树上，使页面具有预期的样式和布局。

[0116] S54、浏览器按照JavaScript代码的顺序执行，通过操作DOM和Vue实例来实现页面的动态渲染和交互。

[0117] 在Vue组件的<script>部分编写JavaScript代码，定义数据、方法和生命周期钩子等。浏览器在解析HTML时，会按照`<script`标签的顺序加载和执行这些代码。浏览器执行JavaScript代码，实现页面的交互逻辑和数据渲染。

[0118] S55、渲染Vue组件。

[0119] 在Vue组件的<template>部分定义组件的HTML结构，通过Vue的数据绑定和指令(如`v-for`、`v-if`)实现数据的动态渲染。Vue框架会自动处理虚拟DOM的生成和真实DOM的更新。

[0120] Vue实例在创建时会解析模板生成渲染函数，该函数根据组件的数据生成虚拟DOM。Vue的虚拟DOM算法会对比新旧虚拟DOM的差异，并最小化DOM的更新操作，以提高渲染性能。

[0121] 渲染Vue组件的作用在于：Vue框架根据组件的模板、数据和逻辑，生成虚拟DOM，并将其转换成真实DOM，最终渲染到页面上。

[0122] 编辑器构建了一个拖拽式编辑区域，用户可以通过拖拽组件库中的元素(如图片、文本、按钮、视频等)到画布上，并通过属性面板调整这些元素的样式和行为。

[0123] 可以对Vue2.0进行配置，比如颜色、字体、内容、背景色、前景色、border等。例如可以采用以下代码：

[0124]

[0125]

[0126] 这里Vue2.0组件的color的prop多了一个key:editor。这个color.editor指的是颜色的属性编辑器。因为编辑器组件默认集成了element-ui的颜色选择器组件，因此可以直接使用'el-color-picker'来作为颜色属性的自定义编辑器。

[0127] 在把按钮从左侧拖拽放置到编辑器中间的画布上的时候，渲染引擎会自动执行如下代码：

[0128] (1)遍历按钮组件的props

[0129] (2)构造pluginProps对象，作为画布中按钮元素的描述信息(也是数据库中存储的信息)。

[0130] 得到的结果代表着，按钮在画布上的颜色、文字、边框、对齐、字体等信息如下：

[0131]

[0132]

[0133] 通过以上步骤，基于Vue 2.0的H5页面从编辑到渲染的完整流程得以实现。这一流程涵盖了页面设计、预览、发布、访问和渲染等多个环节，每一步都为实现高效、美观、可交互的Web页面提供了重要支持。通过基于Vue2.0实现H5活动编辑器，具有友好的拖拽编辑方式；还具有丰富的组件拓展能力，支持自定义组件、插件；组件通信，支持组件联动。构建了一个灵活、高效且用户友好的在线平台，允许非技术人员通过可视化界面轻松设计、编辑和发布H5页面活动，如促销广告、节日海报、产品展示等。

[0134] 实施本实施例，其有益效果是：通过首先获取用户需求，根据用户需求编辑活动H5页面；再对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善；然后将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON；再通过访问生成的页面地址来查看H5页面；最后对H5页面进行渲染；能够减少项目人工成本，降低维护成本；能够快速满足日常运营活动中产生的新的活动方案，无需编码，只需在活动编辑器中拖拽配置即可实现，提高了项目开发效率。

[0135] 本发明可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

[0136] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

[0137] 应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

[0138] 实施例二

[0139] 进一步参考图3，作为对上述图1所示方法的实现，本发明提供了一种基于Vue2.0渲染H5页面装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

[0140] 如图3所示，本实施例所述基于Vue2.0渲染H5页面装置60包括：编辑模块61、预览模块62、转换模块63、查看模块64以及渲染模块65。其中：

[0141] 编辑模块61，用于获取用户需求，根据所述用户需求编辑活动H5页面；

[0142] 预览模块62，用于对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善；

[0143] 转换模块63，用于将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON；

[0144] 查看模块64，用于通过访问生成的页面地址来查看H5页面；

[0145] 渲染模块65，用于对H5页面进行渲染。

[0146] 所述转换模块63进一步包括：

[0147] 遍历模块631，用于通过遍历Vue2.0组件树，将Vue2.0组件的模板、样式和状态信息转换成JSON对象；

[0148] 格式化模块632，用于对提取出的JSON数据进行格式化；

[0149] 存储模块633，用于将格式化后的JSON数据存储到服务器或前端静态文件中，以便后续的渲染和传输。

[0150] 实施本实施例，其有益效果是：通过首先获取用户需求，根据用户需求编辑活动H5页面；再对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善；然后将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON；再通过访问生成的页面地址来查看H5页面；最后对H5页面进行渲染；能够减少项目人工成本，降低维护成本；能够快速满足日常运营活动中产生的新的活动方案，无需编码，只需在活动编辑器中拖拽配置即可实现，提高了项目开发效率。

[0151] 实施例三

[0152] 为解决上述技术问题，本发明实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。

[0153] 上述计算机设备7包括通过系统总线相互通信连接存储器71、处理器72、网络接口73。需要指出的是，图中仅示出了具有组件存储器71、处理器72和网络接口73的计算机设备7，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和 / 或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

[0154] 上述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。上述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

[0155] 上述存储器71至少包括一种类型的可读存储介质，上述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，上述存储器71可以是上述计算机设备7的内部存储单元，例如该计算机设备7的硬盘或内存。在另一些实施例中，上述存储器71也可以是上述计算机设备7的外部存储设备，例如该计算机设备7上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，上述存储器71还可以既包括上述计算机设备7的内部存储单元也包括其外部存储设备。本实施例中，上述存储器71通常用于存储安装于上述计算机设备7的操作系统和各类应用软件，例如基于Vue2.0渲染H5页面方法的计算机可读指令等。此外，上述存储器71还可以用于暂时地存储已经输出或者将要输出的各类数据。

[0156] 上述处理器72在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器72通常用于控制上述计算机设备7的总体操作。本实施例中，上述处理器72用于运行上述存储器71中存储的计算机可读指令或者处理数据，例如运行上述基于Vue2.0渲染H5页面方法的计算机可读指令。

[0157] 上述网络接口73可包括无线网络接口或有线网络接口，该网络接口73通常用于在上述计算机设备7与其他电子设备之间建立通信连接。

[0158] 实施本实施例，其有益效果是：通过首先获取用户需求，根据用户需求编辑活动H5页面；再对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善；然后将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON；再通过访问生成的页面地址来查看H5页面；最后对H5页面进行渲染；能够减少项目人工成本，降低维护成本；能够快速满足日常运营活动中产生的新的活动方案，无需编码，只需在活动编辑器中拖拽配置即可实现，提高了项目开发效率。

[0159] 实施例四

[0160] 本发明还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的基于Vue2.0渲染H5页面方法的步骤。

[0161] 实施本实施例，其有益效果是：通过首先获取用户需求，根据用户需求编辑活动H5页面；再对所编辑的活动H5页面进行预览，通过预览，对所编辑的活动H5页面进行完善；然后将经过完善后的活动H5页面转换成JSON格式的数据，发布生成JSON；再通过访问生成的页面地址来查看H5页面；最后对H5页面进行渲染；能够减少项目人工成本，降低维护成本；能够快速满足日常运营活动中产生的新的活动方案，无需编码，只需在活动编辑器中拖拽配置即可实现，提高了项目开发效率。

[0162] 通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM / RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例方法。

[0163] 显然，以上所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例，附图中给出了本发明的较佳实施例，但并不限制本发明的专利范围。本发明可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本发明的公开内容的理解更加透彻全面。尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本发明说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本发明专利保护范围之内。< / style>

Claims

1. A method for rendering H5 pages based on Vue2.0, characterized in that: The steps include: Obtain user needs and edit the activity H5 page according to the user needs; Preview the edited activity H5 page, and improve the edited activity H5 page through preview; Convert the improved activity H5 page into JSON format data and publish the generated JSON; View the H5 page by accessing the generated page address; Render the H5 page.

2. According to the method for rendering H5 pages based on Vue2.0 according to claim 1, it is characterized in that: The step of obtaining user needs and editing the activity H5 page according to the user needs specifically includes: Obtain user needs and design H5 page layout according to the user needs; Set the H5 page writing style according to the H5 page layout; Add button click, form submission, and data update interactive effects to the H5 page to implement interactive logic.

3. According to the method for rendering H5 pages based on Vue2.0 according to claim 1, it is characterized in that: The step of previewing the edited activity H5 page and improving the edited activity H5 page through preview specifically includes: Preview the active H5 page in the local development environment and quickly iterate the development; Preview the event H5 page on different devices and browsers to ensure that the event H5 page has good compatibility and responsive layout.

4. According to the method for rendering H5 pages based on Vue2.0 according to claim 1, it is characterized in that: The steps of converting the improved active H5 page into data in JSON format and publishing the generated JSON specifically include: By traversing the Vue2.0 component tree, convert the template, style and state information of the Vue2.0 component into a JSON object; Format the extracted JSON data; Store the formatted JSON data in the server or front-end static files for subsequent rendering and transmission.

5. The method for rendering H5 pages based on Vue2.0 according to claim 1 is characterized in that: The step of viewing the H5 page by accessing the generated page address specifically includes: Deploy the edited H5 page to the server so that it can be accessed through the network; Access the deployed page address through the browser to view the H5 page.

6. The method for rendering H5 pages based on Vue2.0 according to claim 1, characterized in that: The steps of rendering the H5 page specifically include: The browser loads the HTML, CSS, JS, and JSON resource files required for the page; The browser constructs a tree-like DOM tree data structure according to the structure of the HTML file, and each node represents an element on the page; The browser applies the style to the corresponding node of the DOM tree according to the CSS selector and style rules; The browser executes the JavaScript code in sequence and implements dynamic rendering and interaction of the page by operating the DOM and Vue instances; Renders a Vue component.

7. A device for rendering H5 pages based on Vue2.0, characterized in that: include: An editing module is used to obtain user needs and edit the activity H5 page according to the user needs; The preview module is used to preview the edited activity H5 page and improve the edited activity H5 page through preview; The conversion module is used to convert the improved activity H5 page into data in JSON format and publish the generated JSON; View module, used to view H5 pages by accessing the generated page address; Rendering module, used to render H5 pages.

8. The device for rendering H5 pages based on Vue2.0 according to claim 7, characterized in that: The conversion module comprises: The traversal module is used to convert the template, style and state information of the Vue2.0 component into a JSON object by traversing the Vue2.0 component tree; The formatting module is used to format the extracted JSON data; The storage module is used to store formatted JSON data in the server or front-end static files for subsequent rendering and transmission.

9. A computer device comprising a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the method for rendering an H5 page based on Vue2.0 as described in any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the method for rendering an H5 page based on Vue2.0 according to any one of claims 1 to 6 are implemented.

Images