Shulou(Shulou.com)06/02 Report--

This article Xiaobian for you to introduce in detail "what is the method of hybrid mobile App development in Android", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the method of hybrid mobile App development in Android" can help you solve your doubts.

1-what is hybrid mobile App development

How is the software on Apple developed: using OC or Swift

How is the software on the Android platform developed: developed in Android-related languages, Java, Android controls

How is the common software developed on Apple and Android platforms: Tencent recruits two sets of developers [development team], mobile phone JD.com

Front-end mobile App (Application) development technology to develop mobile-side applications

The front-end hybrid mobile App development technology does not use the development platform and development method officially recommended by Apple or Android, but abandons the official way to use the front-end unique technology for mobile App development experience.

What is mobile App development: the popular understanding is to put the technology of developing Web website

(HTML+CSS+JS), in some way, transplant to mobile App development for use. This way of using Web development technology for mobile development experience is called hybrid mobile App development!

There are several concepts you need to know about mobile App development:

Native development: its English word is (NativeApp), which refers to the way to develop mobile phone App using IOS, official tools, development platforms and supporting languages provided by Android

Mixed development: (HybirdApp) is to use the existing front-end technology, HTML + CSS + JS, and then with some related packaging and compilation technology, you can develop a mobile phone App, install it into the phone and use it.

What is App:App (short for Application), meaning: installable applications

Classification of App:

Divided by platform:

PC side: browser, code editor, PC games, listening to music, watching video, chatting

Mobile: Mobile QQ, Mobile Wechat, Mobile iqiyi, Dead Pesticide

Divided by function:

Game: angry chicks, plants vs. zombies, dead pesticides. LOL

Applications: non-game software, Alipay, Momo, Meituan takeout,

The difference between App and Web:

APP concept: App is (short for Application), meaning: installable application

Advantages: smooth, stable, basically some App can be run offline, good user experience

Disadvantages: not cross-platform

Web concept: specifically refers to those browser-based web sites (essence: Web pages)

Pros: cross-platform (browsers are inherently cross-platform)

Disadvantages: no App is smooth and unstable, limited by network speed and network

The essential difference between the two types of APP development:

2-Why learn mixed App development to analyze from a programmer's point of view:

Make more money (others won't, you will, others will, you are proficient)

For job hunting: (React Native) the market is in great demand, so it is easy to find a job and improve the competitiveness of our industry.

Access to popular front-end technologies and frameworks (almost all major companies re-use React). Note: we all use ES6 syntax (class) in React.

The front end is an eternal industry. (as long as there are browsers in the world, we must need the front end, but with the passage of time and the upgrading of technology, we may have higher requirements for new technologies.)

The road to the rise of losers: can only do pages-> Ajax foreground and background data exchange-> Jquery, Bootstrap-> webApp-> three frameworks-> can do mixed App/ desktop applications on mobile phones-> can do native App on mobile phones-> may launch rockets and launch satellites in the future, bomb-> the ultimate goal: unify the universe

(engage in front-end App development) be able to buy a number of powerful devices [Apple laptop, IOS tester, Android phone (Samsung, Huawei, Xiaomi)]

Analysis from the point of view of the enterprise: (choose the right way to develop mobile App) [key]

Save development cost

In terms of wages: squeeze the surplus labor force of employees as much as possible

In terms of time: because of the native Android and IOS development, their development efficiency is not very high, because the native code complexity is relatively high, so the native development cycle is relatively slow; if we use mobile App development, then our development cycle will be very short; because HTML + CSS + JS is simple enough (for the front-end development of APP, there are two ways, of which, the earlier one, which is also a relatively simple one, is to develop a website first, and then run a single line of packaged commands to get an APP.)

1. Common ways of App development in the market

WebApp:**** is a browser-based website with specific functions, called WebApp.

For example: Baidu brain map, https://m.jd.com/, https://m.taobao.com/#index

Advantages: cross-platform

Disadvantages: relying on the network, there is a white screen effect, relatively speaking, the user experience is poor; can not call the underlying hardware devices, such as cameras

Applications developed by NativeApp:**** in native languages such as android and Object-C

Advantages: good experience; smooth use by users; very suitable for playing games [high performance]; can directly call the API at the bottom of the hardware

Disadvantages: not cross-platform

HybirdApp:**** uses the knowledge learned from the front end to develop mobile App, which has the advantages of both.

Advantages: ability to cross-platform; experience will be better; can also call the underlying hardware API

Disadvantages: slightly weaker than the native experience; not suitable for games; suitable for non-game type mobile phone App

Application scenarios:

Note: using Java or IOS written code and programs, in the final run, ordinary text code will be compiled into native machine code to run, unlike JS, parsing execution, Java code is compiled and executed

The principle and comparison of three development methods

3-how do enterprises choose their own way of App development

If some APP has been developed using native technology in this enterprise, it is necessary to use native technology to maintain

If the enterprise needs to do some game-level applications, then it is recommended to use native, because the native operation efficiency is high, and the power consumption is handled very well.

If enterprises do some application-level non-game software, such as Taobao, JD.com and Meituan, they can use hybrid APP.

In an enterprise, the most important thing is a good idea. If you have a good project on file, it is best to work on the project immediately. At this time, it is very appropriate to use hybrid App, because the development cycle is very short, can be launched quickly, and occupy the market first; [underpants development]

4-Project development process in the enterprise

Demand research: product positioning, audience groups, market demand, development value; [product: demand document]

Product design: functional modules, process logic; [products: design documents, interactive drafts] to determine the basic functions of the project

Project development: project architecture, art, front-end, background, testing [product control] to understand the concept of front-end separation

Operation and maintenance: online trial run, Bug tuning, fine tuning function module, product iteration

Design according to demand, develop according to design

5-Enterprise technology selection-the relationship between several mainstream technologies 1. Angular.js and Ionic

Angular1 official website

Angular2 official website

Ionic Chinese website

Ionic English official website

2. Vue.js and Weex

Vue.js official website

Weex document

Weex-github address-New

Weex-github address-Old

3. React.js and React-Native

React.js English official website

ReactNative Chinese website

ReactNative English website

Angular, Vue and React are all front-end frameworks. When we develop mixed App, we only use the basic syntax of these three frameworks. Ionic, Weex and ReactNatvie are all packaging tools (relevant command lines are provided, and as long as you run the specified command, you can package the project into a mobile phone App), which can finally package our developed applications into an installable mobile program installation package; at the same time, these three things also provide some useful widgets for us to build a mobile App user interface.

6-Front-end hybrid App development framework

Html5+ 、 ReactNative 、 Weex 、 Ionic

Get to know HTML5+

H6 + is an industry alliance with some Internet members who specialize in promoting H5 in China.

HBuilder official website

7-differences between development frameworks

Html5+ and Ionic

ReactNative and Weex

8-use HBuilder to generate Android applications (online)

Hbuilder is an online packaging tool, which is easy to use and does not need to configure the development environment locally; directly package the finished website into an App online through some simple operations; right-click on the project-> release-> release as a native installation package

Advantages: local development environment does not need to be configured; easy to operate, programmers do not care about the packaging process, and the packaging process is transparent to us.

Disadvantages: programmers rarely interfere with the packaging process; the source code is submitted to the cloud server, and there is a risk that the core code of the project will be leaked

9-use of environment variables

Purpose: configure tools or applications that need to be used globally into Path environment variables, and you can easily run them wherever you want to run them on the command line.

10-Mobile App development environment configuration [key] 10.1-install the latest version of java jdk

Modify the environment variable and add the system environment variable of JAVA_HOME with a value of C:\ Program Files (x86)\ Java\ jdk1.8.0_112, that is, the root directory where JDK is installed

Modify the system environment variable Path and add% JAVA_HOME%\ bin;%JAVA_HOME%\ jre\ bin after Path

Create a new system environment variable CLASSPATH with a value of.;% JAVA_HOME%\ lib\ dt.jar;%JAVA_HOME%\ lib\ tools.jar

Save all the system environment variables and exit the system environment variables configuration window at the same time, then run the cmd command line tool and enter javac. If the command option for javac appears, the configuration is successful!

10.2-install the Node.js environment

Note: the latest long-term stable version needs to be installed, not the experimental version. After installation, node.js will be automatically configured to the global system environment variables. After installation, you can enter node-v to view the node version number.

10.3-install the C++ environment

In most cases, the operating system comes with a C++ environment, which does not require manual installation of the C++ environment; if an error is reported, you need to manually install the C++ environment in visual studio

10.4-install the Git environment

After Git is installed, it is automatically configured into the system environment variable; you can check whether the environment variable of Git is installed and configured correctly by running git-- version

10.5-install the Python environment

Note: when installing Python, you can only install version 2. ×. Check Add Python to path on the installation interface, so that Python can be automatically installed into the system environment variables.

After the installation is complete, you can run python on the command line to check that python has been successfully installed.

10.6-configure the Android environment

To install installer_r24.3.4-windows.exe, it is best to manually select the android directory under disk C

Open the installation directory, decompress android-25 and android-23 (which react-native must depend on), and put them in the platforms folder

Extract the platform-tools and put it under the platform-tools folder

[just ignore this step! ] the tools folder is fine without unzipping the overlay; unzip the tools and put it in the installation root directory

Extract build-tools_r23.0.1-windows.zip (which react-native must depend on), build-tools_r23.0.2-windows.zip (weex must depend on this) and build-tools_r23.0.3-windows.zip, and rename the extracted folders to version numbers 23.0.1, 23.0.2 and 23.0.3, respectively. Create a new folder build-tools in the installation directory, and rename the folder after the version number to the newly created build-tools folder

In the installation directory, create a new extras folder and a new android folder under the extras folder; extract the m2responsitory folder and support folder and put them under the new extras-> android folder

Configure the installation environment variable: create a new ANDROID_HOME in the system environment variable with a value of android SDK Manager installation path C:\ Users\ liulongbin\ AppData\ Local\ Android\ android-sdk, immediately after adding it in Path;% ANDROID_HOME%\ tools;%ANDROID_HOME%\ platform-tools

11-ReactNative Rapid Packaging

After installing node, it is recommended to set up a npm image to speed up the later process (or use scientific Internet access tools). Note: do not use cnpm! The path of the module installed by cnpm is strange, and packager can't recognize it properly!

`npm config set registry https://registry

After reading this, the article "what is the method of hybrid mobile App development in Android" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.