CN115543318A - Implementation method for rapidly forming H5 application into multi-terminal application based on vue development - Google Patents

Abstract

The invention discloses a method for realizing rapid H5 application forming into multi-terminal application based on vue development, which comprises the following steps: 1. preparation work: a mobile terminal h5 application developed based on vue; 2. the scheme comprises the following flows: (1) A project empty shell is quickly generated by means of a scaffold provided by the uniapp framework; (2) Js file is configured with multi-terminal application personalized information to be constructed; (3) Configuring a route, wherein because uniapp does not support route guardians naturally, but most of the vue projects use route guardians, the route configuration can best keep the original route configuration rule to the greatest extent by means of a wheel uni-simple-router and support the use of route guardians in the projects; (4) Migrating files such as vue, css, json and the like under the page according to the routing sequence; (5) And installing item dependencies according to the instruction npmi, and constructing applications of different platforms by virtue of script scripts provided in package. The invention completes the rapid molding from a single H5 project to multi-end application by the minimum change point.

Description

Implementation method for rapidly forming H5 application into multi-terminal application based on vue development

Technical Field

The invention relates to the technical field of information, in particular to a method for realizing rapid H5 application forming into multi-terminal application based on vue development.

Background

Currently, each large internet company pushes a small program under own app, and in order to guide the flow, a business company does not develop H5 application alone, but properly selects 'H5 + multi-platform small program' to popularize the business. Because the small program codes of all platforms are not fuzzy and compatible, and H5 application is added, the development scene is too complex, and the research, development and maintenance costs are higher and higher.

Aiming at the series of problems, the invention provides a solution for rapidly forming H5 application into multi-terminal application based on vue development, and the solution has the advantages of small change point and high expansion degree.

Disclosure of Invention

Aiming at the defects in the prior art, the invention aims to provide a method for realizing the rapid forming of the H5 application into the multi-terminal application based on vue, and the rapid forming from a single H5 project to the multi-terminal application is finished by depending on a bottom layer frame provided by uniiapp to expect the minimum change point.

In order to realize the purpose, the invention is realized by the following technical scheme: the implementation method for rapidly forming the H5 application into the multi-terminal application based on vue development comprises the following steps:

1. preparation work:

a mobile terminal h5 application developed based on vue;

2. the scheme comprises the following flows:

(1) A project empty shell is quickly generated by means of a scaffold provided by the uniapp framework;

(2) Js file is internally configured with multi-terminal application personalized information to be constructed, such as appid, sub-package, component and the like of each small program;

(3) Configuring a route, wherein because uniapp does not support route guardians naturally, but most of the vue projects use route guardians, the route configuration can best keep the original route configuration rule to the greatest extent by means of a wheel uni-simple-router and support the use of route guardians in the projects;

(4) Migrating files such as vue, css and json under the page according to the routing sequence;

(5) And installing item dependencies according to the instruction npmi, and constructing applications of different platforms by virtue of script scripts provided in package.

The scheme flow (4) specifically comprises the following steps:

1. the file with the suffix name of vue, the file type remains unchanged, but note that the tag under template is processed as follows:

div to View

Changing span and font into text

a is changed into navigator

Changing img to image

Change from select to picker

iframe to web-view

ul and li are not available, and are all replaced by view

Js code is mostly directly reusable, only needs to handle partially incompatible APIs, such as:

processing window api

Processing navigator api

Processing dom api

Other js api

3. Css's code 99 is reusable, but care should be taken not to support selectors;

the invention has the following beneficial effects:

the invention adapts the page layout under the folding screen by processing the DOM on the premise of not separately displaying the cs of the write adaptation for the unfolding state of the folding screen.

Drawings

The invention is described in detail below with reference to the drawings and the detailed description;

fig. 1 is a schematic architecture diagram of the present invention.

Detailed Description

In order to make the technical means, the creation characteristics, the achievement purposes and the effects of the invention easy to understand, the invention is further described with the specific embodiments.

Referring to fig. 1, the following technical solutions are adopted in the present embodiment: the implementation method for rapidly forming the H5 application into the multi-terminal application based on vue development comprises the following steps:

1. preparation:

a mobile terminal h5 application developed based on vue;

2. the scheme comprises the following flows:

(1) A project empty shell is quickly generated by means of a scaffold provided by the uniapp framework;

(2) Js file is internally configured with multi-terminal application personalized information to be constructed, such as appid, sub-package, component and the like of each small program;

(3) Configuring a route, wherein because uniapp does not support route guardians naturally, but most of the vue projects use route guardians, the route configuration can best keep the original route configuration rule to the greatest extent by means of a wheel uni-simple-router and support the use of route guardians in the projects;

(4) Migrating files such as vue, css, json and the like under the page according to the routing sequence;

(5) Installing project dependence according to the instruction npmi, and constructing applications of different platforms according to script scripts provided in package.

(6) And finally, releasing the packaged different platform applications to corresponding platforms.

The present embodiment accomplishes the rapid prototyping of single H5 projects to multi-end applications by relying on the underlying framework provided by uniapp for minimal change points.

The foregoing shows and describes the general principles and broad features of the present invention and advantages thereof. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, which are described in the specification and illustrated only to illustrate the principle of the present invention, but that various changes and modifications may be made therein without departing from the spirit and scope of the present invention, which fall within the scope of the invention as claimed. The scope of the invention is defined by the appended claims and equivalents thereof.

Claims (2)

1. The implementation method for rapidly forming the H5 application into the multi-end application based on vue is characterized by comprising the following steps of:

(I) preparation:

a mobile terminal h5 application developed based on vue;

(II) scheme flow:

(1) A project empty shell is quickly generated by means of a scaffold provided by the uniapp framework;

(2) Js file is internally configured with multi-terminal application personalized information to be constructed, such as appid, sub-package and component of each small program;

(3) Configuring a route, wherein because uniapp does not support route guardians naturally, but most of the vue projects use route guardians, the route configuration can best keep the original route configuration rule to the greatest extent by means of a wheel uni-simple-router and support the use of route guardians in the projects;

(4) Migrating vue files, css files and json files under the page according to the routing sequence;

(5) And installing item dependencies according to the instruction npmi, and constructing applications of different platforms by virtue of script scripts provided in package.

2. The method for implementing rapid prototyping of H5 applications into multi-end applications based on vue development of claim 1, wherein the scheme flow (4) specifically comprises:

1. the file with the suffix name of vue, the file type remains unchanged, but note that the tag under template is processed as follows:

changing div into view;

span and font are changed into text;

a is changed into navigator;

changing img into image;

change select to picker;

the iframe is changed into the web-view;

ul and li are not available, and are replaced by view;

js code is mostly directly reusable, only needs to handle partially incompatible APIs, such as:

processing the window api;

processing navigator api;

processing the dom api;

other js api;

code 99 for 3.Css is reusable, but care should be taken not to support selectors.

Images