CN106990966A - Mobile terminal cross-platform Development Framework and development approach based on front end frame - Google Patents

Abstract

The invention discloses a kind of mobile terminal cross-platform Development Framework based on front end frame, including：Using performance and Business Logic：Basic page layout, network request packet, data loading, page navigation exploitation are carried out by front end frame, and carry out business logic processing, web page files are compiled into；HTML rendering layers：The analysis result of webpage is passed through by calculating, imposition layout by browser, called on mobile device interface, color applying drawing to user interface；Mobile device API, for the data interaction between HTML rendering layers and mobile terminal operating system hardware capability, there is provided the mobile device API of access；Mobile terminal operating system platform；Engineering to completion is packed, the installation file that can be run according to the mobile terminal operating system generation of identification under corresponding system.The development efficiency of mobile software can be improved, shorten the construction cycle, it is cost-effective.

Description

Mobile terminal cross-platform application development framework and development method based on front-end framework

technical field

The invention belongs to the technical field of mobile terminal cross-platform application development, and in particular relates to a mobile terminal cross-platform application development framework and a development method based on a front-end framework.

Background technique

With the continuous development of network technology, especially the development of mobile Internet technology, people have become inseparable from mobile terminal equipment. People can obtain information and services from the Internet through mobile phones anytime and anywhere. As of January 22, 2017, the number of Chinese Internet users 688 million people, of which 620 million are mobile Internet users, accounting for 90.1% of the population using mobile phones. This shows the great significance of mobile terminal devices in people's lives. Mobile terminal devices have become a means of survival for a person. An important tool for mobile Internet technology, and the development of mobile Internet technology has also become an important indicator of the development of a country's scientific and technological innovation capabilities. If a platform is established on such a major consumer group as 600 million mobile phone users, and it is widely applied to enterprises, businesses, and ordinary users, it will surely create earth-shattering miracles.

During the development of the mobile Internet, many mobile phone operating systems have emerged, among which Apple's IOS system, Google's Android system, and Microsoft's WindowsPhone system are particularly outstanding. As of the second quarter of 2016, the market share of these three mobile phone operating systems Occupancy rate has reached 99.7%. At present, the development of a mobile application software is basically based on these three platforms. Since the software development of these three operating systems is based on different programming languages, it is necessary to develop software that adapts to these three systems. To write three different pieces of code to bring it to the end. This greatly increases the difficulty of software development and maintenance. At this time, it is very important to develop a cross-platform mobile software development platform.

Currently, there are three main categories of mobile applications: Native applications, Web applications, and Hybrid applications. Native applications mainly refer to applications developed using a specific platform development language. Web applications are mainly developed using unified standard HTML, JavaScript, CSS and other Web technologies, and are accessed through browsers on different platforms to achieve cross-platform. The disadvantage of native application development is that the application software of different mobile phone operating systems is developed independently, and developers need to write multiple sets of codes for specific mobile phone platforms, while web applications have great differences with native mobile phone applications in terms of performance and user experience. gap. The Hybrid application is mainly a product that makes up for the shortcomings of the above two development modes. It uses front-end technology to develop application pages, and calls Native code to complete the writing of business logic.

Contents of the invention

Aiming at the problem that the current mobile software development needs to distinguish different mobile phone operating systems, the purpose of the present invention is to provide a mobile terminal cross-platform application development framework and development method based on the front-end framework. The framework of the present invention adopts the application development method of the Hybrid mode , adopts a layered design mode, the interface is developed using front-end technology, and the hardware-related functions of the native application are called through the middle layer plug-in to complete the development of the mobile phone application software. When the invention is applied to the development of mobile software projects, the development efficiency of mobile terminal software can be greatly improved.

Technical scheme of the present invention is:

A mobile cross-platform application development framework based on the front-end framework, including:

Application performance and business logic layer: carry out basic page layout, network request data, data loading, page navigation development through the front-end framework, and perform business logic processing and compile it into a web page file;

HTML rendering layer: through the browser, the parsing results of the webpage are calculated, typed and laid out, and the mobile device interface is called, and then rendered and drawn on the user interface;

Mobile device API, used for data interaction between the HTML rendering layer and the hardware functions of the mobile operating system, providing access to the mobile device API;

Mobile operating system platform; package the completed project, and generate installation files that can run under the corresponding system according to the identified mobile operating system.

Preferably, the data interaction between the HTML rendering layer and the hardware functions of the mobile terminal operating system includes generating an interactive plug-in, sending information to the mobile device through the interactive plug-in, and after receiving the information, the mobile device converts the execution result of the native code in the form of a JSON object Sent to the HTML rendering layer.

Preferably, the interaction plug-in includes an interface file and an interaction module, the interface file is used to identify the operating system of the mobile terminal, and the interaction module sends a request through AJAX to realize data interaction.

The present invention also discloses a mobile terminal cross-platform application development method based on the front-end framework, comprising the following steps:

S01: Perform basic page layout, network request data, data loading, page navigation development through the front-end framework, and perform business logic processing, and compile it into a web page file;

S02: Through the browser, the analysis results of the webpage are calculated, typesetting and layout, calling the mobile device interface, rendering and drawing to the user interface for function debugging, and performing data interaction with the hardware function of the mobile terminal operating system through the interactive plug-in;

S03: Package the completed project, and generate an installation file that can run under the corresponding system according to the identified mobile operating system.

Preferably, in the step S02, when debugging the functional code on the web page, when a network request occurs, a cross-domain request transfer tool is built, and the local request is transferred to the real URL address through the cross-domain request transfer tool.

Compared with prior art, the advantage of the present invention is:

(1) In the framework of the present invention, software developers only need to pay attention to the realization of the front-end code, and can complete the development of mobile terminal applications without considering the differences of different mobile terminal operating systems. The software developed on this platform can be simultaneously Compatible with Android, IOS, Windows Phone, and web pages.

(2) On the basis of the framework of the present invention, only one code is required for the development of an application, and there is no need to distinguish between mobile operating system platforms, which greatly shortens the life cycle of software development, improves development efficiency, and saves labor costs for software development And the cost of personnel management among different clients.

(3) The device-related functions in the framework of the present invention are manually added in the form of plug-ins without approval, and these functions can always be retained in the Native project for reuse and improvement.

(4) The development of the framework of the present invention has high cohesion and low coupling, and the system is relatively stable. The framework can also be customized and developed, which increases the flexibility of the internal structure of the framework.

Description of drawings

The present invention will be further described below in conjunction with accompanying drawing and embodiment:

Fig. 1 is a framework diagram of the present invention;

Fig. 2 is a mobile phone application software engineering structural diagram constructed on the framework of the present invention;

Fig. 3 is a relationship diagram among various modules of the framework of the present invention.

detailed description

The above solution will be further described below in conjunction with specific embodiments. It should be understood that these examples are used to illustrate the present invention and not to limit the scope of the present invention. The implementation conditions used in the examples can be further adjusted according to the conditions of specific manufacturers, and the implementation conditions not indicated are usually the conditions in routine experiments.

Example:

A cross-platform mobile application development framework based on the front-end framework. As shown in Figure 1, the cross-platform framework is designed as a four-layer architecture system: application performance and business logic layer, HTML rendering layer, mobile device API, and mobile phone operating system platform ,in:

Application performance and business logic layer: According to the cross-platform framework diagram of the mobile terminal in Figure 3, the structure of this layer is mainly used to solve the development of functional modules of software applications and the processing of business logic. This layer mainly uses the front-end framework AngularJS2 to complete the code Writing, the entry of the completed project is index.html, which generates an operational webpage, controls the webpage format through CSS, and completes business logic processing through Typescript. The pages related to mobile phone functions call the native code according to the JavaScript method name defined in the Cordova plug-in, receive the processing result of the native code in JSON format, display it on the page, and complete the data interaction.

HTML rendering layer: set the WebView component on each mobile device. Through this component, the Android project and IOS project can load the webpage generated by the application performance and business logic layer. This function is realized through the Cordova.loadUrl(string url) method , the url in the method is the storage address of index.html in the application performance and business logic layer. Through this method, the entry file of the web page is loaded into the WebView, and the built-in browser of the WebView component is responsible for calculating and typesetting the analysis results of the page Layout, call the mobile device interface, render and draw on the user interface of the mobile phone.

Mobile device API: The main function of this layer is the role of an intermediate bridge. Through this layer, the interaction between the HTML rendering layer and the hardware functions of the mobile phone operating system can be realized. The specific interaction method is realized through the Cordova plug-in, which is created by creating a Cordova project To realize the interaction between JavaScript and native code, define the method name in the configuration file in the Cordova project for JavaScript code to call. This platform mainly realizes the communication between Android and IOS projects and JavaScript. The communication entry function is cordova.exec (success, error , service, action, [message]), the parameters of exec are the method execution success callback, failure callback, execution service name, execution action and passed parameters, use execute (success, error, service , action, [message]) method receives the content in the exec method, performs different operations according to the specific actions of the action, and returns the execution result of the native code to the method in JavaScript in the form of a JSON object. This enables two-way communication between JavaScript and native code.

Mobile operating system platform: The mobile applications developed in the mobile cross-platform framework will eventually be installed on this platform, which includes Android and IOS. In the mobile operating system downloaded in the form of an installation package, the software runs in each operating system without differentiation, and finally realizes cross-platform.

In this embodiment, a mobile phone is taken as an example to describe a method for developing a mobile cross-platform application based on a front-end framework, and the specific steps are as follows:

Step 1: Construct the project of the mobile phone operating system. This project is used to compile the mobile phone installation package. This project includes Android project and IOS project. The project directory structure includes www file and CordovaBox file. The www file stores the front end of the webpage compiled by the compiler Source code and plug-in configuration files, CordovaBox files store resource files related to the mobile phone platform and specific functional plug-ins, Android projects use the traditional compilation method Gradle tool to complete the packaging of Android programs, and publish them to the Google application market for users to download , The IOS project uses the XCode tool to complete the packaging of the application and upload it to the Apple App Store.

Step 2: Use the Ionic framework to create a new project, write webpage files, and complete basic page layout, network request data, data loading, and page navigation development. The main task of this step is to complete the development of web content through the popular front-end development framework AngularJS. The main difference between the developed web page and the traditional web page is that the web page will call the basic functions of the mobile phone, and other aspects are not the same as web development on the computer side. The difference is that the call of the mobile phone function uses the Cordova plug-in to complete the data interaction, and returns the execution result of the mobile terminal to the page through the data in JSON format.

Step 3: Compile the code developed in step 2 into JavaScript code recognizable by the browser in the www file, and move this file to the project in step 1.

Step 4: Under the newly created project in step 2, write an interactive plug-in that can call the mobile device API. The main content of the plug-in file is plugin. Code, such as camera function, photo album function, status bar, keyboard and other basic mobile phone functions.

Step 5: When debugging functional code on a web page, when a network request occurs, since the request is sent locally, there will be a cross-domain request problem, so it is necessary to build a transfer tool for sending cross-domain requests locally. The local request is forwarded to the real URL address.

Step 6: The projects in step 1 and step 2 are combined to form a complete mobile cross-platform framework based on the front-end framework. The combination of the two requires the integration of some files in the project, and the copy of the code uses the framework's own toolsgulpfile.ts.

Step 7: Build the gulpfile.ts file, and copy the www file in step 1 to the root directory in step 2. The gulpfile file can also change the host address in the real machine debugging work to prevent errors caused by manual changes.

Step 8: Package the integrated project in step 1, generate an installation file that can be installed on the mobile phone operating system, and complete the official launch of the project.

The project structure shown in Figure 2, in this project structure to realize the development of reimbursement software, the implementation steps are as follows:

(1) In the development process of the embodiment, the front-end page and business logic processing are firstly developed, and the Page includes Provider, Pipe and Component. Provider processes network requests, sends requests from the network in HTTP, and obtains data. Pipe formats the display content on the page, and Component provides commonly used public group components to improve code reusability.

(2) ShareService provides specific public services for pages. ShareService defines specific services but does not implement them. It only defines interfaces to realize the separation of pages and business layers.

(3) Through the Ionic-app-scripts tool, the page layout and business logic developed using front-end technology are compiled into JavaScript codes that can be recognized by the mobile operating system WebView.

(4) Use Gulp to copy the code compiled in step (3) to the WWW directory of the Android and IOS projects, complete the construction of the box project, compile and run the corresponding software in this box project, and package and install it on the mobile phone operating system. The installation package is installed on different mobile phone operating systems.

The above examples are only to illustrate the technical conception and characteristics of the present invention, and its purpose is to allow people familiar with this technology to understand the content of the present invention and implement it accordingly, and cannot limit the protection scope of the present invention. All equivalent changes or modifications made according to the spirit of the present invention shall fall within the protection scope of the present invention.

Claims (5)

1. a kind of mobile terminal cross-platform Development Framework based on front end frame, it is characterised in that including：

Using performance and Business Logic：Basic page layout, network request packet, data are carried out by front end frame to add Carry, page navigation is developed, and carries out business logic processing, is compiled into web page files；

HTML rendering layers：The analysis result of webpage is passed through by calculating, imposition layout by browser, mobile device interface is called, Color applying drawing is in user interface；

Mobile device API, for the data interaction between HTML rendering layers and mobile terminal operating system hardware capability, there is provided access Mobile device API；

Mobile terminal operating system platform；Engineering to completion is packed, can be according to the generation of the mobile terminal operating system of identification The installation file run under corresponding system.

2. the mobile terminal cross-platform Development Framework according to claim 1 based on front end frame, it is characterised in that institute The data interaction stated between HTML rendering layers and mobile terminal operating system hardware capability includes, generation interaction plug-in unit, is inserted by interaction Part is sent out the implementing result of primary code after sending information, mobile device receive information to mobile device in the form of JSON objects Deliver to HTML rendering layers.

3. the mobile terminal cross-platform Development Framework according to claim 2 based on front end frame, it is characterised in that institute Stating interactive plug-in unit includes interface document and interactive module, and the interface document is used to recognize mobile terminal operating system, the interaction Module, is sent by AJAX and asked, realize data interaction.

4. a kind of mobile terminal cross-platform development approach based on front end frame, it is characterised in that comprise the following steps：

S01：Basic page layout, network request packet, data loading, page navigation exploitation are carried out by front end frame, and Business logic processing is carried out, web page files are compiled into；

S02：The analysis result of webpage is passed through by calculating, imposition layout by browser, mobile device interface, color applying drawing is called Function debugging is carried out to user interface, data interaction is carried out with mobile terminal operating system hardware capability by interaction plug-in unit；

S03：Engineering to completion is packed, and can be run according to the mobile terminal operating system generation of identification under corresponding system Installation file.

5. the mobile terminal cross-platform development approach according to claim 1 based on front end frame, it is characterised in that institute State in step S02, when debugging feature code on webpage, when occurring network request, build cross-domain request adapter tool, lead to Cross cross-domain request adapter tool and local request is transferred to real URL addresses.