资讯类网站如何填充内容(用Weex实现新闻类详情页面是怎样的一种体验？)

　　资讯类网站如何填充内容(用Weex实现新闻类详情页面是怎样的一种体验？)

　　本文同时发表于：

　　先上效果图：

　　详情页面：

　　写在前面的话（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 原生中先写界面再填充数据的思路是很不一样的。就像一系列复杂的详细页面一样，无论是 oc 还是 swift，用 native 编写都是一件很痛苦的事情。如果可以根据数据实时渲染页面（遇到一堆数据中的图片，显示图片，遇到表格，显示表格，遇到文字，显示文字，那么不是原生获取数据后拼接成html的格式，那么使用webView加载就简单多了），将数据组装成html并在webView中展示是目前大部分详情页采用的方案。

　　你可以参考这个文章：

　　当然，使用 Weex 似乎要简单得多。例如，以下表单页面：

　　数据接口如下：

　　如果要使用native实现，估计需要一段时间才能解决，那么用weex实现就很容易了：

{{dic.content}}

　　由于数据来自第三方，所以我没有仔细分析各种类型是如何显示的。一般的数据展示是这样的，具体的细节还是需要处理的。一开始想把项目做成纯weex，因为发现之前项目中的weex页面对native依赖太多，各种参数和各种事件都通过模块在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 的回答：

　　还不能支持CORS！不过很快。

　　什么FC！

　　（为了处理跨域问题，我大致看了一下服务器端的配置，但是由于我的接口是抓包的，只能自己想办法解决了……惭愧，我通过了我的三天。还没想到解决办法）所以只能扔到iOS项目中运行（无奈）。. 既然web不能跑，至少Android和iOS还能跑，至少跨平台。

　　这是iOS方面的详细信息。由于导航栏是在weex页面上实现的，所以我一开始没有在iOS项目中使用navigationController。主页在运行时没有问题。weex的导航栏可以正常显示，但是顶部push到下一页。导航栏消失了，当我推到第三页时，导航栏又出现了。一时间找不到原因。最终的解决方案是原生定义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：

取消

评论

发布

　　对于 iOS 程序员来说，编写类似 HTML 的代码是非常费力的。由于是刚拿起并启动，wee文档没有仔细阅读，HTML看不懂。公共的不抽出来，CSS不抽出来，重复的代码不封装。. （以后学习再做）

　　有时间再说吧。如果我明天要满足新的需求，我将没有时间从事 Weex。. . . .

　　项目github地址：

　　如果您有任何问题，请留言。