Background:

I have just returned from paternity leave. When I returned to work, I was hit in the head on my first day. My boss asked me to change a Web project into an app using Cordova. He also asked me to upload the app Store on the same day (╥╯^╰╥). I don’t know what cordova is, but I’m going to stick to it. Go ahead, Pikachu! This article only records my development process and steps.

Preparation stage:

Official document of Cordova

Download and install the Xcode development tool for ios

Android Platform download and install Android Studio development tools

Install Cordova

Cordova command line tool is distributed as NPM package. To install the cordova command line tool, perform the following steps:

  1. Download and install Node.js. Once installed, you can use it from the command linenode 和 npm 。
  2. (Optional) Download and install git Client if you don’t have one. Once installed, you can use it from the command linegit. This command line downloads resources from a Git repository.
  3. The installationcordovaThe module uses NodejsnpmTool.cordovaModule will benpmThe tool is automatically downloaded.
  • On OS X and Linux:
$ sudo npm install -g cordova
Copy the code
  • On Windows:
C:\>npm install -g cordova
Copy the code

To create the App

CD to the source directory and create your Cordova project. I created a project folder called cordovaApp on my desktop

~ $ cd /Users/elab/Desktop/cordovaApp 
~ cordovaApp $ cordova create hello com.example.hello HelloWorld 
Copy the code
  1. Where Hello is the filename of the created project
  2. Com.example. hello is the bundleId of the app
  3. HelloWorld is the default name of the app

Add the platform

  • IOS: Enter the hello folder ~ of the project you just created

Adding an iOS Platform

$ cordova platform add ios --save
Copy the code

$ cordova plugin add cordova-plugin-whitelist
Copy the code

And then running

$ cordova platform add ios --save
Copy the code

OK, iOS platform added successfully

Let’s see if the prerequisites for building APP on the platform are met

$ cordova requirements
Copy the code

Because my MAC has always been used for iOS development, the environment configuration that NEEDS to be installed is complete

  • The android platform
$ cordova platform add android --save
Copy the code

build

$ cordova build
$ cordova run
Copy the code

You can also build a separate version depending on the platform

iOS:

$ cordova build ios
$ cordova run ios
Copy the code

The android:

$ cordova build android
$ cordova run android
Copy the code

Possible plug-ins:

Adaptation full screen:

cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-splashscreen
cordova plugin add cordova-plugin-statusbar
Copy the code

Android version update: I. Implementation process of Android App upgrade

  1. Gets the local version number
  2. Request the server to obtain the server version number
  3. If the local version is inconsistent with the server version, a message is displayed asking you whether to update it
  4. The user determines the upgrade and calls the file transfer method to download the APK file
  5. Monitoring download progress
  6. After downloading, open Apk for installation

Ii. Plug-ins needed to automatically upgrade the APP

  1. Cordova – plugin – app – version github.com/whiteoctobe…
  2. Cordova — the plugin file – opener2 github.com/pwlin/cordo…
  3. Cordova — the plugin file – transfer github.com/apache/cord…
  4. Cordova plugin – file github.com/apache/cord…

demo:

index.html

<body>
    <div id="app"></div>
    <script src="cordova.js"></script>
</body>
Copy the code

index.vue

getVersion() {let that = this;
    cordova.getAppVersion.getVersionNumber().then(function(version) {// Obtain the server version (usually obtained through the interface) // Check whether the current version is the latest version that.downloadapp (); }); }downloadApp() {
        this.centerDialogVisible = false;
        Toast('Updating version');
        let that = this;
        let apkUrl = 'https://xxxx.com.release-app.apk'// ApK download linklet fileUrl = cordova.file.dataDirectory + 'test.apk';
        var fileTransfer = new FileTransfer();
        fileTransfer.download(
            apkUrl,
            fileUrl,
            function(entry) {
                that.tipString = 'File location:' + entry.toURL();
                cordova.plugins.fileOpener2.open(
                    entry.toURL(),
                    'application/vnd.android.package-archive',
                    {
                        error() {
                            // that.tipString = 'Setup file failed to open';
                        },
                        success: function() {
                            // that.tipString = 'Setup file opened successfully'; }}); },function(error) {
                // that.tipString = JSON.stringify(error) + ' ';
            },null,{}
        );
            // fileTransfer.onProgress(event => {
            //     // that.tipString = 'Start downloading progress';
            //     letnum = Math.ceil((event.loaded / event.total) * 100); // Convert to 1-100 progress //if (num === 100) {
            //         that.updateString = 'Download completed';
            //     } else {
            //         that.updateString = 'Download Progress:' + num + The '%';
            //     }
            // });
        }    

Copy the code

Of course, the actual development will encounter a variety of pits, I was also step by step over the pit. Next also want to make push service and sweep, again want to start all kinds of Baidu, all kinds of try…