前言：年前的兩個星期，學習了下微信公衆号的開發。後端基本能夠基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，關于手機端的浏覽器的相容性，一直是部落客的一塊心病，因為部落客一直專注于bootstrap的相關元件學習，知道bootstrap做響應式沒有任何問題，是以曾經嘗試過直接用bootstrap來布局，對于一些簡單的栅格布局，bootstrap沒有任何問題，可是一旦涉及前端元件這一塊的時候，總是找不到合适的移動端元件，什麼都要自己去實作，這個開發成本就大了去了。于是乎部落客打算另辟蹊徑，找找基于微信開發的移動端UI元件，最後找到了微信官方開發的一套前端元件：WeUI。
本文原創位址：http://www.cnblogs.com/landeanfen/p/8473755.html
WeUI 是一套同微信原生視覺體驗一緻的基礎樣式庫，由微信官方設計團隊為微信内網頁和微信小程式量身設計，令使用者的使用感覺更加統一。有了這個作為基礎，媽媽再也不用擔心微信開發的浏覽器相容性問題了，微信官方推出的東西應該比較靠譜吧！
WeUI開源位址：https://github.com/Tencent/weui
WeUI使用示例：https://weui.io/
基于jquery的WeUI：http://jqweui.com/（提供了大量的第三方元件庫）
考慮到一些園友對于第三方元件的使用不知道如何下手或者不太熟悉，部落客不厭其煩從最基礎的開始，手把手教你入門WeUI。已經很熟悉的園友請直接跳過此段，前往官方網站檢視demo。
如果你用的是原始的開發方式，比如基于jQuery的開發，那麼你首先需要去Github上面将WeUI的源檔案down下來，然後引入到你的項目；如果是基于npm管理元件，使用npm指令的方式引入WeUI元件即可。這裡部落客使用的是原始的開發方式。需要說明的是，如果你隻需要WeUI的css樣式支援，那麼你隻需要引入weui.css檔案即可；如果除了樣式之外，還需要WeUI的js元件支援，那麼你還需要引用另外一個包：weui.js。今天這篇，部落客就先介紹下基礎的WeUI樣式庫，先來看看WeUI到底能為我們帶來啥，以後如果有機會再來分享WeUI.js以及jquery.WeUI.js的相關技術。
這裡首先引入必須的css樣式檔案
官方的demo裡面為了使示範的效果更好，還引入了example.css檔案，但這個并不是必須的！
第一個例子我們還是用最基礎的表單來說明。我們來看看下面一個基礎的個人資料錄入的頁面效果：
我們用google浏覽器的移動端模式測試效果如下：
代碼說明
（1）網頁上面的 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> 這一句必須要有，這個和WeUI無關，是浏覽器的顯示比例問題。建議各位準備做移動端開發之前可以百度下viewport的含義，這樣更容易了解響應式。根據部落客的了解，加這一句是告訴浏覽器在不同的裝置上面的顯示比例問題。
（2）最外面必須要有一個大的容器div，即上述代碼裡面的 <div class="container" id="container"> 這個标簽；頁面的所有标簽必須放在這個裡面；
（3）上述代碼裡面的radio和checkbox的效果是可以切換的。比如上述代碼改下可以将性别這一項變成多選選，愛好這一項變成單選，你隻需要将radio和checkbox切換即可。
有了上面的基礎表單作為基礎，我們示範其他示例就簡單很多了。這裡并不會将WeUI官網上面的例子挨個示範個遍，隻是抽其中幾個來示範和講解。
（1）switch開關
效果如下
（2）文本框搜尋元件
（3）正在加載、暫無更多、檢視更多效果
效果展示
這些東西雖然不難，但如果全部都要我們自己去實作，估計也得花不少時間吧。
雖然在移動端大部分情況下不建議使用彈出操作，但某些情況下，彈出一些東西操作起來其實也挺友善的，還是那句話：存在即合理。沒有最好的方式，隻有最适合的方式。我們來看部落客簡單封裝的一段彈出層代碼。
以上都是一些最基礎的Dom操作，如果需要在項目裡面用起來，可以進行簡單的dialog元件封裝。
第二個例子部落客不打算再示範原生的WeUI效果了，來看一個基于jquery的WeUI封裝示例。
首先引入必須的檔案
在body最後面引入js
需要說明的是這個效果需要jquery-weui.js元件的支援。你需要去down這個元件的dist目錄，然後引用dist目錄下面的swiper.js檔案。這塊有問題的可以單獨留言。
引入了檔案之後，然後第二部就是我們的html了
最後是js初始化
效果如下：
這裡是通過圖檔的實體路徑去動态渲染生成img标簽的。效果還不過！除此之外，swiper元件還提供了帶圖檔文字描述的效果，和PC端的焦點圖效果一樣一樣的。
我們将上述js代碼稍作修改：
當然，大部分情況下，我們在實際使用的時候這種通過已經存在的圖檔檔案的路徑渲染的場景不是很多，更多的是通過頁面上已經存在的img标簽的來渲染圖檔的。我們來個例子試試水。
比如我們複制一段網頁内容，裡面是圖文混合的。然後用js去提取其中圖檔的src。
我們繼續優化下，将最上面的按鈕去掉，然後給每個圖檔加上點選事件，這樣是不是更加真實呢！
在尋找微信前端架構的時候，關注過各種微信公衆号，發現一個叫“愛攝彙”的公衆号，它的前端效果就是基于WeUI去做的，跟着學習了下，覺得它功能簡單，但是頁面效果做得還可以，對攝影有興趣或者想學習WeUI基礎方法的園友可以關注看看。
至此本篇基本結束。就這麼泛泛總結了下，花了幾乎兩天時間，寫點東西不容易。如果大家有其他關于WeUI的使用問題，可以留言！等以後再用到更多WeUI的進階功能，再來跟大家做分享。如果你覺得本文能夠幫助你，可以右邊随意 打賞 部落客。
本文原創出處：http://www.cnblogs.com/landeanfen/
歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連接配接，否則保留追究法律責任的權利