用Weex实现新闻类app详情页是怎样一种体验?
2016-12-21 00:27
716 查看
本文同步发表在:http://www.jianshu.com/p/f6bf7636f81b
weex用数据去渲染界面和iOS native 先写界面再填充数据的思想还是很不一样的,正如一系列复杂的详情类页面一样,用native不管是oc还是swift写的时候那叫一个蛋疼啊,如果能够根据数据实时的去渲染页面(从一堆数据中遇到图片就显示图片,遇到表格就显示表格,遇到文字就显示文字,那且不是比native获取到数据之后拼接成html的格式然后使用webView去加载省事简单了许多),把数据组装成html在webView中显示是目前大多数详情类页面采用的方案。
可参考这篇文章:https://blog.6ag.cn/1514.html
当然使用Weex貌似就简单许多了。比如下面这种表格页面:
数据接口如下:
http://api.ycapp.yiche.com/appnews/GetStructNews?newsId=65523&ts=20161215074823&plat=2&theme=0&version=7.6
如果要用native实现的话估计得花一段时间才能解决,那么用weex就很容易实现了:
由于数据来源于第三方的,我也没仔细分析各种类型具体怎么显示,大致数据显示就是这样,具体的细节还需要花时间处理。开始我想把项目做成纯weex的,因为我发现之前项目中的weex页面对native的依赖太严重,各种参数各种事件通过module在weex和native之间来回传,导致在浏览器中跑不起来。比如这样:
但当这个项目搭建好之后,在掉接口的时候发现在浏览器中会出现跨域的问题,导致所有的接口请求不到数据出错一篇空白:
(处理跨域问题我大致看了下貌似服务器那边配置一下就行,但由于我的接口是抓包抓来的,只能我自己想办法解决。。。。。汗颜,我三天过去了我还没想到解决办法)所以只能扔进iOS工程中去跑了(无奈)。。既然web跑不起来但至少安卓和iOS还是能跑的,至少也跨平台了哈。
这里说一个iOS端的细节,由于在weex页面实现了导航栏,一开始在iOS工程中我没有用navigationController,运行时首页没有问题,weex的导航栏能正常显示,但push到下一个页面时顶部的navigationBar却不见了,再push到第三个页面的时候navigationBar又出现了,一时懵逼找不到原因,最后解决办法是native定义navigationController,然后影藏掉,比如:
navigationBar.hidden = YES隐藏之后,发现weex的navigationBar终于能够正常显示了。
其中涉及到一个弹出框,不怎么懂HTML,调了很久才让弹出框悬浮起来,这里记录一下,同时也提醒我接下来要好好学学vue和HTML了:
iOS程序员,写起类似HTML代码来挺费劲的,由于直接拎起来就开干,wee文档其实也没仔细看,HTML也不懂,写到哪哪不会就搜,所以js代码写的乱没抽出来公共的,css也没拎出来,重复的代码没封装。。(后期先学习了再弄)
等有空再说,明天要做新需求就没空搞Weex了。。。。。
项目github地址:https://github.com/voidxin/iCar
有什么问题请留言。
先上效果图:
详情页:
写在前面的话(weex在实际项目中给我的感受):
公司项目中我已尝试部分页面使用Weex实现(iOS端),把weex文件放在了公司服务器上,使用url去加载weex渲染成原生页面(之前我想把文件放在七牛上,但是由于七牛有CDN缓存,每次修改一个文件之后都要刷新该文件,当文件多了之后这是一个比较牙疼的事情,所以就还是扔进了公司的服务器中)。本月中旬公司app新版本发版了,过去了十几天了,从体验上来说,weex渲染的页面还是和纯native写的页面在细微的用户体验上来说还是有差别的(weex写的总感觉还是没原生的流畅,当然可能由于在下水平有限,代码没写好的原因)。特别是在某个查询页面中,由于后台数据没有做分页处理,导致请求数据时后台一下子返回了几千条数据(汗,为啥不分页)。在用list和cell去显示的时候发现原生的tableView一直在不断的渲染cell,几千数据要渲染三四分钟,而此时页面中所有的相应事件失效(其实是延迟,等页面渲染完成后如点击事件才响应)。造成了很不好的体验,导致我对数据多的时候使用weex形成了恐惧。可见Weex渲染原生tableView的时候cell的重用机制没有做好。最后没办法,既然后台没做分页,那只能我来做,控制每次只显示20条数据,然后添加上拉加载更多….由此解决了懵逼了好久的tableView渲染问题。 由此终于体会到了宛如H5版的发版节奏(马上修改马上生效,再也不用等发版了)。这感觉怎一个爽字了得。回到本文的主题:
用Weex实现新闻类详情页面是怎样的一种体验?
爽!weex用数据去渲染界面和iOS native 先写界面再填充数据的思想还是很不一样的,正如一系列复杂的详情类页面一样,用native不管是oc还是swift写的时候那叫一个蛋疼啊,如果能够根据数据实时的去渲染页面(从一堆数据中遇到图片就显示图片,遇到表格就显示表格,遇到文字就显示文字,那且不是比native获取到数据之后拼接成html的格式然后使用webView去加载省事简单了许多),把数据组装成html在webView中显示是目前大多数详情类页面采用的方案。
可参考这篇文章:https://blog.6ag.cn/1514.html
当然使用Weex貌似就简单许多了。比如下面这种表格页面:
数据接口如下:
http://api.ycapp.yiche.com/appnews/GetStructNews?newsId=65523&ts=20161215074823&plat=2&theme=0&version=7.6
如果要用native实现的话估计得花一段时间才能解决,那么用weex就很容易实现了:
<div if={{type==3}} style="margin-top: 30;"> <div repeat="item in tableData.content"> <div style="flex-direction: row;"> <div repeat="dic in item" style="justify-content: center;"> <div style="align-items: center;justify-content: center;align-content: center;width: {{screenW / item.length}};margin-left:0;"> <text style="font-size: 30;">{{dic.content}}</text> </div> </div> </div> <div style="background-color: rgb(235,235,235);height:1;"></div> </div> </div>
由于数据来源于第三方的,我也没仔细分析各种类型具体怎么显示,大致数据显示就是这样,具体的细节还需要花时间处理。开始我想把项目做成纯weex的,因为我发现之前项目中的weex页面对native的依赖太严重,各种参数各种事件通过module在weex和native之间来回传,导致在浏览器中跑不起来。比如这样:
WX_EXPORT_METHOD(@selector(openURL:)) WX_EXPORT_METHOD(@selector(checkVerionWithLocalVersion:)) WX_EXPORT_METHOD(@selector(updateVersion: updateState:)) WX_EXPORT_METHOD(@selector(showDatePickView)) WX_EXPORT_METHOD(@selector(rective 4000 StaffId:)) WX_EXPORT_METHOD(@selector(zicaiReceiveCall:stroreID:storeName:andCallBack:)) WX_EXPORT_METHOD(@selector(delivercapitalReceiptsIdToNextPage:)) WX_EXPORT_METHOD(@selector(toQuestionReportPage)) WX_EXPORT_METHOD(@selector(popViewControllerToBack)); WX_EXPORT_METHOD(@selector(userInformation:)) WX_EXPORT_METHOD(@selector(saveStoreIdWhenCellClicked:storeName:andCallback:)) WX_EXPORT_METHOD(@selector(deliverStoreIdFromNative:)) WX_EXPORT_METHOD(@selector(pushToZicaikuStoreList)) WX_EXPORT_METHOD(@selector(showHDProgrecessOnWeexPage)) WX_EXPORT_METHOD(@selector(hiddenHDProgrecessOnWeexPage)) WX_EXPORT_METHOD(@selector(saveStoreId:startDate:endDate:callBack:)) WX_EXPORT_METHOD(@selector(obtainSelectData:))
但当这个项目搭建好之后,在掉接口的时候发现在浏览器中会出现跨域的问题,导致所有的接口请求不到数据出错一篇空白:
报错如下:
看看weex的回答:
https://github.com/alibaba/weex/issues/139Can not be support CORS yet! But soon.
what fc!(处理跨域问题我大致看了下貌似服务器那边配置一下就行,但由于我的接口是抓包抓来的,只能我自己想办法解决。。。。。汗颜,我三天过去了我还没想到解决办法)所以只能扔进iOS工程中去跑了(无奈)。。既然web跑不起来但至少安卓和iOS还是能跑的,至少也跨平台了哈。
这里说一个iOS端的细节,由于在weex页面实现了导航栏,一开始在iOS工程中我没有用navigationController,运行时首页没有问题,weex的导航栏能正常显示,但push到下一个页面时顶部的navigationBar却不见了,再push到第三个页面的时候navigationBar又出现了,一时懵逼找不到原因,最后解决办法是native定义navigationController,然后影藏掉,比如:
self.window = ({ UINavigationController *navVC = [[UINavigationController alloc]initWithRootViewController:wxController]; navVC.navigationBar.hidden = YES; UIWindow *window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; window.rootViewController = navVC; window.backgroundColor = [UIColor whiteColor]; window; });
navigationBar.hidden = YES隐藏之后,发现weex的navigationBar终于能够正常显示了。
其中涉及到一个弹出框,不怎么懂HTML,调了很久才让弹出框悬浮起来,这里记录一下,同时也提醒我接下来要好好学学vue和HTML了:
<div if="{{show}}" style="justify-content:center;background-color:rgb(171,171,171);position:fixed;opacity:0.80;filter:alpha(opacity=40);z-index: 99;left:0;top:0;bottom: 0;right:0;filter:alpha(opacity=40);justify-content: center;"> </div> <div if="{{show}}" style="justify-content:center;height:500;z-index:190; background-color:rgb(246,246,246);position:fixed;left:30;top:200;bottom: 450;right:30; border-radius: 10;"> <div style="justify-content:center;align-items: center;flex-direction:row;flex:0.2;margin-top:15;"> <text style="flex:0.3; font-size:40;color:rgb(44,112,223);text-align:center;" onclick="cancelClicked">取消</text> <text style="flex:0.4; font-size:45;text-align:center;" >评论</text> <text style="flex:0.3; font-size:40;text-align:center;color:gray;" onclick="commentConfirmClicked">发布</text> </div> <div> <textarea class="input" autofocus="true" placeholder="点击输入..." onchange="change" input="input" > </textarea> </div> </div>
iOS程序员,写起类似HTML代码来挺费劲的,由于直接拎起来就开干,wee文档其实也没仔细看,HTML也不懂,写到哪哪不会就搜,所以js代码写的乱没抽出来公共的,css也没拎出来,重复的代码没封装。。(后期先学习了再弄)
等有空再说,明天要做新需求就没空搞Weex了。。。。。
项目github地址:https://github.com/voidxin/iCar
有什么问题请留言。
相关文章推荐
- 软银开放Pepper开发,给机器人写安卓App是怎样一种体验?
- 独立开发一个App是一种怎样的体验?
- 什么是理想,理想就是创造和实现,而高层次高境界的理想是追求和达到自我精神中的一种释放,以及对自己的满意程度。怎样让自己活得更好,四个字就可以概括,我想大家应该有自已的答案!
- 怎样实现一个程序是APP+APPWIDGET
- 裸辞是一种怎样的体验?
- “让前任后悔”是怎样一种体验?
- 在生鲜电商领域创业到底是怎样的一种苦逼体验?【创业者说】
- 怎样编写一个程序,把一个有序整数数组放到二叉树中? 编写实现链表排序的一种算法。说明为什么你会选择用这样的方法?
- 高度自律是一种怎样的体验(一)(转自知乎)
- 用远丰ShopBuilder微商城系统是一种怎样的体验
- 拿到天使投资是一种怎样的体验
- 在android App中怎样实现对设备重启或者关机功能
- 仿新闻类App实现滑动或点击换页思路
- 作为一个iOS开发者,想知道作为一个Android开发者是一种怎样的体验
- 用远丰ShopBuilder微商城系统是一种怎样的体验
- JS+CSS实现的一种交互体验 表单页面
- IOS 怎样实现APP版本更新
- 大四重写大一的C语言大作业是一种怎样的体验
- Android社交类APP动态详情代码实现通用模板