先上效果圖：
詳情頁：
![]()
圖片排列.gif
寫在前面的話（weex在實際項目中給我的感受)：
公司項目中我已嘗試部分頁面使用Weex實現(xiàn)(iOS端)切平，把weex文件放在了公司服務器上扳躬，使用url去加載weex渲染成原生頁面（之前我想把文件放在七牛上，但是由于七牛有CDN緩存糖儡，每次修改一個文件之后都要刷新該文件伐坏，當文件多了之后這是一個比較牙疼的事情，所以就還是扔進了公司的服務器中）握联。本月中旬公司app新版本發(fā)版了桦沉，過去了十幾天了，從體驗上來說金闽，weex渲染的頁面還是和純native寫的頁面在細微的用戶體驗上來說還是有差別的（weex寫的總感覺還是沒原生的流暢纯露，當然可能由于在下水平有限，代碼沒寫好的原因）代芜。特別是在某個查詢頁面中埠褪，由于后臺數(shù)據(jù)沒有做分頁處理，導致請求數(shù)據(jù)時后臺一下子返回了幾千條數(shù)據(jù)（汗挤庇，為啥不分頁）钞速。在用list和cell去顯示的時候發(fā)現(xiàn)原生的tableView一直在不斷的渲染cell，幾千數(shù)據(jù)要渲染三四分鐘嫡秕，而此時頁面中所有的相應事件失效（其實是延遲渴语，等頁面渲染完成后如點擊事件才響應）。造成了很不好的體驗昆咽，導致我對數(shù)據(jù)多的時候使用weex形成了恐懼驾凶⊙栏Γ可見Weex渲染原生tableView的時候cell的重用機制沒有做好。最后沒辦法调违，既然后臺沒做分頁窟哺，那只能我來做，控制每次只顯示20條數(shù)據(jù)翰萨，然后添加上拉加載更多....由此解決了懵逼了好久的tableView渲染問題脏答。 由此終于體會到了宛如H5版的發(fā)版節(jié)奏（馬上修改馬上生效糕殉，再也不用等發(fā)版了）亩鬼。這感覺怎一個爽字了得。
回到本文的主題:
用Weex實現(xiàn)新聞類詳情頁面是怎樣的一種體驗阿蝶？
爽雳锋！
weex用數(shù)據(jù)去渲染界面和iOS native 先寫界面再填充數(shù)據(jù)的思想還是很不一樣的，正如一系列復雜的詳情類頁面一樣羡洁，用native不管是oc還是swift寫的時候那叫一個蛋疼啊玷过，如果能夠根據(jù)數(shù)據(jù)實時的去渲染頁面（從一堆數(shù)據(jù)中遇到圖片就顯示圖片，遇到表格就顯示表格筑煮，遇到文字就顯示文字辛蚊，那且不是比native獲取到數(shù)據(jù)之后拼接成html的格式然后使用webView去加載省事簡單了許多），把數(shù)據(jù)組裝成html在webView中顯示是目前大多數(shù)詳情類頁面采用的方案真仲。
可參考這篇文章：https://blog.6ag.cn/1514.html
當然還有體驗更好的完美的框架——DTCoreText袋马，用DTCoreText體驗更完美。
現(xiàn)在嘗試Weex實現(xiàn)秸应。比如下面這種表格頁面：
數(shù)據(jù)接口如下：
http://api.ycapp.yiche.com/appnews/GetStructNews?newsId=65523&ts=20161215074823&plat=2&theme=0&version=7.6
如果要用native實現(xiàn)的話估計得花一段時間才能解決虑凛，那么用weex就很容易實現(xiàn)了：
<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>
由于數(shù)據(jù)來源于第三方的，我也沒仔細分析各種類型具體怎么顯示软啼，大致數(shù)據(jù)顯示就是這樣桑谍，具體的細節(jié)還需要花時間處理。開始我想把項目做成純weex的祸挪，因為我發(fā)現(xiàn)之前項目中的weex頁面對native的依賴太嚴重锣披，各種參數(shù)各種事件通過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:))
但當這個項目搭建好之后雹仿，在調接口的時候發(fā)現(xiàn)在瀏覽器中會出現(xiàn)跨域的問題，導致所有的接口請求不到數(shù)據(jù)出錯一篇空白：
報錯如下：
看看weex的回答：
https://github.com/alibaba/weex/issues/139
Can not be support CORS yet! But soon.
what fc闪唆！
（處理跨域問題我大致看了下貌似服務器那邊配置一下就行盅粪，但由于我的接口是抓包抓來的，只能我自己想辦法解決悄蕾。票顾。础浮。。奠骄。汗顏豆同，我三天過去了我還沒想到解決辦法）所以只能扔進iOS工程中去跑了（無奈）。含鳞。既然web跑不起來但至少安卓和iOS還是能跑的影锈，至少也跨平臺了哈。
這里說一個iOS端的細節(jié)蝉绷，由于在weex頁面實現(xiàn)了導航欄鸭廷，一開始在iOS工程中我沒有用navigationController，運行時首頁沒有問題熔吗，weex的導航欄能正常顯示辆床，但push到下一個頁面時頂部的navigationBar卻不見了，再push到第三個頁面的時候navigationBar又出現(xiàn)了桅狠，一時懵逼找不到原因，最后解決辦法是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隱藏之后津滞，發(fā)現(xiàn)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">發(fā)布</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
有什么問題請留言。
