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

wzyplus 发布于2019-08-23 14:09 / 1763人阅读

摘要：刚看到这仨页面的时候，我就想着可以用路由，做成三端统一。样式这部分真的三端基本是高度统一的，部分微调一下就可以了，也正是这样，我们后续才能迅速解决和。终于不是谈谈三端统一了，也是真的体验了一次，虽然最后有点出入，但是下次基本是没问题了。

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)。

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

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

云服务器 GPU云服务器三端统一系列4 d-fusion 5000系列统一存储系统老生常谈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100186.html

Weex系列(1) ——Hello World项目

摘要：由于最开始没有一点点原生开发的经验，所以我就直接用的脚手架初始化项目。那下面我们就从最最原始的项目开始吧，序篇太枯燥，自由发挥时间开始啦。执行如下代码，最后会得到如图的项目结构。入口文件等简析进行了初始化。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello Wor...

xiaowugui666 2019-08-23 12:53 评论0 收藏0
Weex系列(9) —— Weex和安卓升级兼容

摘要：方法接口什么的直接移除，真是个狠人啊，这个只能大家一个个文件去改喽，官网链接比如我这边是把换成安卓升级相关升级之前先来解释个吧原文章是告诉用哪个版本编译应用程序。应该强调的是，更改不会改变运行时行为。是提供向前兼容的主要依据。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) ——...

waltr 2019-08-23 15:41 评论0 收藏0
Weex系列(9) —— Weex和安卓升级兼容

摘要：方法接口什么的直接移除，真是个狠人啊，这个只能大家一个个文件去改喽，官网链接比如我这边是把换成安卓升级相关升级之前先来解释个吧原文章是告诉用哪个版本编译应用程序。应该强调的是，更改不会改变运行时行为。是提供向前兼容的主要依据。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) ——...

Flink_China 2019-08-16 15:34 评论0 收藏0