共计 3397 个字符，预计需要花费 9 分钟才能阅读完成。
目录
Weex 系列 (序) —— 总要知道原生的一点东东 (iOS)
Weex 系列 (序) —— 总要知道原生的一点东东 (Android)
Weex 系列 (1) —— Hello World 项目
Weex 系列 (2) —— 页面跳转和通信
Weex 系列 (3) —— 单页面还是多页面
Weex 系列 (4) —— 老生常谈的三端统一
Weex 系列 (5) —— 封装原生组件和模块
Weex 系列 (6) —— webview 和 web 组件
[Weex 系列 (7) —— 踩坑填坑的集锦 ]
[Weex 系列 (8) —— 原理流程简析 ]
不知不觉就 3 月 1 号了，这段时间在想怎么来收尾这个系列，打算把 css 小结放在踩坑那一章，那一章以后估计也会不定时更新。最后一章就简单分析一下流程原理。
还是言归正传吧，webview 是一个基于 webkit 引擎、展现 web 页面的控件，app 里面是经常用到的，weex 官方提供了 web 组件。
webview 这块是比较复杂的，所以官方提供的远远不够，但是对原生又不是很熟悉，就找到组件源码，在此基础上再进行二次封装，上一章也是有很详细的提到的。
进行了二次封装，我们想添加功能配置什么的就方便很多了。
iOS
iOS 端的 webview 坑要少一些，几乎没怎么改过，主要就是 html 和原生的交互。1、可以用到 URL Schemes 来拦截做一些简单的跳转处理 2、实在绕不过，就用到了一个比较复杂的 WebViewJavascriptBridge，我用的就是谷歌搜出来第一个，参照例子加在我们自己封装的组件里面了，我这边直接就加在了 viewWillAppear 方法里面，同理也需要在 html 里面配置，最后 app 就能监听到 html 里面的点击等交互动作了。
Android
安卓要麻烦许多，网上大多也都是安卓的 webview 讲解，我也是遇到了好多坑。我把网上需要配置的基本都加上了，每个设置的说明看方法能猜出一二。1、然后就是 shouldOverrideUrlLoading，页面跳转遇到的无限加载、白屏等都需要在这个方法里面做处理，由于这块涉及业务处理，也就不截出来了，我也是参照网上的方案解决的，需要耐心，多试几次，会解决的。
private void initWebView(WebView wv) {
WebSettings settings = wv.getSettings();
settings.setAppCacheEnabled(true);
settings.setAllowFileAccess(true);// 设置启用或禁止访问文件数据
settings.setDomStorageEnabled(true);
settings.setLoadsImagesAutomatically(true);
// 适应屏幕
settings.setUseWideViewPort(true);
// 设置可以支持缩放
settings.setSupportZoom(true);
// 设置出现缩放工具
settings.setBuiltInZoomControls(true);
// 不显示 webview 缩放按钮
settings.setDisplayZoomControls(false);
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setLoadWithOverviewMode(true);
// 设置与 Js 交互的权限
settings.setJavaScriptEnabled(true);
// 设置允许 JS 弹窗
settings.setJavaScriptCanOpenWindowsAutomatically(true);
// 设置字体大小
settings.setTextZoom(100);
wv.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
2、接着就是安卓的上传图片文件，用到了如下的方法，最后用到的是 WXWebView.mUploadCallbackAboveL 回传图片的
// For Android < 3.0
public void openFileChooser(ValueCallback<Uri> valueCallback) {
mUploadMessage = valueCallback;
openImageChooserActivity();
}
// For Android >= 3.0
public void openFileChooser(ValueCallback valueCallback, String acceptType) {
mUploadMessage = valueCallback;
openImageChooserActivity();
}
//For Android >= 4.1
public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
//Log.e(TAG, “onShowFileChooser: “+acceptType);
mUploadMessage = valueCallback;
openImageChooserActivity();
}
// For Android >= 5.0
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
//Log.e(TAG, “onShowFileChooser: “+fileChooserParams);
mUploadCallbackAboveL = filePathCallback;
openImageChooserActivity();
return true;
}
3、还有一个点是 webview 里面音视频播放，退出页面，还会有声音等，可以在原生.java 的 onPause 方法里面做处理，我记得这个没处理的时候有的安卓应用商店都是审核不过的。
@Override
public void onPause() {
super.onPause();
if(WXWebView.mWebView != null){
WXWebView.mWebView.pauseTimers();
// 这里只对页面中只有一个音频的情况做了处理，如果有多个音频需要遍历整个数组记录状态
WXWebView.mWebView.loadUrl(
“javascript:audioEty = document.getElementsByTagName(‘audio’)[0]; audioEty.pause();”
);
WXWebView.mWebView.loadUrl(
“javascript:videoEty = document.getElementsByTagName(‘video’)[0]; videoEty.pause();”
);
WXWebView.mWebView.onPause();
}
}
页面宽高适配
最后本来是打算想把 app 的宽高适配等问题放在 css 那个小结的，但是现在归类在了踩坑里面，就把这个放在这儿讲吧。1、iOS 我是在 viewDidLayoutSubviews 里面重新绘制了一下，在适配 iPhoneX、XR、XMAX 的时候会用到，安卓倒是没有怎么处理。
_instance.frame = CGRectMake(safeArea.left, safeArea.top, self.view.frame.size.width-safeArea.left-safeArea.right, _weexHeight-safeArea.top);
2、weex 官网 config 这一章里面有讲到这个例子，大家也可以扫码看一下，主要就是 weex.config.env.deviceWidth 和 weex.config.env.deviceHeight。
最后这个系列就剩下两章了，下一篇也会尽快发布出来，感谢大家，如果喜欢欢迎收藏点赞啊~