當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

微信公众号开发C#系列-12、微信前端开发利器：WeUI

發(fā)布時(shí)間：2023/12/19 综合教程 31 生活家

生活随笔收集整理的這篇文章主要介紹了微信公众号开发C#系列-12、微信前端开发利器：WeUI 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、前言

通過前面系列文章的學(xué)習(xí)與講解，相信大家已經(jīng)對(duì)微信的開發(fā)有了一個(gè)全新的認(rèn)識(shí)。后端基本能夠基于盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。關(guān)于手機(jī)端的瀏覽器的兼容性問題相信一直是開發(fā)者們的一塊心病，對(duì)于微信開發(fā)前端組件這一塊總是找不到合適的移動(dòng)端組件，什么都要自己去實(shí)現(xiàn)，這個(gè)開發(fā)成本就大了去了。于是乎博主打算另辟蹊徑，找找基于微信開發(fā)的移動(dòng)端UI組件，最后找到了微信官方開發(fā)的一套前端組件：WeUI。

2、WeUI基本介紹

2.1 WeUI概述

WeUI、微信公眾號(hào)開發(fā)的瑞士軍刀。WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。有了這個(gè)作為基礎(chǔ)，我們?cè)僖膊挥脫?dān)心微信開發(fā)的瀏覽器兼容性問題了，微信官方推出的這個(gè)東西拯救了千千萬(wàn)萬(wàn)的開發(fā)者！

jQuery WeUI 是專為微信公眾賬號(hào)開發(fā)而設(shè)計(jì)的一個(gè)簡(jiǎn)潔而強(qiáng)大的UI庫(kù)，包含全部WeUI官方的CSS組件，并且額外提供了大量的拓展組件，豐富的組件庫(kù)可以極大減少前端開發(fā)時(shí)間。

jQuery WeUI 的最大特點(diǎn)是它只提供UI組件，并不會(huì)對(duì)項(xiàng)目所使用的框架和其他庫(kù)有任何的限制，幾乎可以在任何環(huán)境下使用。無(wú)論你的項(xiàng)目是基于jQuery，還是 React, Angular, Vue，你都會(huì)發(fā)現(xiàn) jQuery WeUI 能非常方便的和他們結(jié)合使用。既是你的項(xiàng)目是一個(gè)有很悠久歷史的老項(xiàng)目，也幾乎可以做到拿來(lái)即用。

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

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

基于jquery的WeUI：http://jqweui.com/（提供了大量的第三方組件庫(kù)）

2.2 為什么選擇jQuery WeUI

jQuery WeUI 的定位正如 jQuery 的定位：做一把鋒利易用的小刀，而不是做一個(gè)笨重的大炮。

簡(jiǎn)單易用，無(wú)上手難度
豐富強(qiáng)大的組件庫(kù)，并且還在不斷完善中
輕量，無(wú)限制，可以結(jié)合任何主流JS框架使用，比如 Vue, Angular, React 等
高性能的 CSS3 動(dòng)畫，低端手機(jī)上依然可以較流暢運(yùn)行
詳盡完善的官方文檔
標(biāo)準(zhǔn)穩(wěn)定的API，基本可以保證版本透明更新
基于 MIT 協(xié)議發(fā)布，免費(fèi)開源

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

3、jQuery WeUI基本用法

考慮到大家對(duì)WeUI組件的使用有憂慮，不知如何下手。下面我就從最基礎(chǔ)的開始，手把手教你入門WeUI。已經(jīng)很熟悉的朋友請(qǐng)直接跳過此段，前往官方網(wǎng)站查看demo。

1、引用必須的文件

如果你用的是原始的開發(fā)方式，比如基于jQuery的開發(fā)，那么你首先需要去Github上面將WeUI的源文件down下來(lái)，然后引入到你的項(xiàng)目；如果是基于npm管理組件，使用npm命令的方式引入WeUI組件即可。這里我們使用的是原始的開發(fā)方式。如果你只需要WeUI的css樣式支持，那么你只需要引入weui.css文件即可；如果除了樣式之外，還需要WeUI的js組件支持，那么你還需要引用另外一個(gè)包：weui.js。下面先介紹基礎(chǔ)的WeUI樣式庫(kù)，先來(lái)看看WeUI到底能為我們帶來(lái)啥，后面再來(lái)分享WeUI.js以及jquery.WeUI.js的相關(guān)技術(shù)。

要使用WeUI,這里首先必須引入css樣式文件

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

2、最基礎(chǔ)的組件樣式

下面我們以一個(gè)最基礎(chǔ)的表單來(lái)展示W(wǎng)eUI的使用方法，如下我們開發(fā)一個(gè)個(gè)人資料錄入的頁(yè)面效果。

<!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>個(gè)人資料錄入</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">填寫個(gè)人資料</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="請(qǐng)輸入姓名" />
                        </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號(hào)" />
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_vcode">
                        <div class="weui-cell__hd">
                            <label class="weui-label">手機(jī)號(hào)</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)" />
                        </div>
                        <div class="weui-cell__ft">
                            <button class="weui-vcode-btn">獲取驗(yàn)證碼</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">注冊(cè)時(shí)間</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">微信號(hào)</option>
                                <option value="2">QQ號(hào)</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">驗(yàn)證碼</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" />
                        </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瀏覽器的移動(dòng)端模式測(cè)試效果如下：

代碼講解

（1）網(wǎng)頁(yè)上面的<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">這一句必須要有，這個(gè)和WeUI無(wú)關(guān)，是瀏覽器的顯示比例問題。建議各位準(zhǔn)備做移動(dòng)端開發(fā)之前可以百度下viewport的含義，這樣更容易理解響應(yīng)式。加這一句是告訴瀏覽器在不同的設(shè)備上面的顯示比例問題。

（2）最外面必須要有一個(gè)大的容器div，即上述代碼里面的這個(gè)標(biāo)簽；頁(yè)面的所有標(biāo)簽必須放在這個(gè)里面；

（3）上述代碼里面的radio和checkbox的效果是可以切換的。比如上述代碼改下可以將性別這一項(xiàng)變成多選選，愛好這一項(xiàng)變成單選，你只需要將radio和checkbox切換即可。

4、其他基礎(chǔ)組件展示

4.1、switch開關(guān)

<div class="container" id="container">
    <div class="page navbar js_show">
        <div class="page__bd">
            <div class="weui-cells__title">開關(guān)</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.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測(cè)試</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("執(zhí)行搜索");
                }
            });
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
    });
    </script>
</body>
</html>

4.3、正在加載、暫無(wú)更多、查看更多效果

<!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測(cè)試</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">暫無(wú)數(shù)據(jù)</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.4、圖片全屏預(yù)覽

首先引入必須的樣式文件

<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>

需要說(shuō)明的是這個(gè)效果需要jquery-weui.js組件的支持。你需要去down這個(gè)組件的dist目錄，然后引用dist目錄下面的swiper.js文件。這塊有問題的可以單獨(dú)留言。

引入相關(guān)的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端的焦點(diǎn)圖效果一樣一樣的。我們將上述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>

swiper組件的應(yīng)用有很多可供參考的使用方式，大家可根據(jù)實(shí)際自行擴(kuò)展。

5、微信開發(fā)系列文章列表

微信公眾號(hào)開發(fā)C#系列-1、微信公眾平臺(tái)注冊(cè)

微信公眾號(hào)開發(fā)C#系列-2、微信公眾平臺(tái)接入指南

微信公眾號(hào)開發(fā)C#系列-3、搭建微信本地調(diào)試環(huán)境-借助花生殼實(shí)現(xiàn)內(nèi)網(wǎng)穿透

微信公眾號(hào)開發(fā)C#系列-4、獲取接口調(diào)用憑證

微信公眾號(hào)開發(fā)C#系列-5、用戶和用戶組管理-支持同步

微信公眾號(hào)開發(fā)C#系列-6、消息管理-普通消息接受處理

微信公眾號(hào)開發(fā)C#系列-7、消息管理-接收事件推送

微信公眾號(hào)開發(fā)C#系列-8、自定義菜單及菜單響應(yīng)事件的處理

微信公眾號(hào)開發(fā)C#系列-9、多公眾號(hào)集中管理

微信公眾號(hào)開發(fā)C#系列-10、長(zhǎng)鏈接轉(zhuǎn)短鏈接

微信公眾號(hào)開發(fā)C#系列-11、生成帶參數(shù)二維碼應(yīng)用場(chǎng)景

參考文章

微信公眾平臺(tái)技術(shù)文檔-官方

Senparc.Weixin SDK + 官網(wǎng)示例源代碼

RDIFramework.NET — 基于.NET的快速信息化系統(tǒng)開發(fā)框架 — 系列目錄

RDIFramework.NET ━ .NET快速信息化系統(tǒng)開發(fā)框架 ━ 工作流程組件介紹

RDIFramework.NET框架SOA解決方案（集Windows服務(wù)、WinForm形式與IIS形式發(fā)布）-分布式應(yīng)用

RDIFramework.NET代碼生成器全新V3.5版本發(fā)布-重大升級(jí)

一路走來(lái)數(shù)個(gè)年頭，感謝RDIFramework.NET框架的支持者與使用者，大家可以通過下面的地址了解詳情。

RDIFramework.NET官方網(wǎng)站：http://www.rdiframework.net/

RDIFramework.NET官方博客：http://blog.rdiframework.net/

同時(shí)需要說(shuō)明的，以后的所有技術(shù)文章以官方網(wǎng)站為準(zhǔn)，歡迎大家收藏！

RDIFramework.NET框架由專業(yè)團(tuán)隊(duì)長(zhǎng)期打造、一直在更新、一直在升級(jí)，請(qǐng)放心使用！

歡迎關(guān)注RDIFramework.net框架官方公眾微信（微信號(hào)：guosisoft），及時(shí)了解最新動(dòng)態(tài)。

掃描二維碼立即關(guān)注

總結(jié)

以上是生活随笔為你收集整理的微信公众号开发C#系列-12、微信前端开发利器：WeUI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：正文获取摘要去除html标记
下一篇：关于单表5-10亿行记录如何快速查询的问