Cordova 和 Html 交互时一种优雅的方式

2023-11-30 09:22:04







在构建项目之前，你需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK，合理是否已安装SDK。在MAC上运行命令：

```bash
cordova platform add android
cordova platform add ios

在(cordova项目)下面两个标记出来的文件和文件夹移动…

# 在www文件夹移动
cordova-js-src
cordova-js-src

# 在platforms/android/app/src/main文件夹移动
cordova-android
cordova-android

# 在platforms/android/app/src/main/res/xml文件夹移动
cordova_plugins.xml

# 在platforms/ios文件夹移动
cordova

# 在platforms/ios/ProjectName文件夹移动
www
plugins

然后使用下面的命令运行

cordova build android --release

使用 Certificates and Identifiers创建一个新的distribution证书。在 xcode项目上开启bitcode。拖动 ipa 文件到 xcode 项目，更换工程设置的provisioning profile。

然后使用Xcode运行构建。

以WKWebView为内嵌 WebView，实现封装了与Cordova交互的Native代码的原生类WkwebDelegate 如下：

class WkwebDelegate:NSObject,WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler{
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!){
       // 做一些页面加载完成后的事情
   }
// 页面开始加载时调用
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!){
        // 开始加载网页时要做的事情
    }
// 接收到服务器跳转请求之后调用
func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!){
        // 接收到服务器跳转请求后做的事情
    }
// 在收到响应后，决定是否跳转
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void){
        // 页面跳转时做的事情
    }
// 在页面加载失败时调用
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error){
        // 页面加载失败时要做的事情
    }
// 如果需要证书验证，与使用自签名证书有关系
func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void){
        // 需要证书验证时做的事情
    }
}

以Javasript为内嵌WebView，实现封装了与Cordova交互的Native代码的原生类 CordovaPlugin 如下：

@CordovaPlugin()
public class CordovaPlugin extends CordovaPlugin {
    public static final String TAG = "CordovaPlugin";
    private Context context;
    // 重新初始化cordova插件
    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);
        context = cordova.getActivity().getApplicationContext();
    }
    // 用来处理JS向原生发送的数据
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("helloworld")) {
            String name = args.getString(0);
            Toast.makeText(context, "你好，" + name, Toast.LENGTH_SHORT).show();
            callbackContext.success("你好，" + name);
            return true;
        } else {
            return false;
        }
    }
}

上面的代码是基于JavaScript调用Native代码的示例。如果您需要从Native代码调用JavaScript，可以参考Cordova官方文档。

使用wkwebview的发送和监听事件消息如下：

# 监听
[self.wkWebView.configuration.userContentController addScriptMessageHandler:self name:@"helloName"];

# 发送
NSString *js = [NSString stringWithFormat:@"hello('%@')", _name];
[self.wkWebView evaluateJavaScript:js completionHandler:nil];

WebView和Cordova的交互。

为了在WebView中嵌入Cordova，您需要使用cordova-plugin-wkwebview-engine插件。该插件允许您使用WKWebView作为WebView，并提供了一个接口来与Cordova API进行交互。

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function onDeviceReady() {
    // Cordova is now initialized.
}

document.addEventListener("deviceready", onDeviceReady, false);
</script>