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做的。

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

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

配置

看过我前一篇的文章,就知道我们的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)。

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

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

相关推荐