缘起
智能手机兴起,移动端开发火热起来。起初只有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 的方法:
- webview.loadUrl()
- webview.evaluateJavascript()
二者区别:
- loadUrl() 会刷新页面,evaluateJavascript() 则不会使页面刷新,所以 evaluateJavascript() 的效率更高
- loadUrl() 得不到 js 的返回值,evaluateJavascript() 可以获取返回值
- 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
}
});
}
});
}
});
}
}