As we all know, the completion of front-end development webapp can only run on the browser, there are certain restrictions on the operating environment, which is in addition to other environmental browser does not support; so now if there is such a demand for it? Require three-terminal set of code to run it? Three-terminal operation (black face ??) Yes, the three-terminal end of the run, ie web, Android and IOS end end; do not rush to say and can not achieve impossible, to try to take advantage of HBulder;
HBuilder is DCloud (Digital Paradise) launched a support HTML5 Web development IDE. Write HBuilder of uses Java, C, Web and Ruby. HBuilder body itself is written by Java. It is based on Eclipse, so let it be compatible with the Eclipse plug-ins. In fact, just a HBuilder editor, with more abundant grammatical libraries, support for Vue's more friendly, lightweight and powerful tool;
Official website address: https: //www.dcloud.io/
First we do some preparatory work:
HBuilder complete download and install
the complete development of the webapp use webpack complete package
after downloading 360 mobile assistant, easy to install complete package to run on the phone to see results
1. First we get our webapp up and running, there is no confirmation of abnormal use webpack package, will produce the webpack packaged dist / directory (named according to webpack, containing index.html and static / directory)
2. Open HBuilder, then click File - New - Mobile App, Mobile App to create a blank template;
3. Once you've created a mobile App blank template, we can see our changes to this folder path (you can delete css, js, img folder, etc.)
4. npm run build (after packaging) generated index.html contents all copied into the index.html Hbuilder go inside, static / directory to the generated copy of the item HBuilder directory, directory structure at this time is our of:
5. Open index.html inside the static reference will behind = '/' removed
6. Click your browser to run, to see if there is abnormal, if not abnormal, then we go down; HBuilder support cloud packaging and off-line packaging, paper packaging for the time being only about the cloud
7. Project folder, right - Release - click on Cloud Packaging - playing native installation package, packaged according to the version (Android and IOS) needed
8. prompt matter, just click sure you have permission to continue packing
9. After submission to the cloud, directly point to determine, such as the production installation package, there may need to wait two or three more minutes, please be patient complete package
10. Click Manual download you can download our pack a good apk
11. Here we can use the phone emulator to install apk application can also be used to install 360 mobile assistant, let 's get 360 phone assistant installation: Managing my phone - local application installation - Select to install the apk, then can be installed; in fact, 360 assistant is only a means, the focus is apk, of course, the phone can send apk by install micro letter assistant;
12. This is the app after we finished packing, running speed is relatively smooth, take up memory size is also good, after packing finished only a 30 + M; functions are normal, just part of the layout slightly compared with the webapp freshman little, almost negligible (the picture is a screenshot effect because, so a little squeeze to see results after completion of packing is normal)
Native app and webapp difference HBuilder packed:
1, the high cost of native app development, the experience is good, relatively speaking, webapp experience relative to almost, but low cost;
2, HBuilder packaged webapp physical click the back button will exit the program, and not a native app;
3, HBuilder packaged webapp generally difficult in the App Store on the line, because Apple store is now very strict auditing;