Weex系列(4) —— 老生常谈的三端统一

目录

• Weex系列(序) —— 总要知道原生的一点东东(iOS)
• Weex系列(序) —— 总要知道原生的一点东东(Android)
• Weex系列(1) —— Hello World项目
• Weex系列(2) —— 页面跳转和通信
• Weex系列(3) —— 单页面还是多页面
• Weex系列(4) —— 老生常谈的三端统一
• [Weex系列(5) —— 封装原生组件和模块]
• [Weex系列(6) —— css相关小结]
• [Weex系列(7) —— web组件和webview]
• [Weex系列(8) —— 是时候简析一下流程原理了]
• [Weex系列(9) —— 踩坑填坑的集锦]
• [Weex系列(10) —— 先这么多吧想到再写。。。]

哎，手动捂脸，真的是好忙的两周，拔了一颗智齿、做了一个三端的投票活动、参加了微信马拉松比赛。还好都坚持过来了，我怎么这么优秀，还是手动doge一下吧。

上面提到了一个三端投票活动，之前还想着怎么写这篇文章，做了这个活动后，感觉有千言万语。。

场景

附上我们的 活动链接 ，欢迎为自己喜欢的爱豆打call哦。APP端，欢迎搜索 黑猫投诉 或 新浪众测 呦，点击banner都可以双倍投票呢。对，这两个app都是基于weex做的。

打开活动页，可以看到就三个页面，首页、明星详情页、明星列表页。刚看到这仨页面的时候，我就想着可以用路由，做成三端统一。

配置

看过我前一篇的文章，就知道我们的app都是多页面的，webpack只会打包成多个js，按照我上面的思路，这个时候需要修改配置，做过vue大型项目的应该遇到过吧，我之前是没有弄过，花了半天时间，参考的是已有的app多页面配置，和新建的只有单页面项目的配置，终于修改好了配置文件。（这里的单页多页可以参考我的前一篇文章）。

然后就把静态的三个页面切好了，在app端和web样式基本都是正常的。
如果你用的是最近的weex脚手架，web的index.html里面需要引入dist目录里面对应的index.web.js和vendor.web.js，而不是网上weex-hackernews-master项目里面引的weex-vue-render等js。（不然是不能单独运行的）

vendor.web.js里面兼容了我们使用的weex组件和模块，有兴趣的可以去研究一下。

开始其实还挺顺利的，但是中间遇到了很多问题，主要列出以下几点吧

封装的模块和组件

刚开始拿到项目的时候，想的还是少了。weex只是处理了他支持的组件和模块，所以我们自己封装的就需要自己做兼容了/(ㄒoㄒ)/~~。

这里要说的一点是weex-ui也是处理过了，比如wxc-slider-bar三端基本无差异。

比如我们这边的登录模块，h5是一套登录组件，app里面是微博的登录模块。由此还牵扯的有相关的请求方法、后端接口处理等。

样式

这部分真的三端基本是高度统一的，部分微调一下就可以了，也正是这样，我们后续才能迅速解决h5和pc。

总结

上面模块那部分由于涉及项目，我是简单几笔带过，其实这块真的是挺麻烦的，祝大家顺利吧。

这次我们是有pc、h5、两个app的两端，其实是6端，时间也是挺紧的，所以最后基本还是h5、pc维护一套，app再维护一套。

终于不是谈谈三端统一了，也是真的体验了一次，虽然最后有点出入，但是下次基本是没问题了(doge)。

想用但还没有去实践过的，真的可以去试试了。

最后欢迎评论交流学习啊，如果喜欢就请点个赞~~