app怎么运行js

在App中运行JavaScript的方法包括：使用WebView加载网页、嵌入JavaScript引擎、利用React Native等框架。

其中，使用WebView加载网页是最常见和直接的方式。WebView是一个嵌入式浏览器控件，可以在应用中显示和交互网页内容。通过WebView，你可以加载一个包含JavaScript的HTML页面，并与其进行交互。以下将详细介绍这种方法。

一、使用WebView加载网页

1、什么是WebView

WebView是移动应用开发中用于显示网页内容的控件。它允许开发者在应用中嵌入一个完整的浏览器，并加载和显示HTML、CSS和JavaScript。

1.1、WebView的优势

跨平台兼容性：WebView在Android和iOS平台上都有相应的实现，代码可以在两个平台上共享。
动态内容加载：通过WebView，可以动态加载和更新网页内容，而无需重新发布应用。
丰富的交互功能：WebView支持JavaScript，可以实现复杂的交互功能。

1.2、WebView的劣势

性能问题：相比于原生组件，WebView的性能可能稍逊一筹，特别是在处理大量动态内容时。
安全风险：加载外部网页时，需要注意潜在的安全风险，如XSS攻击。

2、在Android中使用WebView

在Android应用中使用WebView非常简单，只需在布局文件中添加WebView控件，并在Activity中进行配置和加载网页。

2.1、添加WebView控件

在布局文件（如activity_main.xml）中添加WebView控件：

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2.2、在Activity中配置WebView

在Activity中找到WebView控件，并加载网页：

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 webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("file:///android_asset/index.html");
    }
}

3、在iOS中使用WebView

在iOS应用中使用WebView同样简单，只需在视图控制器中添加WKWebView控件，并加载网页。

3.1、添加WKWebView控件

在视图控制器中创建并配置WKWebView控件：

import UIKit
import WebKit
class ViewController: UIViewController {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webView = WKWebView(frame: self.view.frame)
        self.view.addSubview(webView)
        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
            webView.loadFileURL(url, allowingReadAccessTo: url)
        }
    }
}

4、与JavaScript交互

在使用WebView时，可能需要与JavaScript代码进行交互。可以通过JavaScriptInterface（Android）或WKScriptMessageHandler（iOS）来实现。

4.1、在Android中与JavaScript交互

在Android中，可以通过添加JavaScript接口来与JavaScript代码进行交互：

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
        webView.loadUrl("file:///android_asset/index.html");
    }
    public class WebAppInterface {
        Context mContext;
        WebAppInterface(Context c) {
            mContext = c;
        }
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
}

在HTML文件中，可以通过Android.showToast("Hello, World!")调用Java方法。

4.2、在iOS中与JavaScript交互

在iOS中，可以通过WKScriptMessageHandler来与JavaScript代码进行交互：

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let contentController = WKUserContentController()
        contentController.add(self, name: "iOSNative")
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        webView = WKWebView(frame: self.view.frame, configuration: config)
        self.view.addSubview(webView)
        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
            webView.loadFileURL(url, allowingReadAccessTo: url)
        }
    }
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "iOSNative" {
            print("JavaScript is sending a message (message.body)")
        }
    }
}

在HTML文件中，可以通过window.webkit.messageHandlers.iOSNative.postMessage("Hello, World!")调用iOS方法。

二、嵌入JavaScript引擎

除了使用WebView加载网页，还可以在应用中嵌入JavaScript引擎，如V8、JavaScriptCore等。这种方法允许在应用中直接执行JavaScript代码，而无需加载网页。

1、使用V8引擎

V8是Google开发的高性能JavaScript引擎，可以嵌入到C++应用中。以下是一个简单的示例：

#include <iostream>
#include <v8.h>
using namespace v8;
int main(int argc, char* argv[]) {
    // Initialize V8.
    V8::InitializeICUDefaultLocation(argv[0]);
    V8::InitializeExternalStartupData(argv[0]);
    std::unique_ptr<Platform> platform = platform::NewDefaultPlatform();
    V8::InitializePlatform(platform.get());
    V8::Initialize();
    // Create a new Isolate and make it the current one.
    Isolate::CreateParams create_params;
    create_params.array_buffer_allocator =
        ArrayBuffer::Allocator::NewDefaultAllocator();
    Isolate* isolate = Isolate::New(create_params);
    {
        Isolate::Scope isolate_scope(isolate);
        // Create a stack-allocated handle scope.
        HandleScope handle_scope(isolate);
        // Create a new context.
        Local<Context> context = Context::New(isolate);
        // Enter the context for compiling and running the hello world script.
        Context::Scope context_scope(context);
        // Create a string containing the JavaScript source code.
        Local<String> source =
            String::NewFromUtf8(isolate, "'Hello' + ', World!'",
                                NewStringType::kNormal).ToLocalChecked();
        // Compile the source code.
        Local<Script> script = Script::Compile(context, source).ToLocalChecked();
        // Run the script to get the result.
        Local<Value> result = script->Run(context).ToLocalChecked();
        // Convert the result to an UTF-8 string and print it.
        String::Utf8Value utf8(isolate, result);
        std::cout << *utf8 << std::endl;
    }
    // Dispose the isolate and tear down V8.
    isolate->Dispose();
    V8::Dispose();
    V8::ShutdownPlatform();
    delete create_params.array_buffer_allocator;
    return 0;
}

2、使用JavaScriptCore

JavaScriptCore是Apple提供的JavaScript引擎，可以在iOS和macOS应用中使用。以下是一个简单的示例：

#import <JavaScriptCore/JavaScriptCore.h>
#import <Foundation/Foundation.h>
int main(int argc, const char * argv[]) {
    @autoreleasepool {
        JSContext *context = [[JSContext alloc] init];
        JSValue *result = [context evaluateScript:@"'Hello' + ', World!'"];
        NSLog(@"%@", [result toString]);
    }
    return 0;
}

三、利用React Native等框架

React Native是一个流行的移动应用开发框架，使用JavaScript编写跨平台的移动应用。通过React Native，可以轻松在应用中运行JavaScript代码，并与原生模块进行交互。

1、React Native简介

React Native是Facebook开发的开源框架，允许开发者使用JavaScript和React编写跨平台的移动应用。React Native通过桥接机制，将JavaScript代码与原生代码进行通信，实现高性能的跨平台应用。

2、React Native示例

以下是一个简单的React Native示例：

import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};
export default App;

3、与原生模块交互

在React Native中，可以通过编写原生模块与JavaScript代码进行交互。以下是一个简单的示例：

3.1、编写原生模块（Android）

在Android中，编写一个简单的原生模块：

package com.example;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
public class MyModule extends ReactContextBaseJavaModule {
    MyModule(ReactApplicationContext context) {
        super(context);
    }
    @Override
    public String getName() {
        return "MyModule";
    }
    @ReactMethod
    public void sayHello(Promise promise) {
        promise.resolve("Hello from Android!");
    }
}

在JavaScript中调用原生模块：

import { NativeModules } from 'react-native';
const { MyModule } = NativeModules;
MyModule.sayHello().then(message => {
  console.log(message);
});

3.2、编写原生模块（iOS）

在iOS中，编写一个简单的原生模块：

#import <React/RCTBridgeModule.h>
@interface MyModule : NSObject <RCTBridgeModule>
@end
@implementation MyModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(sayHello:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  resolve(@"Hello from iOS!");
}
@end