目錄
- 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)。
想用但還沒有去實踐過的，真的可以去試試了。
最後歡迎評論交流學習啊，如果喜歡就請點個贊~~