preface

HybridApp refers to the application developed by combining native and front-end languages. HybridApp can run on Android and iOS, but cannot be used on PC, which is called HybridApp.

First, compared to native APP development, mixed development has the following advantages and disadvantages

Advantages:

(1) Low development cost

(2) Compared with the native Web interface version, the update is fast and the maintenance is relatively simple

(3) A set of code can support Android and iOS

(4) Be able to call native functions and apis

(5) Relatively good stability

(6) Better user experience

Disadvantages:

(1) The native function call of mobile phone is limited

(2) Loading is limited by the network environment

(3) Complicated lists and styles are difficult to implement

Mixed development is a development mode of learning from each other’s strengths and making up for each other’s weaknesses. The native code uses Web View plug-ins or other frameworks to provide containers for H5. The main business implementation and interface display of the program are implemented by using Web technologies related to H5. For example, APPS such as JD.com, Taobao and Jinri Toutiao all use the mixed development model.

How to quickly complete a hybrid APP

We provide a set of JS and Native interaction specifications, front-end through JS, can call Native functionality. Just introduce Supconit :// hcMobile.js into the page (no download required).

We also provide a variety of native plug-ins that can be called directly, such as camera, recording, location, Bluetooth and other system functions, as well as many extensions such as third-party login, Baidu text recognition, voice dictation and so on (click to view the API).

Call camera function example code:

Js <script SRC ='supconit://hcmobile.js'></script><script>// Listen 'deviceready' event document. AddEventListener (' deviceready ', onDeviceReady, false)function onDeviceReady(){navigator.camera.takePhoto(function(success) { alert(JSON.stringify(success)); }, function(error) { alert(JSON.stringify(error)); },true,1024); }</script>Copy the code

Sample data returned after taking a photo:

{ "fullPath": "file:///private/var/mobile/Containers/Data/Application/6D266368-6960-4C75-8DCB-EC3D2F37A9AF/tmp/IMG_0443.jpeg", "thumbLocalURL": "cdvfile://localhost/root/private/var/mobile/Containers/Data/Application/6D266368-6960-4C75-8DCB-EC3D2F37A9AF/tmp/IMG_04 43_thumb. Jpeg ", "lastModifiedDate": 1584342725384.5444, "size": 1024276, "localURL": "cdvfile://localhost/temporary/IMG_0443.jpeg", "type": "image/jpeg", "name": "IMG_0443.jpeg"}Copy the code

Once we get the data back, we can use JS to call the photo Preview plugin to display the photo we just took.

/ / photo function photo () {if (ready = = = true) {the navigator. Camera. TakePhoto (function (success) {photoData = success photoPreviewer() }, function(error) { // alert(JSON.stringify(error)); },true,1024); }} / / picture preview function photoPreviewer () {the navigator. PhotoPreviewer. Preview (photoData fullPath, function(success) { },function(error) { alert(error); }); }Copy the code

So far, a simple front-end engineering is completed, how to test, and how to package into Android, iOS side?

Don’t worry, the next step is simpler, just create an application on the mobile platform, upload our front-end engineering compression package, and use the default configuration.

Once that’s done, add the two plugins we just used, photo and Image preview, which I’ve already added.

I am an Android phone. Here, I only choose to pack an Android APP for testing. Click “Pack”, wait for the package to complete, and scan the code to install.

After installation, the home page displays the effect

Click on the photo

Click photo done to display the picture taken

If there are exceptions, the DE debugging tool is also available, with a three-minute tutorial (click here).

After the test is completed, you can also pack the Android and iOS terminal to the app market and The Apple Store