1、前言
通過前面系列文章的學習與講解,相信大家已經對微信的開發有了一個全新的認識。后端基本能夠基於盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。關於手機端的瀏覽器的兼容性問題相信一直是開發者們的一塊心病,對於微信開發前端組件這一塊總是找不到合適的移動端組件,什么都要自己去實現,這個開發成本就大了去了。於是乎博主打算另辟蹊徑,找找基於微信開發的移動端UI組件,最后找到了微信官方開發的一套前端組件:WeUI。
2、WeUI基本介紹
2.1 WeUI概述
WeUI、微信公眾號開發的瑞士軍刀。WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程序量身設計,令用戶的使用感知更加統一。有了這個作為基礎,我們再也不用擔心微信開發的瀏覽器兼容性問題了,微信官方推出的這個東西拯救了千千萬萬的開發者!
jQuery WeUI 是專為微信公眾賬號開發而設計的一個簡潔而強大的UI庫,包含全部WeUI官方的CSS組件,並且額外提供了大量的拓展組件,豐富的組件庫可以極大減少前端開發時間。
jQuery WeUI 的最大特點是它只提供UI組件,並不會對項目所使用的框架和其他庫有任何的限制,幾乎可以在任何環境下使用。無論你的項目是基於jQuery,還是 React, Angular, Vue, 你都會發現 jQuery WeUI 能非常方便的和他們結合使用。既是你的項目是一個有很悠久歷史的老項目,也幾乎可以做到拿來即用。
WeUI開源地址:https://github.com/Tencent/weui
WeUI使用示例:https://weui.io/
基於jquery的WeUI:http://jqweui.com/(提供了大量的第三方組件庫)
2.2 為什么選擇jQuery WeUI
jQuery WeUI 的定位正如 jQuery 的定位:做一把鋒利易用的小刀,而不是做一個笨重的大炮。
- 簡單易用,無上手難度
- 豐富強大的組件庫,並且還在不斷完善中
- 輕量,無限制,可以結合任何主流JS框架使用,比如
Vue, Angular, React
等 - 高性能的 CSS3 動畫,低端手機上依然可以較流暢運行
- 詳盡完善的官方文檔
- 標准穩定的API,基本可以保證版本透明更新
- 基於 MIT 協議發布,免費開源
下面引用幾張WeUI官方提供的jQuery WeUI組件展示。
3、jQuery WeUI基本用法
考慮到大家對WeUI組件的使用有憂慮,不知如何下手。下面我就從最基礎的開始,手把手教你入門WeUI。已經很熟悉的朋友請直接跳過此段,前往官方網站查看demo。
1、引用必須的文件
如果你用的是原始的開發方式,比如基於jQuery的開發,那么你首先需要去Github上面將WeUI的源文件down下來,然后引入到你的項目;如果是基於npm管理組件,使用npm命令的方式引入WeUI組件即可。這里我們使用的是原始的開發方式。如果你只需要WeUI的css樣式支持,那么你只需要引入weui.css文件即可;如果除了樣式之外,還需要WeUI的js組件支持,那么你還需要引用另外一個包:weui.js。下面先介紹基礎的WeUI樣式庫,先來看看WeUI到底能為我們帶來啥,后面再來分享WeUI.js以及jquery.WeUI.js的相關技術。
要使用WeUI,這里首先必須引入css樣式文件
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
2、最基礎的組件樣式
下面我們以一個最基礎的表單來展示WeUI的使用方法,如下我們開發一個個人資料錄入的頁面效果。
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>個人資料錄入</title> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" /> </head> <body> <div class="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-cells__title">填寫個人資料</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">姓名</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="請輸入姓名" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">QQ</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" pattern="[0-9]*" placeholder="QQ號" /> </div> </div> <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__hd"> <label class="weui-label">手機號</label> </div> <div class="weui-cell__bd"> <input class="weui-input" type="tel" placeholder="請輸入手機號" /> </div> <div class="weui-cell__ft"> <button class="weui-vcode-btn">獲取驗證碼</button> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">出生日期</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="date" value="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">注冊時間</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="datetime-local" value="" placeholder="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">性別</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_radio"> <label class="weui-cell weui-check__label" for="x11"> <div class="weui-cell__bd"> <p>男</p> </div> <div class="weui-cell__ft"> <input type="radio" class="weui-check" name="radio1" id="x11" /> <span class="weui-icon-checked"></span> </div> </label> <label class="weui-cell weui-check__label" for="x12"> <div class="weui-cell__bd"> <p>女</p> </div> <div class="weui-cell__ft"> <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" /> <span class="weui-icon-checked"></span> </div> </label> </div> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">愛好</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_checkbox"> <label class="weui-cell weui-check__label" for="s11"> <div class="weui-cell__hd"> <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>籃球</p> </div> </label> <label class="weui-cell weui-check__label" for="s12"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id="s12" /> <i class=