Hybrid App 开发浅谈

缘起

智能手机兴起，移动端开发火热起来。起初只有Android和IOS应用，随着H5的问世，以及手机性能的提升，Web App开始斩露头角。

一份代码，多端运行。这预示着开发成本的降低，同时也能减少因开发者实现的差异导致Android和IOS应用出现不同的表示。

发展

如果某一块的功能简单，仅仅是一些页面的展示，那么无用质疑，使用Web App技术现实更优，通过WebView嵌入到原生应用中。

最初公司的网页代码是放在服务端。但是这样导致一个问题，就是进入网页时，会有白屏的现象。后来就提出将网页直接放到原生应用中，因为我们采用的前端后分离的模式，数据全部通过异步请求去获取，所以该方案可以实现。

当然这种将网页放到原生应用中会有一个问题，就是安装包的体积会增大。这个需要根据实际情况去衡量，是否采用这种方案。我们认为相比于体积的增大，白屏的体验更糟糕。

开发

Hybrid App得以发展的核心就是WebView，而开发的重点就在于原生应用和Web App的通信。

Android 与 Web App

如果在Android中使用WebView记得在AndroidManifest.xml中配置网络权限

<uses-permission android:name="android.permission.INTERNET"/>

Android 9.0 默认使用加密连接，这意味着老旧项目在android 9.0 设备上运行，会遇到异常的情况。

在配置中加上下面内容即可，true是否使用明文传输，也就是可以使用http

android:usesCleartextTraffic="true"

Android 调用 JS

Android 调用 JS 有两种方式，都是通过 WebView 的方法：

1. webview.loadUrl()
2. webview.evaluateJavascript()

二者区别：

1. loadUrl() 会刷新页面，evaluateJavascript() 则不会使页面刷新，所以 evaluateJavascript() 的效率更高
2. loadUrl() 得不到 js 的返回值，evaluateJavascript() 可以获取返回值
3. evaluateJavascript() 在 Android 4.4 之后才可以使用

代码示例：

package com.wit;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebActivity extends AppCompatActivity {
   

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

        final WebView webView = findViewById(R.id.wv);
        webView.loadUrl("file:///android_asset/index.html");
        webView.setWebViewClient(new WebViewClient() {
   
            @Override
            public void onPageFinished(WebView view, String url) {
   
                super.onPageFinished(view, url);

                webView.post(new Runnable() {
   
                    @Override
                    public void run() {
   
                        webView.evaluateJavascript("javascript:callMe('Hello World!')", new ValueCallback<String>() {
    // 注意这一行，调用的地方
                            @Override
                            public void onReceiveValue(String value) {
   
                                // TODO
                            }
                        });
                    }
                });
            }
        });
    }