weui-react簡介

weui是微信官方制作的一個基礎樣式UI庫，打造與原生微信同樣的視覺和交互體驗，整個UI庫包括網頁版和小程序版，網頁版包括傳統的javascript版和react版本。
個人對react的偏愛超過傳統js版本，就用了react版本做為自己的核心框架。
weui-react 官網：點擊這里

背景介紹

計劃做一個基于圖書交換平臺，大家可以通過平臺發布自己的閑置書籍，如有人愿意通過自己的閑置書籍進行交換，即可達成交易。
作為一個后端的開發人員，想做一些可以上線運營的項目，沒有好的前端配合是很難完成的。現在越來越多的開源UI可以使用，基本上能夠上手即用。
為了便于開發，把精力更多的放在業務和后端，對前端的技術棧進行了選擇，基于微信的項目，我選擇這樣的核心框架：
基礎框架：react
UI框架：weui-react
構建工具: webpack
路由工具: react-router

使用心得

具體的入門使用方法我就不介紹了，很簡單，看官方文檔。其實，現在的前端框架使用都是很簡單的，基本都是npm install 、然后就是import 搞定，這是前端這些非常明顯的進步。

升級到ES6

weui-react使用的前提是對react有一個基本認識，weui-react使用的是es6的語法，如果大家還在使用es5，依然是可以兼容的,但還是強烈建議大家還是切換到es6，這個是趨勢，真的比es5的語法好很多，對于我們這種后端開發人員，es6的語法還是感覺很親切的。

多看官方示例，文檔基本沒什么意義

weui的官方文檔，相比開放平臺的文檔，還是有不少差距的，單是好在weui本身就是一個很簡答的框架，使用起來也沒有太大的問題，主要還是通過示例去了解使用方法，具體的文檔說明，基本可以忽略。

使用wepack提升工作效率

使用時，強烈建議以webpack作為構建工具，雖然入門需要點時間，但是熟悉后真的是事半功倍。

react-router

單頁面開發的時候，都會有很難點，就是頁面間的路由，react還是推薦使用react-router,新舊版本的使用還是有些差別，建議直接用最新版本，雖然資料少了點，但是英文文檔還是挺清晰的。這里可能要多換點時間調試。

界面預覽

最后

代碼地址：https://github.com/itmifen/bookdrift
現在還在做后端接口的開發，逐漸會完成前后端的代碼，前后端的代碼都會全部開源。歡迎fork。

---

歡迎大家關注我的公眾號交流、學習、第一時間獲取最新的文章。
微信號：itmifen

轉載于:https://juejin.im/post/5ac1a03751882577b45f2bbd

總結

以上是生活随笔為你收集整理的weui-react项目实战新心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。