微信開發系列——微信訂閱號前端開發利器：WeUI
前言：年前的兩個星期，學習了下微信公眾號的開發。後端基本能夠基於盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，關於手機端的瀏覽器的相容性，一直是博主的一塊心病，因為博主一直專注於bootstrap的相關元件學習，知道bootstrap做響應式沒有任何問題，所以曾經嘗試過直接用bootstrap來佈局，對於一些簡單的柵格佈局，bootstrap沒有任何問題，可是一旦涉及前端元件這一塊的時候，總是找不到合適的移動端元件，什麼都要自己去實現，這個開發成本就大了去了。於是乎博主打算另闢蹊徑，找找基於微信開發的移動端UI元件，最後找到了微信官方開發的一套前端元件：WeUI。
一、WeUI元件介紹
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。有了這個作為基礎，媽媽再也不用擔心微信開發的瀏覽器相容性問題了，微信官方推出的東西應該比較靠譜吧！
基於jquery的WeUI：http://jqweui.com/（提供了大量的第三方元件庫）
二、元件基本用法
考慮到一些園友對於第三方元件的使用不知道如何下手或者不太熟悉，博主不厭其煩從最基礎的開始，手把手教你入門WeUI。已經很熟悉的園友請直接跳過此段，前往官方網站檢視demo。
1、引用必須的檔案
如果你用的是原始的開發方式，比如基於jQuery的開發，那麼你首先需要去Github上面將WeUI的原始檔down下來，然後引入到你的專案；如果是基於npm管理元件，使用npm命令的方式引入WeUI元件即可。這裡博主使用的是原始的開發方式。需要說明的是，如果你只需要WeUI的css樣式支援，那麼你只需要引入weui.css檔案即可；如果除了樣式之外，還需要WeUI的js元件支援，那麼你還需要引用另外一個包：
這裡首先引入必須的css樣式檔案
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
官方的demo裡面為了使演示的效果更好，還引入了example.css檔案，但這個並不是必須的！
2、最基礎的元件樣式
第一個例子我們還是用最基礎的表單來說明。我們來看看下面一個基礎的個人資料錄入的頁面效果：
<!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"> <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="~/Content/weui-master/dist/example/images/vcode.jpg" /> </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，即上述程式碼裡面的 <div class="container" id="container"> 這個標籤；頁面的所有標籤必須放在這個裡面；
（3）上述程式碼裡面的radio和checkbox的效果是可以切換的。比如上述程式碼改下可以將性別這一項變成多選選，愛好這一項變成單選，你只需要將radio和checkbox切換即可。
3、其他基礎元件效果示例
有了上面的基礎表單作為基礎，我們演示其他示例就簡單很多了。這裡並不會將WeUI官網上面的例子挨個演示個遍，只是抽其中幾個來演示和講解。
（1）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>
效果如下
（2）文字框搜尋元件
<!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',相關推薦
微信開發系列——微信訂閱號前端開發利器：WeUI
前言：年前的兩個星期，學習了下微信公眾號的開發。後端基本能夠基於盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，關於手機端的瀏覽器的相容性，一直是博主的一塊心病，因為博主一直專注於bootstrap的相關元件學習，知道bootstrap做響應式沒有任何問題，所以曾經嘗試過直接用bootstrap來佈局，
微信公眾號開發C#系列-12、微信前端開發利器：WeUI
1、前言 通過前面系列文章的學習與講解，相信大家已經對微信的開發有了一個全新的認識。後端基本能夠基於盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。關於手機端的瀏覽器的相容性問題相信一直是開發者們的一塊心病，對於微信開發前端元件這一塊總是找不到合適的移動端元件，什麼都要自己去實現，這個開發成本就大了去了。
微信開發系列----企業付款到銀行卡介面開發
一、微信商戶號須開通此功能； 二、應用環境TP5+Mysql+Centos三、編寫程式碼3.1、Model層，Wechat.php <?php namespace app\home\model; use think\Cache; class Wechat
微信硬體開發系列教程06-藍芽nrf51822開發環境(airkiss/airsync)
對藍芽nrf51822開發，需要安裝他的開發環境，Keil_MDK+nrf51_sdk+nrfgostudio+JLinkARM。Keil_MDK：大名鼎鼎的Keil開發軟體。nrf51_sdk：官方NRF51822的SDK。nrfgostudio：官方NRF51822的操
關於 個人訂閱號 開啟開發模式後無法開啟 自定義選單
一、訂閱號能開發選單嗎？ 目前新申請的訂閱號不能申請自定義選單資格，只有服務號才可以。沒有選單資格，就不能開發出選單。 二、為什麼有的訂閱號又有選單？ 部分訂閱號有選單，主要是基於幾種原因： 1) 和微信官方有合作關係，微信官方給他們開放的介面。例如：深圳東部華僑城 2)
訂閱號服務開發01-搭建開發環境
目錄 訂閱號服務開發環境 開通訂閱號 建立開發者服務 將本地服務對映到公網 配置微信URL與Token @ 訂閱號服務開發環境 開通訂閱號 首
firefox os 開發模擬器1.4版本號安裝開發具體解釋
連接 repeat href view round chm strong col idt 首先在使用firefox os 模擬器的時候必須先下載firefox 瀏覽器，這個是眾多web開發人員必備的工具，下載地址firefox 瀏覽器 。在最新的官方版本號是1.5版的模
SuperMap iObject入門開發系列之一組件式GIS開發平臺介紹
href 並且 lan 分享圖片 易用 分享 之一 應用 TP 本文是一位好友“煬煬”授權給我來發表的，介紹都是他的研究成果，在此，非常感謝。平臺介紹：SuperMap iObjects Java/.NET 是面向GIS應用系統開發者的組件式GIS開
web前端開發工程師需要注意的web前端開發規範有哪些
從事web前端開發工作我們就需要了解web前端開發的規範，這樣才能保證web前端開發工程師們可以高效快速的完成工作，本篇文章小編和大家分享一下web前端開發工程師需要注意的web前端開發規範有哪些，希望對小夥伴們有所幫助。 一、css書寫規範 1. 編碼統一為utf-8; 2. 協
[算法系列之十]大資料量處理利器：布隆過濾器
【引言】 在日常生活中，包括在設計計算機軟體時，我們經常要判斷一個元素是否在一個集合中。比如在字處理軟體中，需要檢查一個英語單詞是否拼寫正確（也就是要判斷 它是否在已知的字典中）；在 FBI，一個嫌疑人的名字是否已經在嫌疑名單上；在網路爬蟲裡，一個網址是否被訪問過等等。最直
微信公眾號開發系列-啟用開發模式
sum oca 使用 popu 接口交互 開發模式 signature 微信公眾 local 微信公眾平臺分為兩種模式：編輯模式與開發模式； 微信公眾帳號申請成功後，要想用程序接收處理用戶的請求，就必需要在“高級功能”裏進行配置。點擊“高級功能”。 從微信開發平臺開發人
微信服務號、訂閱號和企業號的差別（運營和開發兩個角度）
通訊錄 href 開發人員 mark number hide 品牌 log 互聯網 一、運營的角度 1.1、概括 訂閱號： 微信最初的形態是一個純粹的社交工具，也就是人與人之間的聯系工具，當中又分熟人之間的聯系和陌生人之間的聯系。於是就誕生了朋友圈
微信公眾平臺開發教程（十） 訂閱號與服務號的區別
接口文檔 lpad 手機 全部 oauth2.0 spa 上傳 ima lsp 為了消除大家對訂閱號與服務號的疑問，特總結如下： 功能點 介紹 訂閱號 服務號 註冊 註冊賬號 個人信息 個人信息和企業相關信息 展示 在
微信訂閱號開發-1
span idt sta sort 否則 tab 隨機 get code 前天申請了個微信訂閱號，準備試試php開發微商場。 今天中午去bae搞了個服務器，然後就開始驗證token，到晚上才弄完。別人的服務器用著就是麻煩，更新一下代碼就要push到git上，對接口
Asp.net Core 微信公眾號開發系列
net 配置 splay targe www -- c-s mage cnblogs 參考：http://www.cnblogs.com/zskbll/p/4074855.html 一、微信公眾平臺操作流程 1、先到微信公眾平臺註冊賬號 2、登錄成功後找到開發-->開
微信訂閱號自定義選單java開發
小弟應運營要求要更改公眾號選單，本以為是在公眾號官網上進行配置即可，，誰知道 竟然是開發者模式編輯的。無奈，從未接觸過公眾號開發的我。有開始啃開了微信開發的api，原來的做這個得小夥伴，跑路了。但沒有交接。哎~~~ 廢話不多說。開啟流程。 1、小弟這個僅僅是【訂閱號】的開發。進入公眾號後左邊
微信公眾平臺開發教程-申請微信公眾號訂閱號（服務號）需要哪些材料
微信公眾號服務號與訂閱號的區別 訂閱號： 1、每天可以發1次資訊，每次可以傳送8篇文章（資訊展示在微信公眾號摺疊檔案中） 2、不能申請微信支付功能 3、認證後才可以使用自定義選單功能 4、訂閱號適合：不需要支付功能，以為使用者提供諮詢資訊的企業。 服務號： 1、每月可以發4次資訊，每次可以傳送8
微信公眾平臺開發教程-關於申請微信公眾號訂閱號（服務號）的材料和流程
手機 開發 展示 公眾平臺開發 自定義 聯系 客服 申請微信公眾號 公眾 微信公眾號服務號與訂閱號的區別 訂閱號： 1、每天可以發1次信息，每次可以發送8篇文章（信息展示在微信公眾號折疊文件中） 2、不能申請微信支付功能 3、認證後才可以使用自定義菜單功能 4、訂閱號適合：
微信公眾號_訂閱號_微信JS-SDK網頁開發
微信JS-SDK( 分享介面很常用 ) 是微信公眾平臺 面向網頁開發者提供的基於微信內的網頁開發工具包 藉助微信高效使用相機、語音、選題、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、支付等微信特有的能力 1. 配置介面配置資訊 和 域名： JS 介面安全域名，即介面配置 url 的域名
微信公眾號開發之訂閱號如何獲取使用者資訊（一）
最近在做微信的公眾號的開發。之前是在一個認證過的微信服務號上開發一些相應的功能。 比如說 對認證過的微信服務好進行 自定義選單的開發，模板訊息的回覆以及關鍵詞回覆的功能。 但是目前新接了這樣一個需求：