PhoneGap Hybrid APP Development (1) : First Android APK PhoneGap Hybrid APP development (2) : Framework7 + vue.js template PhoneGap Hybrid APP development Practical (3) : Media/File PhoneGap Hybrid APP development Practical (4) : API: Webview PhoneGap Hybrid APP Development Combat (5) : TBD

In the past, I have developed many Web applications, such as WECHAT public account RSS. But how do these apps become Android and Apple apps? Of course, you can open a browser directly on Android/Apple, but there are many advantages to native apps, such as being offline, being able to pack photos/audio resources, and so on. How to solve it? Hybrid apps have been popular, addressing the limitations of three-terminal (Web/ Android /iOS) development. Developers use normal HTML+JS techniques, combined with frameworks (UI: Framework7, front end: vue.js, back end: Flask), to develop Web applications for websites and then convert them into Android and ios apps with one click via Phonegap. Not demanding for performance requirements and prototype development, is the fastest, labor-saving process! Our special topic is ready to go through this extreme process together with you!

####1. Prepare the Android Studio development environment PhoneGap is a release version of Cordova. Similar to Linux Core and Redhat/Ubuntu/… The relationship between

See Android Platform Guide – Apache Cordova

  • Install Java SDK and set the environment variable JAVA_HOMEJAVA_HOME = "C: \ Program Files \ Java \ jdk1.8.0 _131"
  • Download Android Studio, time consuming… 1.8GB, decompressed 4~5G.
  • Set the environment variable Android HOMEANDROID_HOME=C:\Users\<ID>\AppData\Local\Android\sdk
  • Install AVD or real computer (directly connected to the COMPUTER USB, mobile phone to enable USB debugging)

  • Install the SDK corresponding to AVD, when the real machine is connected, you will be prompted to install the corresponding SDK

  • Create a New Project, and Run -> should open an Android Simulator and run your first Android APP

####2. PhoneGap Desktop

  • Install PhoneGap computer Desktop: http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/
  • Install App: PhoneGap Developer on your phone. This way, you can preview the PhoneGap Desktop on native Android or iOS directly by binding it to your App without building it
  • PhoneGap Desktop -> Create a new PhoneGap Project -> Select Framework7 template -> give a name

You can also use the phoneGap create pg-f7 –template framework7 command line

  • Serve this project to start, note the address at the bottom

  • Open Chrome: :3000 On your computer, you can quickly preview the effects of your app using Chrome. Switch between a browser or an analog phone (Android, Apple, iPad, etc.) via the top button. This will affect the value of myApp.device (Framework7) note: I added “Play1” to the interface. Chrome’s red alert is a safety warning for the plugin, so ignore it now

Here is the return value of myapp. device in different environments: – Chrome emulates Android phones: {” androidChrome “: true,” the “: false,” iphone “: false,” android “: true,” ios “: false,” OS “:” android “, “osVersion” : “5.1.1”, “the webView “:null,”statusBar”:false,”pixelRatio”:3.4999998807907104} – Chrome desktop: {“androidChrome”:false,”ipad”:false,”iphone”:false,”android”:false,”ios”:false,”webView”:null,”statusBar”:false,”pixelRa Tio “: 1.5}

- Android: Device: {" androidChrome ": ` true `," the ": false," iphone ": false," android ": ` true `," ios ": false," OS ":" android ", "osVersion" : "the 6.0.1", "the web View":null,"statusBar":false,"pixelRatio":3}Copy the code

3 Build APK in Android Studio

  • Open a terminal window, run PhoneGap CLI, and add platform support:
phonegap plugin add cordova-plugin-media --save
phonegap platform add android browser
Copy the code
  • Open Android Studio, Import Project (Eclipse…) , point to Phonegap: //platforms/android

  • Run -> Select AVD from ‘Run’ and ‘Run’ The same page as Chrome should appear on the phone, and it is Native Android!

4. Customize your Android APK

Add Splash and custom icon

Refer to Android Splash Screen Example Using Android Studio icon Workshop – Mobile app icon generation tool to generate all sizes of app ICONS in one click

  • Prepare the icon and Splash
  • New: / android/res/layout/splash. The XMLandroid:background="@drawable/screen"
  • New: / android/Java/com. Phonegap. The helloworld/SplashScreen Class

Modified APK name: / < project name > / platforms/android/res/values/strings. The XML

5. APK is derived

Android Studio -> Build -> Build an Apk. Ten seconds out, our little program, packaged only 2MB. Then, you can happily share with your friends. If you want to release on the market, but also need to sign, temporarily not table.

6. The structure of Hybrid APP is as follows:

/ WWW /js/my-app.js/WWW /static/

Next step: Develop your own vue.js Hybrid APP