Since h5 application development is not the focus of this example, a simplest h5 application code is provided directly. This application is developed using the vue-cli framework
This h5 application is called vue1, open vue1 with webstrom, and perform npm install installation reference
The vue1 code can be downloaded from Baidu network disk: link: https://pan.baidu.com/s/1eSq71IU Password: 1spk
PS: This set of code will report an error when npm install
It can be solved by running the following command:
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
Then run dev to test the development environment
See > Listening at http://localhost:9000 indicates success, then visit http://localhost:9000 in the browser
See this description, so the vue program is normal, and then ready to package into apk with cordova
First package the vue application
The packaged output files are all under the dist folder
Then go back to capp1, capp1 has the www directory
Open another webstrom (this webstrom is named www), and the opened directory is this www folder
PS: The following will also open multiple webstrom and as, in case of confusion, each has a separate name, be careful not to make a mistake
After opening, first delete all existing files in www except index.html
After deletion
Copy the files packaged by vue1, except the index.html file, to the www folder
effect after copying
Then open index.html and make several modifications
First add a reference to a css file in the head section (that is, the packaged file just copied, note that these file names have a string of random text)
Add <meta charset="utf-8"> to meta
PS: otherwise the Chinese will be garbled
This css file reference is deleted
delete this div
Add a div with an id called app
Delete this js file reference
Add the following js file references
To the end of this index.html editing
PS: All the file modifications in the www folder above are to copy the h5 program (that is, vue1) to the cordova directory as the cordova packaged apk file
PS: The original file in the www directory is the demo of the h5 application that comes with cordova, which can be used as a reference
PS: The index.html file of the www directory is not overwritten but changed on the original basis, because this page for cordova is different from the general html page format and configuration
Then start cordova to package apk, enter the directory of capp1 from the command line, and run the command cordova build android
After the success, you can see the path of the packaged apk file. This file can be copied to the mobile phone to install and run. If you only need to package the apk, this is the end.
The program packaged by cordova can also be debugged with as, go back to the as of capp1 and build it
PS: Be sure to build it manually once
Then plug in the phone and start debugging, you can see that it opens in the browser with vue1
For ordinary cordova application developers, this is generally enough, and the following shows more complex development scenarios