先上效果圖：

詳情頁：

寫在前面的話（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

如果要用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:))

但當這個專案搭建好之後，在掉介面的時候發現在瀏覽器中會出現跨域的問題，導致所有的介面請求不到資料出錯一篇空白：

報錯如下：

看看weex的回答：

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>

iOS程式設計師，寫起類似HTML程式碼來挺費勁的，由於直接拎起來就開幹，wee文件其實也沒仔細看，HTML也不懂，寫到哪哪不會就搜，所以js程式碼寫的亂沒抽出來公共的，css也沒拎出來，重複的程式碼沒封裝。。（後期先學習了再弄）
等有空再說，明天要做新需求就沒空搞Weex了。。。。。
專案github地址：https://github.com/voidxin/iCar
有什麼問題請留言。