用Weex实现新闻类app详情页是怎样一种体验？

2016-12-21 本文已影响6068人 voidxin

先上效果图：

录制好了.gif

详情页：图片排列.gif

写在前面的话（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

当然还有体验更好的完美的框架——DTCoreText，用DTCoreText体验更完美。
现在尝试Weex实现。比如下面这种表格页面：

IMG_6285.PNG

IMG_6286.PNG
数据接口如下：
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(rectiveStaffId:))
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:))

但当这个项目搭建好之后，在调接口的时候发现在浏览器中会出现跨域的问题，导致所有的接口请求不到数据出错一篇空白：

QQ20161221-0.png

报错如下：

QQ20161221-12.png
看看weex的回答：
https://github.com/alibaba/weex/issues/139

Can 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>

QQ20161221-18.png

iOS程序员，写起类似HTML代码来挺费劲的，由于直接拎起来就开干，wee文档其实也没仔细看，HTML也不懂，写到哪哪不会就搜，所以js代码写的乱没抽出来公共的，css也没拎出来，重复的代码没封装。。（后期先学习了再弄）
等有空再说，明天要做新需求就没空搞Weex了。。。。。
项目github地址：https://github.com/voidxin/iCar
有什么问题请留言。

用Weex实现新闻类app详情页是怎样一种体验？

先上效果图：

详情页：图片排列.gif

写在前面的话（weex在实际项目中给我的感受)：

回到本文的主题:

用Weex实现新闻类详情页面是怎样的一种体验？

Can not be support CORS yet! But soon.

猜你喜欢

热点阅读

用Weex实现新闻类app详情页是怎样一种体验？

先上效果图：

详情页： 图片排列.gif

写在前面的话（weex在实际项目中给我的感受)：

回到本文的主题:

用Weex实现新闻类详情页面是怎样的一种体验？

Can not be support CORS yet! But soon.

猜你喜欢

热点阅读

详情页：图片排列.gif