返回

Hybrid框架搭建（四）：框架构建

IOS

引言

在前面的三篇文章中，我们已经基本搭建完成了Hybrid框架。本篇在《写一个易于维护使用方便性能可靠的Hybrid框架（三）—— 配置插件》的基础上做了一些优化，后续又做了UIWebView的兼容。

当下的跨平台方案很多，weex、RN到flutter层出不穷。那么对于WebView的探索也就停滞了吗？显然不是，业界对于H5+Native混合开发模式的探索一直没有停止，目前有很多成熟的方案可以供我们借鉴，这里不再赘述，有兴趣的同学可以自行了解。

框架构建

1. 框架目录结构

├── app
│   ├── src
│   │   ├── main
│   │   │   ├── AndroidManifest.xml
│   │   │   ├── res
│   │   │   │   ├── drawable
│   │   │   │   ├── layout
│   │   │   │   ├── values
│   │   │   ├── java
│   │   │   │   ├── com
│   │   │   │   │   └── yourapp
│   │   │   └── Android.mk
│   │   ├── build.gradle
│   │   ├── gradle.properties
│   │   ├── proguard-rules.pro
│   │   ├── settings.gradle
│   ├── build.gradle
│   └── gradle.properties
├── build.gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
├── local.properties
├── settings.gradle
└── template
    ├── debug
    │   └── webview_debug.apk
    ├── release
    │   └── webview_release.apk
    └── src
        ├── main
        │   ├── AndroidManifest.xml
        │   ├── res
        │   │   ├── drawable
        │   │   ├── layout
        │   │   ├── values
        │   │   └── webview
        │   └── java
        │       └── com
        │           └── yourapp
        └── Android.mk

2. 创建WebViewActivity

public class WebViewActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);

        webView = (WebView) findViewById(R.id.web_view);

        // 加载URL
        webView.loadUrl("https://www.google.com");

        // 启用JavaScript
        webView.getSettings().setJavaScriptEnabled(true);

        // 设置WebViewClient
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // 在WebView中打开链接
                view.loadUrl(url);
                return true;
            }
        });
    }

    @Override
    public void onBackPressed() {
        // 如果WebView可以后退，则后退
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            // 否则退出应用
            super.onBackPressed();
        }
    }
}

3. 在AndroidManifest.xml中注册WebViewActivity

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourapp">

    <application>
        <activity android:name=".WebViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:scheme="https" />
                <data android:scheme="http" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. 运行框架

./gradlew assembleDebug

UIWebView兼容

在iOS中，UIWebView是默认的WebView控件。为了支持iOS平台，我们需要对框架进行一些修改。

1. 创建UIWebViewDelegate

class UIWebViewDelegate: NSObject, UIWebViewDelegate {

    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        // 在WebView中打开链接
        webView.loadRequest(request)
        return true
    }

    func webViewDidStartLoad(_ webView: UIWebView) {
        // WebView开始加载
    }

    func webViewDidFinishLoad(_ webView: UIWebView) {
        // WebView加载完成
    }

    func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {
        // WebView加载失败
    }
}

2. 在ViewController中注册UIWebViewDelegate

let webView = UIWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
webView.delegate = UIWebViewDelegate()
self.view.addSubview(webView)

// 加载URL
webView.loadRequest(URLRequest(url: URL(string: "https://www.google.com")!))

3. 运行框架

xcodebuild -target HybridFramework -configuration Debug

总结

在本系列文章中，我们已经介绍了如何搭建一个Hybrid框架。这个框架易于维护、使用方便、性能可靠。我们还介绍了如何兼容UIWebView。

展望

随着移动互联网的发展，Hybrid框架将会有更多的应用场景。我们相信，Hybrid框架将会成为一种主流的跨平台开发方式。