How Web pages are packaged and closed into mobile apps

The so-called WebApp is an HTML page with the native app is a combination of an application, the development of this application can save a lot of costs, made out of the same app as the original, WebApp use the framework technology can let you have the feeling of using the app, specifically can see the Ping an bank app

Tools/Materials

• Computer
• Eclipse,git,nodejs,jdk,cordova
• A complete mobile website

Method/Step

2. Home must be ready to need things, such as Eclipse, a complete can browse the mobile website, and ensure that the computer Configuration good JDK, environment variables, but also to install the Cordova, these environments, such as the configuration here does not table, you can own Baidu. Here I would like to write a website to do a test, from the can be seen, this is a website can be viewed in the mobile site

4. With the site, the first step to create a new project, open the address of the project you want to save, such as the Yun folder D, press and hold the keyboard SHIFT + right mouse button, select "Open Command Window Here", will pop up a terminal command window, open and then enter Cordova create in the terminal Hello,hello for your project name, such as Cordova create Qianqian,qianqian is my project name, note, do not manually to create a folder, because we built in the terminal inside the project has a lot of configuration files, Terminal Command Window do not close

6. Enter the CD Qianqian in the Terminal Command window, enter the Qianqian folder, and then enter Cordova Platform Add Android, enter, wait for the download to finish, remember to make sure that Git is installed before downloading, or the download will fail. I personally test, download can take about 1 minutes, download completed after the Terminal command window do not close, etc.

8. After the download is completed will be ready to put the site into the WWW folder, the original file can be deleted, then open the Eclipse software, click on the menu bar File--import, pop up a window, select the following image options, click Next, then click Browse, Select the path of the Qianqian folder item, select, Remember, check box must be all selected, do not understand the picture below, and then make sure you can

10. OK then you will see the image below the two items on the left side, in order to ensure that the project is completed one time, we can enter Cordova prepare in the terminal window, input before making sure it is in the current Qianqian folder, this command is in the case of modification of the project run, waiting for him to run out , the second picture below is the one that runs the finished picture

12. OK, then you can pack webapp, back to eclipse, we found that the project file has a red fork, or there will be an exclamation point or something like this, you can click on the menu bar Project--clean, in the Pop-up window select the second single option, The following check boxes are all selected, do not understand the picture, confirmed after you can see the Red fork is gone

14. Then select the second item in the Project bar right-click on Run as--android application, then wait for about half a minute, mainly to see the computer running speed good, good words fast

16. Finally, if your phone is connected to a computer or your computer is on the Android virtual machine, the pop-up window will appear on your phone or virtual machine information, choose him again click OK, the system will automatically jump to the virtual machine, if it is the real machine, you can directly see your phone, mobile phone will automatically install the app app

18. If neither of them can be the pop-up window will be closed, and then in the software project bar in the second item has a bin folder, open, there is an apk, will he copied out to install to his own mobile phone or other machine on the line, is WebApp do the final effect, a start forget to upload pictures, Only uploaded the code, so there is no picture in the app, but the effect is finally out

How Web pages are packaged and closed into mobile apps