H5 взаимодействует с APP!

внешний интерфейс GitHub Операционная система Apple

В настоящее время роднойAPPв основном разделеныIOSа такжеAndroidДве категории.IOSНечего и говорить, операционная система, созданная Apple исключительно в США, чтобы конкурироватьGoogleот компанииAndroidоперационная система. какое еще просоMIUI, выбитьSmartisan OSПодождите, некоторые из них являются основнымиAndroidРеконструированный, то есть нижний слой все ещеAndroid.

Конечно, теперь, когда передняя часть горит, следует следующее.H5а такжеAPPвзаимодействия становятся более частыми.H5звонитьAPPКак работает нативный метод?APPзвонитьH5Как должен работать метод? Далее мы объясним их один за другим!

H5а такжеIOSвзаимодействовать

Заявление: Поскольку я не делаюIOS APPОн был разработан, поэтому с ним можно ознакомиться только здесьIOS APPРазработчики, надеюсь вы укажете на ошибки.

из-заIOS APPразработан сReactiveCocoa. ЭтоReactiveCocoaчто это такое? ДелатьIOS APPСтуденты, разработавшие его, не должны быть незнакомы, это приложение с открытым исходным кодом Github.IOSа такжеOSразработан новый фреймворк,CocoaЭто аббревиатура полного набора фреймворков Apple, поэтому многие фреймворки Apple любят начинать сCocoaконец. Для уточнения можно отправиться на исследование.

Далее, наступает момент! !

1. Приложение для настройки H5

IOS APP
 /*! @abstract Adds a script message handler.
     @param scriptMessageHandler The message handler to add.
     @param name The name of the message handler.
     @discussion Adding a scriptMessageHandler adds a function
     window.webkit.messageHandlers.<name>.postMessage(<messageBody>) for all
     frames.
    */
    open func add(_ scriptMessageHandler: WKScriptMessageHandler, name: String)

Этот код примерно означает: добавьте метод обработки сценария сообщения, первый переданный параметр — это добавленный метод обработки сообщения, а второй параметр — имя добавленной обработки сообщения.

private (set) lazy var  webView: WKWebView = {
    //初始化一个 WKWebViewConfiguration
    let configuretion = WKWebViewConfiguration()
    configuretion.preferences = WKPreferences()
    configuretion.preferences.javaScriptEnabled = true
    configuretion.preferences.javaScriptCanOpenWindowsAutomatically = false
    
    //在 configuretion.userContentController 注册消息处理方法
    configuretion.userContentController = WKUserContentController()
    
    //注册uploadImage方法
    configuretion.userContentController.add(self, name: MessageHandlerName.uploadImage.rawValue)
    
    //注册login方法
    configuretion.userContentController.add(self, name: MessageHandlerName.login.rawValue)
    
     //注册home方法
    configuretion.userContentController.add(self, name: MessageHandlerName.home.rawValue)
    
    //初始化一个 WKWebView 并将配置参数传入
    let view = WKWebView.init(frame: .zero, configuration: configuretion)

    return view
}()

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    let name = MessageHandlerName.init(rawValue: message.name)
    
    switch name {
    case .uploadImage?:
        //通过 message.body 获取 h5 传递的参数
        if let uploadType = message.body as? String {
            imageType = uploadType
        }
        
        // do your something
    case .login?:
        // do your something
    case .home?:
        // do your something
    default:
        break
    }
    
}
H5
window.webkit.messageHandlers.zrbCallUpload.postMessage(this.type)
window.webkit.messageHandlers.login.postMessage(true)
window.webkit.messageHandlers.home.postMessage(true)

window.webkit.messageHandlers APPМодуль обработки сообщений, зарегистрированный в среде

zrbCallUpload APPЗарегистрирован специальный метод прослушивания сообщений

Вызов здесь является обязательным параметром.

2. Приложение настраивает H5

APPТунH5Суть метода заключается в склеивании возвращаемых параметров.

APP
let js = "callUploadHtml(\(JSONString!), \"\(self.imageType!)\")"
self.webView.evaluateJavaScript(js, completionHandler: { (_, _) in
                    
})

Примечание. При передаче здесь строки она должна быть заключена в кавычки, иначе вызов завершится ошибкой.

H5
    window.callUploadHtml = function(dataObj, uploadType){
        //do your something
    };

Уведомление:

  • 1,H5определениеAPPВызываемый метод должен быть вwindowглобально иначеAPPне могу позвонить
  • 2. здесьH5Принятый параметр должен быть таким же, какAPPСуществует однозначное соответствие между параметрами, переданными вызовом.

специфическийdemoАдрес можно посмотреть https://github.com/littleLane/cross_ios_h5

H5 взаимодействует с Android

1. Приложение для настройки H5

APP
    webView = (WebView) findViewById(R.id.web_H5Activity);
    progressBar = (ProgressBar) findViewById(R.id.progressBar_h5show);

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new JavaScriptObject(), "postMessage");

APPКод, установленный сбоку, примерно такой, получитьwebViewзатем установитеsetJavaScriptEnabledдляtrue, и добавитьaddJavascriptInterfaceконтролировать, установить глобальныйJavaScriptметод обработкиpostMessage.

Далее определитеJavaScriptObjectкласс и добавьте класс, с которым вы хотите иметь делоJavaScriptМетод для вызова, пример выглядит следующим образом:

class JavaScriptObject {
    @JavascriptInterface//上传头像
    public void zrbCallUpload(String paramer, String returnFun) {
        //do your something
    }
    
    @JavascriptInterface//登录
    public void zrbLogin(Object paramer) { // TODO: 2018/1/11
        //do your something
    }
    
    ....
}

сюдаAPPДело сделано, посмотрим, как с этим справится передок!

H5
window.postMessage.zrbCallUpload(param1, param2);
window.postMessage.zrbLogin(param1);

Две строки кода вышеH5мелодияAPPДа, хотя это выглядит очень просто, следует отметить несколько моментов:

  • 1,windowСледующий метод должен бытьAPPОпределенный метод мониторинга, здесьpostMessage

  • 2. Метод мониторингаpostMessageДалее следуют конкретные методы логического вызова.zrbCallUploadа такжеzrbLogin

  • 3. Параметры здесь должны быть такими же, какAPPХорошо там, иAPPТам есть согласованность, будь то количество параметров или тип параметров. (Лучше так, иначе хрен его знает, что пойдет не так)

Приложение настраивает H5

H5

существуетH5здесь заранее в глобальномwindowчетко определенныйAPPСпособ обратного звонка.

window.callUploadBack = function(params){
    // do your something
}

Имя функции здесь должно быть таким же, какAPPВызовы согласованы, и передаваемые параметры также должны быть согласованы, будь то количество параметров или тип параметров. (Лучше так, иначе хрен его знает, что пойдет не так)

APP
String js = "javascript:" + returnFun + "(" + params + ");";

webView.loadUrl(js);

  • Имя функции, вызываемой returnFun

  • params возвращаемые параметры

Обычно это решается здесь, вH5передачаAPPметод по мере необходимостиAPPМетод обратного вызова передаетсяAPP, если не требуетсяAPPНет необходимости передавать обратный вызов. Потом,APPПо этому параметру на сплайсинг вызываться обратноH5изJavaScriptкод, как код выше.

Категории