1. PingCode智库首页
  2. 百科

原生怎么调js方法

Edit2 • • 百科

原生怎么调js方法

原生怎么调JS方法

在原生应用中调JS方法可以通过WebView交互、桥接库、注入代码、通过URL Scheme等方法实现。其中，通过WebView交互是最常见的方法。WebView是一种将网页嵌入到移动应用中的控件，通过它，原生应用可以与嵌入的网页进行双向通信。下面将详细展开如何通过WebView交互来实现原生应用调用JS方法。

一、WebView交互

1、什么是WebView

WebView是一种用于嵌入网页内容的控件，广泛应用于Android和iOS应用中。通过WebView，开发者可以在移动应用中嵌入HTML、CSS和JavaScript，实现更灵活的界面展示和功能扩展。

2、在Android中使用WebView

在Android中，WebView是一个非常强大的控件，允许你加载和显示网页内容。以下是一个基本示例，展示如何在Android应用中使用WebView并调用JavaScript方法：

import android.os.Bundle;


import android.webkit.WebSettings;


import android.webkit.WebView;


import android.webkit.WebViewClient;


import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    private WebView myWebView;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        myWebView = findViewById(R.id.webview);


        WebSettings webSettings = myWebView.getSettings();


        webSettings.setJavaScriptEnabled(true);


        myWebView.setWebViewClient(new WebViewClient());


        myWebView.loadUrl("file:///android_asset/index.html");


    }


    private void callJavaScriptFunction() {


        myWebView.evaluateJavascript("javascript:myJSFunction()", null);


    }


}

在以上代码中，我们首先创建了一个WebView实例，并启用了JavaScript支持。然后通过evaluateJavascript方法调用了JavaScript函数myJSFunction。

3、在iOS中使用WebView

在iOS中，WebView控件称为WKWebView，同样可以用于嵌入网页并调用JavaScript方法。以下是一个基本示例：

import UIKit


import WebKit


class ViewController: UIViewController, WKNavigationDelegate {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


        webView = WKWebView(frame: self.view.frame)


        webView.navigationDelegate = self


        self.view.addSubview(webView)


        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {


            webView.loadFileURL(url, allowingReadAccessTo: url)


        }


    }


    func callJavaScriptFunction() {


        webView.evaluateJavaScript("myJSFunction()") { (result, error) in


            if let error = error {


                print("Error calling JavaScript: (error)")


            }


        }


    }


}

在以上代码中，我们首先创建了一个WKWebView实例，并将其添加到视图层次结构中。然后通过evaluateJavaScript方法调用了JavaScript函数myJSFunction。

二、桥接库

1、什么是桥接库

桥接库是一种用于在原生应用和网页之间建立通信通道的库。常见的桥接库包括React Native的WebView组件和Cordova的InAppBrowser插件。这些库提供了简洁的API，方便开发者在原生应用和网页之间进行双向通信。

2、使用React Native的WebView组件

React Native的WebView组件是一种非常流行的桥接库，允许你在React Native应用中嵌入网页并与JavaScript进行交互。以下是一个基本示例：

import React, { Component } from 'react';


import { WebView } from 'react-native-webview';


class MyComponent extends Component {


    webView = null;


    onMessage = (event) => {


        const { data } = event.nativeEvent;


        console.log(data);


    }


    callJavaScriptFunction = () => {


        this.webView.injectJavaScript('myJSFunction()');


    }


    render() {


        return (


            <WebView


                ref={(ref) => { this.webView = ref; }}


                source={{ uri: 'file:///android_asset/index.html' }}


                onMessage={this.onMessage}


            />


        );


    }


}


export default MyComponent;

在以上代码中，我们首先创建了一个WebView组件，并通过injectJavaScript方法调用了JavaScript函数myJSFunction。我们还通过onMessage事件处理从网页发送到原生应用的消息。

3、使用Cordova的InAppBrowser插件

Cordova的InAppBrowser插件是一种用于在Cordova应用中嵌入网页并与JavaScript进行交互的桥接库。以下是一个基本示例：

document.addEventListener('deviceready', function () {


    var ref = cordova.InAppBrowser.open('index.html', '_blank', 'location=no');


    ref.addEventListener('loadstop', function () {


        ref.executeScript({ code: 'myJSFunction()' });


    });


});

在以上代码中，我们首先创建了一个InAppBrowser实例，并通过executeScript方法调用了JavaScript函数myJSFunction。

三、注入代码

1、什么是代码注入

代码注入是一种在运行时动态修改或添加代码的技术。在原生应用中，代码注入可以用于在网页加载完成后注入JavaScript代码，以实现特定的功能。

2、在Android中注入JavaScript代码

在Android中，可以通过WebView的addJavascriptInterface方法注入JavaScript代码。以下是一个基本示例：

import android.os.Bundle;


import android.webkit.JavascriptInterface;


import android.webkit.WebView;


import android.webkit.WebViewClient;


import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    private WebView myWebView;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        myWebView = findViewById(R.id.webview);


        myWebView.getSettings().setJavaScriptEnabled(true);


        myWebView.setWebViewClient(new WebViewClient());


        myWebView.loadUrl("file:///android_asset/index.html");


        myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");


    }


    public class WebAppInterface {


        Context mContext;


        WebAppInterface(Context c) {


            mContext = c;


        }


        @JavascriptInterface


        public void showToast(String toast) {


            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();


        }


    }


}

在以上代码中，我们通过addJavascriptInterface方法将一个Java对象绑定到JavaScript上下文中，从而可以在JavaScript中调用Java方法。

3、在iOS中注入JavaScript代码

在iOS中，可以通过WKUserScript类注入JavaScript代码。以下是一个基本示例：

import UIKit


import WebKit


class ViewController: UIViewController, WKNavigationDelegate {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


        let contentController = WKUserContentController()


        let userScript = WKUserScript(source: "myJSFunction()", injectionTime: .atDocumentEnd, forMainFrameOnly: true)


        contentController.addUserScript(userScript)


        let config = WKWebViewConfiguration()


        config.userContentController = contentController


        webView = WKWebView(frame: self.view.frame, configuration: config)


        webView.navigationDelegate = self


        self.view.addSubview(webView)


        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {


            webView.loadFileURL(url, allowingReadAccessTo: url)


        }


    }


}

在以上代码中，我们通过WKUserScript类创建了一个用户脚本，并将其添加到WKUserContentController中，从而在网页加载完成后注入JavaScript代码。

四、通过URL Scheme

1、什么是URL Scheme

URL Scheme是一种用于在应用之间传递数据的机制。在原生应用中，可以通过URL Scheme在不同的模块之间进行通信，包括调用JavaScript方法。

2、在Android中使用URL Scheme

在Android中，可以通过WebView的shouldOverrideUrlLoading方法拦截特定的URL Scheme，并调用相应的JavaScript方法。以下是一个基本示例：

import android.os.Bundle;


import android.webkit.WebResourceRequest;


import android.webkit.WebView;


import android.webkit.WebViewClient;


import androidx.annotation.NonNull;


import androidx.annotation.Nullable;


import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    private WebView myWebView;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        myWebView = findViewById(R.id.webview);


        myWebView.getSettings().setJavaScriptEnabled(true);


        myWebView.setWebViewClient(new MyWebViewClient());


        myWebView.loadUrl("file:///android_asset/index.html");


    }


    private class MyWebViewClient extends WebViewClient {


        @Override


        public boolean shouldOverrideUrlLoading(WebView view, @NonNull WebResourceRequest request) {


            if (request.getUrl().toString().startsWith("myapp://")) {


                view.evaluateJavascript("myJSFunction()", null);


                return true;


            }


            return false;


        }


    }


}

在以上代码中，我们通过shouldOverrideUrlLoading方法拦截了特定的URL Scheme，并通过evaluateJavascript方法调用了JavaScript函数myJSFunction。

3、在iOS中使用URL Scheme

在iOS中，可以通过WKNavigationDelegate的decidePolicyForNavigationAction方法拦截特定的URL Scheme，并调用相应的JavaScript方法。以下是一个基本示例：

import UIKit


import WebKit


class ViewController: UIViewController, WKNavigationDelegate {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


        webView = WKWebView(frame: self.view.frame)


        webView.navigationDelegate = self


        self.view.addSubview(webView)


        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {


            webView.loadFileURL(url, allowingReadAccessTo: url)


        }


    }


    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {


        if let url = navigationAction.request.url, url.scheme == "myapp" {


            webView.evaluateJavaScript("myJSFunction()") { (result, error) in


                if let error = error {


                    print("Error calling JavaScript: (error)")


                }


            }


            decisionHandler(.cancel)


        } else {


            decisionHandler(.allow)


        }


    }


}

在以上代码中，我们通过decidePolicyForNavigationAction方法拦截了特定的URL Scheme，并通过evaluateJavaScript方法调用了JavaScript函数myJSFunction。

五、总结

通过以上介绍，可以看出在原生应用中调JS方法有多种实现方式，WebView交互、桥接库、注入代码、通过URL Scheme等方法各有其优缺点和适用场景。选择合适的方法可以帮助开发者更好地实现原生应用与网页之间的交互。

在实际开发中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高项目管理和团队协作效率。这些工具可以帮助团队更好地管理项目进度、任务分配和沟通协调，从而提高开发效率和项目质量。

相关问答FAQs：

1. 如何在原生JavaScript中调用一个函数？
在原生JavaScript中调用一个函数非常简单。只需使用函数名和括号调用该函数即可。例如：functionName();

2. 如何在原生JavaScript中传递参数给一个函数？
要在原生JavaScript中传递参数给一个函数，只需在函数调用时在括号中添加参数。例如：functionName(parameter1, parameter2);

3. 在原生JavaScript中，如何获取函数的返回值？
要获取函数的返回值，可以将函数调用赋值给一个变量。例如：var result = functionName();这样，变量result将包含函数的返回值。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3540959

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部