Weex系列(6) —— web组件和webview
yaonga 2019-07-01
目录
- 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。
最后这个系列就剩下两章了，下一篇也会尽快发布出来，感谢大家，如果喜欢欢迎收藏点赞啊~
