weex解决scrollView嵌套webview高度问题，安卓自定义weex组件webview，

weex页面有scrollView嵌套web的页面，如果不给web指定高度就显示不出来。RN也有这个问题，查了下全部是通过原生开启一个不显示的webview提前加载一遍再将高度传给weex来解决，这种方式需要加载俩边资源拖慢了显示速度，而且浪费资源。

研究了下新方式，只加载一遍，用原生自定义的webview在加载完后在原生端修改高度。

同时使用自定义的webivew解决了有些特殊机型无法显示（如LG nexus5），以及webview的一系列设置，安全，js问题。

面临三个问题：
1，如何自定义weex组件？
2，如何通过源码找出修改weex控件宽高的方法？
3，如何得到webview的准确高度？

自定义weex控件：

继承WXComponent指定泛型。

public class WWebview extends WXComponent<DisplayX5Webview> {}

在原生端application中注册组件后weex端就能直接引用，注意：不能有大写字母，weex引用时为蓝色方为成功；暗黄则是失败。

WXSDKEngine.registerComponent("mywebview", WWebview.class);

weex直接引用：

<mywebviewstyle={[styles.webViewContainer]}
/>

在初始化里返回weex显示的控件，这里可以返回任意布局，甚至动态添加子布局等。

@Override
protected DisplayX5Webview initComponentHostView(@NonNull Context context) {webView = new DisplayX5Webview(context.getApplicationContext());initWebView((Activity) context);//初始化return webView;
}

约定weex端的标签属性source：(注意要小写)

@WXComponentProp(name = "source")
public void setSource(String source) {mSource = source;
}

属性直接使用即可：

<mywebviewstyle={[styles.webViewContainer]}source={`url`}
/>

加载weex时component的生命周期会先调用@WXComponentProp(name = "source")，再调用bindData()顾名思义就是加载数据的（小坑：如果weex端没有做判空，在网络请求下来之前先render一遍，后面网络数据返回以后再render就不会执行bindDta了）

 @Overridepublic void bindData(WXComponent component) {super.bindData(component);if (!TextUtils.isEmpty(mSource)) {webView.loadData(mSource, "text/html; charset=UTF-8", "UTF-8");//  webView.loadUrl(mSource);}}

到这里，如果如果在weex端指定高度就已经可以显示了。

在安卓端修改控件高度

修改高度很麻烦，无论如何设置LayoutParams都是没用的，下面大致看下源码里为什么会设置不进去。

Component的注册加载机制参考下：https://www.jianshu.com/p/53f69bfcbc50

直接看处理渲染的中心类WXDomHandler。dom，渲染处理都在此处。

 @Overridepublic boolean handleMessage(Message msg) {if (msg == null) {return false;}int what = msg.what;Object obj = msg.obj;WXDomTask task = null;if (obj != null && obj instanceof WXDomTask) {task = (WXDomTask) obj;Object action = ((WXDomTask) obj).args.get(0);if (action != null && action instanceof TraceableAction) {((TraceableAction) action).mDomQueueTime = SystemClock.uptimeMillis() - msg.getWhen();}}if (!mHasBatch) {mHasBatch = true;if(what != WXDomHandler.MsgType.WX_DOM_BATCH) {int delayTime = DELAY_TIME;if(what == MsgType.WX_DOM_TRANSITION_BATCH){delayTime = TRANSITION_DELAY_TIME;}mWXDomManager.sendEmptyMessageDelayed(WXDomHandler.MsgType.WX_DOM_BATCH, delayTime);}}switch (what) {case MsgType.WX_EXECUTE_ACTION:mWXDomManager.executeAction(task.instanceId, (DOMAction) task.args.get(0), (boolean) task.args.get(1));break;case MsgType.WX_DOM_UPDATE_STYLE://keep this for direct native callmWXDomManager.executeAction(task.instanceId, Actions.getUpdateStyle((String) task.args.get(0),(JSONObject) task.args.get(1),task.args.size() > 2 && (boolean) task.args.get(2)),false);break;case MsgType.WX_DOM_BATCH:mWXDomManager.batch();mHasBatch = false;break;case MsgType.WX_CONSUME_RENDER_TASKS:mWXDomManager.consumeRenderTask(task.instanceId);break;default:break;}return true;}

很明显case MsgType.WX_DOM_UPDATE_STYLE:字面意思就是我们要找的。再看下具体做了什么来更新dom刷新ui：

 case MsgType.WX_DOM_UPDATE_STYLE://keep this for direct native callmWXDomManager.executeAction(task.instanceId, Actions.getUpdateStyle((String) task.args.get(0),(JSONObject) task.args.get(1),task.args.size() > 2 && (boolean) task.args.get(2)),false);break;

需要三个参数：instanceId——WXComponent初始化自带，第二个参数getUpdateStyle，第三个不管

看第二个参数传入的方法：

  public static DOMAction getUpdateStyle(String ref, JSONObject data, boolean byPesudo){return new UpdateStyleAction(ref, data, byPesudo);}

new 的DOMAction最终executeAction来执行执行代码依然在UpdateStyleAction中：

@Overridepublic void executeDom(DOMActionContext context) {if (context.isDestory() || mData == null) {return;}...if (!mData.isEmpty()) {domObject.updateStyle(mData, mIsCausedByPesudo);domObject.applyStyle(mData);if(!mData.isEmpty()) {context.postRenderTask(this);}}}
具体看updateStyle方法：public void updateStyle(Map<String, Object> updates, boolean byPesudo) {
.../*** diff styles* */if(!diffUpdates(updates, getStyles())){return;}if(mStyles == null) {mStyles = new WXStyle();}mStyles.putAll(updates,byPesudo);...}

diffUpdates做了新老对比，无改变return。

mStyles.putAll(updates,byPesudo);这句可以看出最终还是追加修改的方式，所以只需要传入要修改的参数即可。

在WXComponent中有notifyNativeSizeChanged方法但是断点看mNeedLayoutOnAnimation一直为false。把这个方法拷贝出来用。

   public void notifyNativeSizeChanged(int w, int h) {Message message = Message.obtain();WXDomTask task = new WXDomTask();task.instanceId = getInstanceId();if (task.args == null) {task.args = new ArrayList<>();}JSONObject style = new JSONObject(2);Spacing padding = getDomObject().getPadding();Spacing border = getDomObject().getBorder();int top = (int) (padding.get(Spacing.TOP) + border.get(Spacing.TOP));int bottom = (int) (padding.get(Spacing.BOTTOM) + border.get(Spacing.BOTTOM));float webW = WXViewUtils.getWebPxByWidth(w);float webH = WXViewUtils.getWebPxByWidth(h) + top + bottom;style.put("height", webH + 1);style.put("width", webW + 1);task.args.add(getRef());task.args.add(style);message.obj = task;message.what = WXDomHandler.MsgType.WX_DOM_UPDATE_STYLE;WXSDKManager.getInstance().getWXDomManager().sendMessage(message);//   ((WXDomObject) getDomObject()).setStyleHeight(h);// ((WXDomObject) getDomObject()).setLayoutHeight(h);//WXSDKManager.getInstance().getWXDomManager().postRenderTask(getInstanceId());
//        Message msg = Message.obtain();
//        msg.what = WXDomHandler.MsgType.WX_CONSUME_RENDER_TASKS;
//        WXDomTask task = new WXDomTask();
//        task.instanceId = getInstanceId();
//        task.args = new ArrayList<>();
//        task.args.add(null);
//        msg.obj = task;
//        WXSDKManager.getInstance().getWXDomManager().sendMessage(msg);}

高度计算需要算上padding和border，不然会显示不全，获取方式源码都有提供。

综上发起更新style改变高度的方法如下：

    private void reSetHeight() {int contentHeight = webView.getContentHeight();notifyNativeSizeChanged(screenWidth, WXViewUtils.dip2px(contentHeight));}

获取webview内容高度最准确方式

webview获取高度是个小坑，

1，setWebViewClient和setWebChromeClient分别在有些机型上不回调。

2，onPageFinished执行完并不一定加载完

比较推荐自定义webview在onDraw中获取getContentHeight，因为不管webview设置的高度够不够，都会绘制完。

public class DisplayX5Webview  extends X5WebView {public interface DisplayFinish{void After();}DisplayX5Webview.DisplayFinish df;public void setDisplayListner(DisplayX5Webview.DisplayFinish df) {this.df = df;}public DisplayX5Webview(Context context, AttributeSet attrs) {super(context, attrs);}public DisplayX5Webview(Context context) {super(context);}//onDraw表示显示完毕@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);df.After();}
}

setDisplayListner回调中调用reSetHeight。以 if (oldContentHeight < contentHeight) 判断，只取大的高度值。

    private void reSetHeight() {int contentHeight = webView.getContentHeight();if (oldContentHeight < contentHeight) {notifyNativeSizeChanged(screenWidth, WXViewUtils.dip2px(contentHeight));oldContentHeight = contentHeight;}}