摘要:安卓要麻烦许多,网上大多也都是安卓的讲解,我也是遇到了好多坑。我是在里面重新绘制了一下,在适配的时候会用到,安卓倒是没有怎么处理。
目录
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这块是比较复杂的,所以官方提供的远远不够,但是对原生又不是很熟悉,就找到组件源码,在此基础上再进行二次封装,上一章也是有很详细的提到的。
进行了二次封装,我们想添加功能配置什么的就方便很多了。
iOSiOS端的webview坑要少一些,几乎没怎么改过,主要就是html和原生的交互。
1、可以用到URL Schemes来拦截做一些简单的跳转处理
2、实在绕不过,就用到了一个比较复杂的WebViewJavascriptBridge,我用的就是谷歌搜出来第一个,参照例子加在我们自己封装的组件里面了,我这边直接就加在了viewWillAppear方法里面,同理也需要在html里面配置,最后app就能监听到html里面的点击等交互动作了。
安卓要麻烦许多,网上大多也都是安卓的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(ValueCallbackvalueCallback) { 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 valueCallback, String acceptType, String capture) { //Log.e(TAG, "onShowFileChooser: "+acceptType); mUploadMessage = valueCallback; openImageChooserActivity(); } // For Android >= 5.0 @Override public boolean onShowFileChooser(WebView webView, ValueCallback 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。
最后这个系列就剩下两章了,下一篇也会尽快发布出来,感谢大家,如果喜欢欢迎收藏点赞啊~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/102262.html
摘要:官网的所有组件和模块的截图在官网扩展版块,是可以找到封装的方法步骤的。封装组件的版块,我把里面的组件代码拿出来了,也是为了后面章节做铺垫吧。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(...
摘要:官网的所有组件和模块的截图在官网扩展版块,是可以找到封装的方法步骤的。封装组件的版块,我把里面的组件代码拿出来了,也是为了后面章节做铺垫吧。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(...
摘要:刚看到这仨页面的时候,我就想着可以用路由,做成三端统一。样式这部分真的三端基本是高度统一的,部分微调一下就可以了,也正是这样,我们后续才能迅速解决和。终于不是谈谈三端统一了,也是真的体验了一次,虽然最后有点出入,但是下次基本是没问题了。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...
阅读 4064·2021-10-08 10:04
阅读 3037·2021-08-11 11:20
阅读 2704·2021-07-25 21:37
阅读 2669·2019-08-30 12:44
阅读 2290·2019-08-30 11:12
阅读 1294·2019-08-26 13:45
阅读 2318·2019-08-26 11:53
阅读 3040·2019-08-26 11:32