Yes, I'm in a new pit again. I think when I was in college, web-app just became popular, and I also helped to make the web-app page of our school infirmary system. The time was too tight and finally a complete version was not released. At that time, I just used H5 to simply make the web. Part of it was thinking of using phone-gap as a three-terminal, and then it was nothing if I didn't get it started. During my internship, I also made a web-app and imitated WeChat page. So when I first came here to do Ext.js, I was quite confused, crying, and having to change the background code. My mentality was a bit explosive. Now I think it's okay. So let me do this, I am quite happy~~~
References are provided first:
Install Android studio : http://www.jb51.net/article/77219.htm
Enter BIOS to open VT-x : https://jingyan.baidu.com/article/49711c6168a212fa441b7cf4.html
Ionic basic commands : https://blog.csdn.net/yucihan/article/details/54631747 (The latest command is to change ionic xxx to ionic cordova xxx)
安装gradle：https://www.cnblogs.com/crazyprogrammer/p/6958462.html
It will be recorded from the very beginning.
First, let me explain the version I currently install: cordova v8.0.0 ionic v3.20.0 Node v8.4.0 Android v8.1.0 JDK jre1.8.0_71
1. Installation environment
1. Install JDK
①Download address: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
find the corresponding version
accept the agreement
②Double - click the installation-next-next -...- finish
2. Install Android Studio (in fact, it is mainly SDK, but the official website cannot find an independent SDK installation package, so just go to AS simply and rudely)
①Download address: https://developer.android.google.cn/studio/index.html
Find the corresponding version and download it
②Installation (the screenshots are long, some less important processes may not be pictured, and there is a little text description)
a. Install the basic components
Choose the first standard, the second is custom
Choose a compiler theme skin
Install~~~ Wait for [Next] to light up and click it until
Select the components you want to install, and select the others if there are any. Different from my page, it is recommended to see the Android studio installation tutorial at the top of my [References].
b. New project
Go here to explain half the success, let you build a project to see
Name and place the project
Install Android Studio, folder location optional
I reported an error here because the sdk was not installed before, click the error message link to enter the installation
accept
SDK installation ~~ After installation [Finish] can be lit
Go back to the project and find that Error is gone
c. Create an emulator to display the project
Finally got to this point and found the warning. No, this is because the virtual option in the computer BIOS is not turned on. Just open it
③ Enter the BIOS to open the virtual VT-x
First of all, Baidu your computer model, find the way to enter the BIOS . I am Lenovo ThinkPad T460 here, press F1 to enter the BIOS, switch to the security page, select the visualizaiton option shown below, press Enter to enter the change options interface, we select enabled , which means to turn it on, after completing the change, press f10, save and exit, the computer will restart again.
Detailed operation reference link: https://jingyan.baidu.com/article/49711c6168a212fa441b7cf4.html
3. Install NodeJs
①Download address: https://nodejs.org/en/
②Installation (the next step is until it is completed. Select the folder to place the file is optional )
4.npm download and install cordova and ionic
①. Download and install cordova
Command: npm install -g cordova
Check whether the installation is successful command: cordova -v
②. Download and install ionic
Command: npm install -g ionic
Check whether the installation is successful command: ionic-v
2. Create a new project
①Create a new blank project
Command: ionic start demo_project blank
You can also create tabs or sidemenu type projects, the commands are:
Ionic start demo_project tabs
Ionic start demo_project sidemenu
②Add Android platform and compile Android
First enter the blank project directory we created, command: cd demo_project
Add android platform command: ionic cordova plateform add android
Compile android command: ionic cordova bulid android
③Run Android
Run the emulator command: ionic cordova emulate android
Real machine run : ionic run android
Desktop browser to run the test: ionic serve
3. Record of possible problems
1. I encountered a problem when adding the Android platform:
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
如图
Probably means to install Gradle. I suspect this problem is because I did not manually configure the Android_HOME environment variable and modify the Path when installing AS on this machine, but it is very easy to solve. We have installed this Gradle when installing AS. Come in, find the Android folder, find Gradle, and copy the path D:\Android\Android Studio\gradle\gradle-4.1\bin to the system environment variable Path .
[ This PC ] Right-click [ Properties ]--select [ Advanced System Settings ]
Find [ Environment Variables ]
Find the variable【Path】--【Edit】
Add the path of gradle, [ New ]-- Copy the path in--[ OK ]
Then we open the command box to view [ gradle -v ]
There should be no problem installing it.
2. An error is reported when opening a project with a lower version (eg: ionic 1.x) : [ERROR] Sorry! ionic serve can only be run in an Ionic project directory. Or warning [WARN] ionic.project file found in D: \front-work\ionic\chapter5--please rename it to ionic.config.json,or your project directory will not be detected!
It probably means to detect that the [ionic.project] file is in the project and rename it to [ionic.config.json]
Just change the name, and then run it again, you will be prompted whether to rewrite the [config.xml] file, select [y].
=============================== At present, the environment is set up first, then you can start writing code, and continue later== =================