本文主要是介绍优雅用Cordova实现Html和原生的交互，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

最近几年混合开发越来越火，今天想写一个wkwebview和cordova的交互。

1: 创建第一个Cordova工程

打开终端，cmd切换目录到工作目录下，输入以下命令，同样，可能需要点时间来完成

cordova create Demo com.cordova.demo.hello HelloWorld
复制代码

2: 添加平台支持

所有后续命令在项目的目录中进行，可在该项目任何子目录中，cmd切换到项目目录下

cd Demo
复制代码

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

 cordova platform add ios
复制代码

3: 查看Cordova支持平台以及已经添加的平台

cordova platforms ls
复制代码

4: 添加插件

cordova plugin add cordova-plugin-device
复制代码

5: 查看插件

cordova plugin list
复制代码

6: 添加wkwebview插件

cordova plugin add cordova-plugin-wkwebview-engine
复制代码

7: 在iOS项目,并使用cocoapods在,podfile文件如下,pod install

platform :ios,'9.0'
inhibit_all_warnings!
target 'WKWebiveCordova' do
   pod 'cordova-plugin-device'
   pod 'cordova-plugin-wkwebview-engine
end
复制代码

8 :拉入www文件进入iOS项目

在(cordova项目)下面两个标记出来的文件和文件夹移动到(iOS项目)中,注意是(cordova项目)/platforms/ios文件夹下面的被我整理下目录结构。拉入ios项目，记得这样勾选create folder references,才会变成蓝色文件夹

9: 查看蓝色文件夹目录，其中只有platform下的android是安卓那边的，其他文件夹都是和安卓公用，等下交互的方法名要一样。

10: config.xml配置说明

<content src="index.html" />
复制代码

本地的配置的idnex.html，启动wkwebview，如果startPage 没有写则是默认启动这个html文件。

加载wkwebview时候，要记得载入config.xml文件，代码下面会显示 跳转url界面能显示出来配置如下东西：

<feature name="IntentAndNavigationFilter">
         <param name="ios-package" value="CDVIntentAndNavigationFilter" />
         <param name="onload" value="true" />
 </feature>

 <feature name="CDVWKWebViewEngine">
      <param name="ios-package" value="CDVWKWebViewEngine" />
 </feature>

 <allow-navigation href="http://*/*" />
 <allow-navigation href="https://*/*" />
 <allow-navigation href="*" />
 <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
 <plugin name="cordova-plugin-wkwebview-engine" spec="^1.2.1" />
复制代码

11: 新建一个WKWebview文件继承CDVViewController 来显示加载wkwebview

WKWebview.h文件如下

#import <WebKit/WebKit.h>
#import <UIKit/UIKit.h>
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
#import <Cordova/CDVCommandQueue.h>
NS_ASSUME_NONNULL_BEGIN
@interface WKWebview : CDVViewController
+ (WKWebview *)shareInstance;
//设置这个值，加载当前页面
@property (nonatomic, copy) NSString *webUrl;
//当前页面webview
@property (nonatomic, strong) WKWebView *currentWebView;
@end
NS_ASSUME_NONNULL_END
复制代码

WKWebview.m文件如下

#import "WKWebview.h"
@interface WKWebview ()
@end

@implementation WKWebview

- (instancetype)init {
    self = [super init];
    if (self) {
        self.configFile   = [self configPath];
    }
    return self;
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onNotification:)
    name:CDVPluginResetNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self
    selector:@selector(onNotificationed:)
    name:CDVPageDidLoadNotification object:nil];
     [self setWebViewBackground];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view
    self.currentWebView = (WKWebView *)self.webView;
    self.webView.backgroundColor = [UIColor redColor];
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:CDVPluginResetNotification object:nil];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:CDVPageDidLoadNotification object:nil];
}

- (NSString *)configPath {
    NSString *path = [[NSBundle mainBundle]pathForResource:@"config" ofType:@"xml"];
    NSLog(@"path===== %@",  path);
    return path;
}

- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

- (void)onNotification:(NSNotification *)notification {
    NSLog(@"webview开始加载");
    WKWebView *webview = notification.object;
    if (![[webview.URL absoluteString] containsString:@"www/error.html"]) {
    }
    if ([webview.URL.absoluteString isEqualToString:@"ios:backtotheroot"]) {
        [self.navigationController popViewControllerAnimated:YES];
    }
}
//wkwebView
- (void)onNotificationed:(NSNotification *)notification {
    NSLog(@"webview加载完成");
    WKWebView *webview = notification.object;
    //去除长按后出现的文本选取框
    [webview evaluateJavaScript:@"document.documentElement.style.webkitUserSelect='none';" completionHandler:^(id obj, NSError *error){
    }];
    [webview evaluateJavaScript:@"document.title" completionHandler:^(id obj, NSError *error) {
        if ([obj isKindOfClass:[NSString class]]) {
            self.title = (NSString *)obj;
        }
    }];
}

- (void)setWebUrl:(NSString *)webUrl {
    if (!webUrl) {
        return;
    }
    _webUrl = webUrl;
    if (self.currentWebView) {
        NSURL *url = [NSURL URLWithString:[webUrl stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]];
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [self.currentWebView loadRequest:request];
    }
}

- (void)setWebViewBackground {
    NSLog(@"self.startPage==%@", self.startPage);
    if ([self.startPage containsString:@"hsjob"]) {
        self.view.backgroundColor = [UIColor redColor];
    } else if ([self.startPage containsString:@"hstravel"]) {
        self.view.backgroundColor = [UIColor redColor];
    } else if ([self.startPage containsString:@"movie"]) {
        self.view.backgroundColor = [UIColor blackColor];
    }
}
@end
复制代码

12: 启动远程url显示wkwenview界面调用

 WKWebview *vc = [[WKWebview alloc] init];
 vc.startPage = @"http://www.baidu.com";
 vc.hidesBottomBarWhenPushed = NO;
 [self.navigationController pushViewController:vc animated:YES];
复制代码

13: 把vc.startPage = @"www.baidu.com"; 屏蔽掉，默认显示出index.html，用来实现原声和html的交互demo

14: 新建一个CDVPlugin继承CDVPlugin 来作为原声和html5的桥接调用

MyPlugi.h文件

#import "CDVPlugin.h"
#import <Cordova/CDVPlugin.h>
NS_ASSUME_NONNULL_BEGIN
@interface MyPlugin : CDVPlugin
// 获取当前位置信息
- (void)currentPosition:(CDVInvokedUrlCommand *)command;
@end
NS_ASSUME_NONNULL_END
复制代码

MyPlugi.m文件

#import "MyPlugin.h"
@implementation MyPlugin
//获取当前位置信息
- (void)currentPosition:(CDVInvokedUrlCommand *)command {
     NSLog(@"command是回调的参数，在里面取");
    CDVPluginResult *result2 = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsArray:@[ @"data1", @"data2" ]];
    [self.commandDelegate sendPluginResult:result2 callbackId:command.callbackId];
}
@end
复制代码

15: 在config.xml文件配置下这个文件如下

  <feature name="MyPlugin">
      <param name="ios-package" value="MyPlugin" />
  </feature>
复制代码

16: index.html文件配置如下

      <script type="text/javascript" src="./platform/common/loader.js"></script> // 能并行执行js
        <script type="text/javascript">
            var loadList = ["./platform/common/hsplatform.js"];
            var u = navigator.userAgent;
            var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            //app内部 这里需要判断加载安卓或者ios的区别，我就默认为ios了
            if (u.indexOf("_hsApp_") != -1) {
              var cordovaURL = "./platform/ios/cordova.js";
              if (isiOS) {
                cordovaURL = "./platform/ios/cordova.js";
              }
              loadList.push(cordovaURL, "./js/index.js");
            }else{
                var cordovaURL = "./platform/ios/cordova.js";
                if (isiOS) {
                  cordovaURL = "./platform/ios/cordova.js";
                }
                loadList.push(cordovaURL, "./js/index.js");
            }
            Loader.load(loadList);
        </script>
复制代码

17: 修改下index.js文件

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    console.log("准备");
}

// 获取当前位置
Cordova.exec(successCurrentPosition, errorCurrentPosition, "MyPlugin", "currentPosition", [argument]);
/ ***successCurrentPosition 成功回调
errorCurrentPosition 失败回调
MyPlugin 我们新建的文件名字
currentPosition 调用方法
argument 入参***/
function currentPosition() {
    console.log("该功能只能在APP内部使用");
    var argument = JSON.stringify({
        'relocation': 'false'
    });
    Cordova.exec(successCurrentPosition, errorCurrentPosition, "MyPlugin", "currentPosition", [argument]);
}

//获取当前位置成功回调
function successCurrentPosition(position) {
    console.log(position);
}
//获取当前位置失败回调
function errorCurrentPosition(position) {
    console.log(position);
}
复制代码

18: 为了index.js能正常打印console.log,在index.html上加上

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
复制代码

在config.xml配置

<feature name="Console">
    <param name="ios-package" value="CDVLogger" />
    <param name="onload" value="true" />
</feature>
复制代码

19: 点击h5界面 实现使用原生的交互如下，打印出

2022-07-07 05:05:57.442579+0800 WKWebiveCordova[74344:646107] 该功能只能在APP内部使用
2020-07-07 05:05:57.445205+0800 WKWebiveCordova[74344:646107] command是回调的参数，在里面取
2020-07-07 05:15:08.682174+0800 WKWebiveCordova[74813:651778] error==data1,data2
复制代码

20: 是否需要回调到html5 用self.commandDelegate sendPluginResult方法

21: 原生到html5，从html5到原生的交互就说完了，需要其他的插件交互都可以在这个www目录上增加，和MyPlugin文件扩展。demo会上传到github上去

这篇关于优雅用Cordova实现Html和原生的交互的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！