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直接引用:
<mywebview
style={[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;
}
属性直接使用即可:
<mywebview
style={[styles.webViewContainer]}
source={`url`}
/>
加载weex时component的生命周期会先调用@WXComponentProp(name = "source"),再调用bindData()顾名思义就是加载数据的(小坑:如果weex端没有做判空,在网络请求下来之前先render一遍,后面网络数据返回以后再render就不会执行bindDta了)