Hybrid app development, H5 page invoke iOS native app interface

Source: Internet
Author: User

Hybrid app development, the front-end development H5 page, will inevitably pull in the compatibility, in the page compatibility colleagues, will have some data interaction with the native app;

Hybrid app development, Android compatibility is to say, Android use is the Chrome browser core, is already very good compatibility H5 page, and the operating mechanism is able to run synchronously, but iOS is not so easy;

I'm not talking about Android-compatible issues, just talking about iOS.

Problem 1:h5 Call iOS interface, iOS need to initialize, JS code only run once on ISO

Solve:

I use the H5 page which is angular frame

var ua = navigator.userAgent.toLowerCase ();         if (/iphone|ipad|ipod/. Test (UA)) {            $rootScope. $on ("$locationChangeSuccess",function() {                parent.location.reload ();            })        }

It means that every time the HH5 page is loaded successfully, it is refreshed once;

Problem 2:ios is initialized only once, this is due to the internal mechanism of iOS itself, iOS execution code is stored in the cache once, but JS needs to be executed again, otherwise the function can not be realized;

Solution: ISO initialization is performed only once, which is the mechanism of iOS itself and cannot be changed;

Call other interfaces, can only be executed in the function of the first initialization, that is, each JS file can only have one iOS initialization, and other about the need to initialize the operation of the things are written in the initialization function;

function Connectwebviewjavascriptbridge (callback) {if (window.                    Webviewjavascriptbridge) {callback (Webviewjavascriptbridge)} else { Document.addeventlistener (' Webviewjavascriptbridgeready ', function () {Callback (Webviewjavascript Bridge)}, False)}} Connectwebviewjavascriptbridge (function (Brid GE) {bridge.init (function (message, responsecallback) {var data = {' Javascript Respond                    S ': ' wee! '} Responsecallback (data)}) Bridge.registerhandler (' Testjavascripthandler ', function (data, RE                    Sponsecallback) {var responsedata = {' Javascript Says ': ' Right Back atcha! '} Responsecallback (ResponseData)}) Bridge.callhandler (' interface name ', {': ' Interface name ') , ' body ': {"Interface name": ' 111 '}}, function (response) {//Interface request data operation}) $ ("Body"). Click (Fu Nction () {bridge.callhandler (' interface name ', {': ' Interface name ', ' body                           ': {' interface name ': ' 111 '}}, function (response) {//Interface request data operation                     })                    })            })        }

Including the click Operation Request interface should be placed in the initialization function;

The above content for their own summary, error please point out, declined to copy reprint

Hybrid app development, H5 page invoke iOS native app interface

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.