目录
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 一下吧。
上面提到了一个三端投票活动,之前还想着怎么写这篇文章,做了这个活动后,感觉有千言万语。。
场景
附上我们的活动链接 https://tousu.sina.cn/activit…,欢迎为自己喜欢的爱豆打 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)。
想用但还没有去实践过的,真的可以去试试了。
最后欢迎评论交流学习啊,如果喜欢就请点个赞~~