wei UI使用

時間 2019-11-12

標籤 wei 使用简体版

原文原文鏈接

一、前言

經過前面系列文章的學習與講解，相信你們已經對微信的開發有了一個全新的認識。後端基本可以基於盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。關於手機端的瀏覽器的兼容性問題相信一直是開發者們的一塊心病，對於微信開發前端組件這一塊老是找不到合適的移動端組件，什麼都要本身去實現，這個開發成本就大了去了。因而乎博主打算另闢蹊徑，找找基於微信開發的移動端UI組件，最後找到了微信官方開發的一套前端組件：WeUI。javascript

二、WeUI基本介紹

2.1 WeUI概述

WeUI、微信公衆號開發的瑞士軍刀。WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。有了這個做爲基礎，咱們不再用擔憂微信開發的瀏覽器兼容性問題了，微信官方推出的這個東西拯救了千千萬萬的開發者！css

jQuery WeUI 是專爲微信公衆帳號開發而設計的一個簡潔而強大的UI庫，包含所有WeUI官方的CSS組件，而且額外提供了大量的拓展組件，豐富的組件庫能夠極大減小前端開發時間。html

jQuery WeUI 的最大特色是它只提供UI組件，並不會對項目所使用的框架和其餘庫有任何的限制，幾乎能夠在任何環境下使用。不管你的項目是基於jQuery，仍是 React, Angular, Vue，你都會發現 jQuery WeUI 能很是方便的和他們結合使用。既是你的項目是一個有很悠久歷史的老項目，也幾乎能夠作到拿來即用。前端

WeUI開源地址：https://github.com/Tencent/weuijava

WeUI使用示例：https://weui.io/jquery

基於jquery的WeUI：http://jqweui.com/（提供了大量的第三方組件庫）git

2.2 爲何選擇jQuery WeUI

jQuery WeUI 的定位正如 jQuery 的定位：作一把鋒利易用的小刀，而不是作一個笨重的大炮。github

簡單易用，無上手難度
豐富強大的組件庫，而且還在不斷完善中
輕量，無限制，能夠結合任何主流JS框架使用，好比 Vue, Angular, React 等
高性能的 CSS3 動畫，低端手機上依然能夠較流暢運行
詳盡完善的官方文檔
標準穩定的API，基本能夠保證版本透明更新
基於 MIT 協議發佈，免費開源

下面引用幾張WeUI官方提供的jQuery WeUI組件展現。

npm

三、jQuery WeUI基本用法

考慮到你們對WeUI組件的使用有憂慮，不知如何下手。下面我就從最基礎的開始，手把手教你入門WeUI。已經很熟悉的朋友請直接跳過此段，前往官方網站查看demo。小程序

一、引用必須的文件

若是你用的是原始的開發方式，好比基於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" />

二、最基礎的組件樣式

下面咱們以一個最基礎的表單來展現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="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>足球</p> </div> </label> <label class="weui-cell weui-check__label" for="s13"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id="s13" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>游泳</p> </div> </label> </div> </div> </div> <div class="weui-cell weui-cell_select"> <div class="weui-cell__bd"> <select class="weui-select" name="select1"> <option selected="" value="1">微信號</option> <option value="2">QQ號</option> <option value="3">Email</option> </select> </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="text" placeholder="請輸入驗證碼" /> </div> <div class="weui-cell__ft"> <img class="weui-vcode-img" src="vcode.png" /> </div> </div> </div> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">肯定</a> </div> </div> </div> </div> </body> </html>

咱們用google瀏覽器的移動端模式測試效果以下：

代碼講解

（1）網頁上面的<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">這一句必需要有，這個和WeUI無關，是瀏覽器的顯示比例問題。建議各位準備作移動端開發以前能夠百度下viewport的含義，這樣更容易理解響應式。加這一句是告訴瀏覽器在不一樣的設備上面的顯示比例問題。

（2）最外面必需要有一個大的容器div，即上述代碼裏面的

這個標籤；頁面的全部標籤必須放在這個裏面；

（3）上述代碼裏面的radio和checkbox的效果是能夠切換的。好比上述代碼改下能夠將性別這一項變成多選選，愛好這一項變成單選，你只須要將radio和checkbox切換便可。

四、其餘基礎組件展現

4.一、switch開關

<div class="container" id="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 weui-cell_switch"> <div class="weui-cell__bd">是否顯示</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox" /> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">是否置頂（兼容IE瀏覽器寫法）</div> <div class="weui-cell__ft"> <label for="switchCP" class="weui-switch-cp"> <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked" /> <div class="weui-switch-cp__box"></div> </label> </div> </div> </div> </div> </div> </div>

4.二、文本框搜索組件

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> @*<--example.css能夠不引用-->*@ <link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form" onsubmit="return false;"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required /> <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> </div> <label class="weui-search-bar__label" id="searchText"> <i class="weui-icon-search"></i> <span>搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div> <div class="weui-cells searchbar-result" id="searchResult"> </div> </div> </div> </div> <script src="~/scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ var $searchBar = $('#searchBar'), $searchResult = $('#searchResult'), $searchText = $('#searchText'), $searchInput = $('#searchInput'), $searchClear = $('#searchClear'), $searchCancel = $('#searchCancel'); function hideSearchResult(){ $searchResult.hide(); $searchInput.val(''); } function cancelSearch(){ hideSearchResult(); $searchBar.removeClass('weui-search-bar_focusing'); $searchText.show(); } $searchText.on('click', function(){ $searchBar.addClass('weui-search-bar_focusing'); $searchInput.focus(); }); $searchInput .on('blur', function () { if(!this.value.length) cancelSearch(); }).on('keydown', function (event) { if (event.keyCode == 13) { alert("執行搜索"); } }); ; $searchClear.on('click', function(){ hideSearchResult(); $searchInput.focus(); }); $searchCancel.on('click', function(){ cancelSearch(); $searchInput.blur(); }); }); </script> </body> </html>

4.三、正在加載、暫無更多、查看更多效果

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-loadmore"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加載</span> </div> <div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暫無數據</span> </div> <div class="weui-panel__ft"> <a href="#" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;" class="weui-cell weui-cell_access weui-cell_link"> <div class="weui-cell__bd" style="font-size:16px;">查看更多</div> <span class="weui-cell__ft"></span> </a> </div> </div> </div> </div> </body> </html>

4.四、圖片全屏預覽

首先引入必須的樣式文件

<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" />

在body最後面引入js

<script src="~/scripts/jquery-1.9.1.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script>

須要說明的是這個效果須要jquery-weui.js組件的支持。你須要去down這個組件的dist目錄，而後引用dist目錄下面的swiper.js文件。這塊有問題的能夠單獨留言。

引入相關的css與js文件以後，下面就能夠開始着手寫html了。

<div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">瀏覽圖片</a> </div></div> </div> </div>

js代碼初始化

script type="text/javascript"> var pb1 = $.photoBrowser({ items: [ "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg", "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg", "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg" ] }); $('#showQuery').on('click', function () { pb1.open(); //打開 }); </script>

swiper組件還提供了帶圖片文字描述的效果，和PC端的焦點圖效果同樣同樣的。咱們將上述js代碼稍做修改：

<script type="text/javascript"> var pb1 = $.photoBrowser({ items: [ { image: "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg", caption: "文字描述1" }, { image: "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg", caption: "文字描述2" }, { image: "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg", caption: "文字描述3" } ] }); $('#showQuery').on('click', function () { pb1.open(); //打開 }); </script>