2. 程式人生 > >微信web開發ui框架製作網頁例項教程

微信web開發ui框架製作網頁例項教程

阿新 • • 發佈：2019-01-07

例項一、Button

按鈕可以使用a或者button標籤。wap上要觸發按鈕的active態，必須觸發ontouchstart事件，可以在body上加上ontouchstart=”“全域性觸發。

按鈕常見的操作場景：確定、取消、警示，分別對應class：weui_btn_primary、weui_btn_default、weui_btn_warn，每種場景都有自己的置灰態weui_btn_disabled，除此外還有一種鏤空按鈕weui_btn_plain_xxx，客戶端webview裡的按鈕尺寸有兩類，預設寬度100%，小型按鈕寬度自適應，兩邊邊框與文字間距0.75em：
效果圖：
這裡寫圖片描述

程式碼片段：

<a href="javascript:;" class="weui_btn weui_btn_primary">按鈕</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按鈕</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">確認</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn"
 
>確認</a>
<a href="javascript:;" class="weui_btn weui_btn_default">按鈕</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按鈕</a>
<div class="button_sp_area">
    <a href="javascript:;" class="weui_btn weui_btn_plain_default">按鈕</a>
 

    <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按鈕</a>

    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按鈕</a>
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按鈕</a>
</div>

例項二、Cell

Cell，列表檢視，用於將資訊以列表的結構顯示在頁面上，是wap上最常用的內容結構。Cell由多個section組成，每個section包括section headerweui_cells_title以及cellsweui_cells。

cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分組成，cell採用自適應佈局，在需要自適應的部分加上classweui_cell_primary即可：

效果圖：
這裡寫圖片描述

程式碼片段：

<!--帶說明的列表項-->
<div class="weui_cells_title">帶說明的列表項</div>
<div class="weui_cells">
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>標題文字</p>
        </div>
        <div class="weui_cell_ft">
            說明文字
        </div>
    </div>
</div>

Cell可根據需要進行各種自定義擴充套件，包括輔助說明、跳轉、單選、複選等。下面以帶圖示、說明、跳轉的列表項，其他情況可以直接參考example下的程式碼：

<div class="weui_cells_title">帶圖示、說明、跳轉的列表項</div>
<div class="weui_cells weui_cells_access">

    <a class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            說明文字
        </div>
    </a>
    <a class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            說明文字
        </div>
    </a>
</div>

例項三、Dialog

若系統的alert窗體無法滿足網頁的臨時檢視內容需求，則可以自定義實現與alert形式相似的dialog，並且在dialog中可以自定義地使用各種控制元件，來滿足需求。

這裡寫圖片描述

程式碼片段：

<div class="weui_dialog_confirm">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">彈窗標題</strong></div>
        <div class="weui_dialog_bd">自定義彈窗內容<br>...</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog default">取消</a>
            <a href="javascript:;" class="weui_btn_dialog primary">確定</a>
        </div>
    </div>
</div>

這裡寫圖片描述

程式碼片段：

<div class="weui_dialog_alert">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">彈窗標題</strong></div>
        <div class="weui_dialog_bd">彈窗內容，告知當前頁面資訊等</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog primary">確定</a>
        </div>
    </div>
</div>

例項四、Toast

toast用於臨時顯示某些資訊，並且會在數秒後自動消失。這些資訊通常是輕量級操作的成功、失敗或等待狀態資訊。

這裡寫圖片描述

程式碼片段：

<div id="toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">已完成</p>
    </div>
</div>

這裡寫圖片描述

<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">            <!-- :) -->
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">資料載入中</p>
    </div>
</div>

例項五、Msg Page

結果頁通常來說可以認為進行一系列操作步驟後，作為流程結束的總結性頁面。結果頁的作用主要是告知使用者操作處理結果以及必要的相關細節（可用於確認 之前的操作是否有誤）等資訊；若該流程用於開啟或關閉某些重要功能，可在結果頁增加與該功能相關的描述性內容；除此之外，結果頁也可以承載一些附加價值操 作，例如提供抽獎、關注公眾號等功能入口。

這裡寫圖片描述

程式碼片段：

<div class="weui_msg">
    <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
    <div class="weui_text_area">
        <h2 class="weui_msg_title">操作成功</h2>
        <p class="weui_msg_desc">內容詳情，可根據實際需要安排</p>
    </div>
    <div class="weui_opr_area">
        <p class="weui_btn_area">
            <a href="javascript:;" class="weui_btn weui_btn_primary">確定</a>
            <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
        </p>
    </div>
    <div class="weui_extra_area">
        <a href="">檢視詳情</a>
    </div>
</div>

例項六、Article

文字檢視顯示大段文字，這些文字通常是頁面上的主體內容。Article支援分段、多層標題、引用、內嵌圖片、有/無序列表等富文字樣式，並可響應使用者的選擇操作。

在微信客戶端webview中使用Article，必須保證文字有足夠的可讀性和可辨識性、使用規範字體、保證足夠的段間距、段首無縮排。

這裡寫圖片描述

程式碼片段：

<article class="weui_article">
    <h1>大標題</h1>
    <section>
        <h2 class="title">章標題</h2>
        <section>
            <h3>1.1 節標題</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute</p>
        </section>
        <section>
            <h3>1.2 節標題</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </section>
</article>

例項七、圖示

這裡寫圖片描述

程式碼片段：

<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
<div class="icon_sp_area">
    <i class="weui_icon_success"></i>
    <i class="weui_icon_success_circle"></i>
    <i class="weui_icon_success_no_circle"></i>
    <i class="weui_icon_info"></i>
    <i class="weui_icon_waiting"></i>
    <i class="weui_icon_waiting_circle"></i>
    <i class="weui_icon_circle"></i>
    <i class="weui_icon_warn"></i>
    <i class="weui_icon_download"></i>
</div>

註釋：可以做很多的微信頁面，非常好用好使。

相關推薦

微信web開發ui框架製作網頁例項教程

例項一、Button 按鈕可以使用a或者button標籤。wap上要觸發按鈕的active態，必須觸發ontouchstart事件，可以在body上加上ontouchstart=”“全域性觸發。 按鈕常見的操作場景：確定、取消、警示，分別對應class：

微信web開發工具 移動裝置除錯

廢話不多說，4步解決移動端除錯問題！！！！ 以蘋果手機為例 1、必須先下載微信web除錯工具這就不多說了 2、保證手機和電腦在同一網段，手機開啟無線區域網，點選所連線的網路進去後在最底部，HTTP代理選擇手動，伺服器設定為和本機一樣的IP，埠9973 3、開啟web除錯工具

關於windows 10 安裝微信web開發工具後點擊無反應，無法開啟的處理辦法

      昨天在微信開發平臺官網下了微信開發小程式軟體（.exe  64位），在自己桌上型電腦（windows 7 系統，64位）上安裝可以正常開啟執行，但在自己筆記本（windows 10 ，64位）上，安裝以後，點選無任何反應。       然後上網查資料，說是相容性的

微信WEB開發知識點手冊-柴神-專題視訊課程

微信WEB開發知識點手冊—3195人已學習 課程介紹        從“初級”開始講解，講解基於web的微信開發基礎知識點。課程收益    熟悉微信基礎開發、微信web（微網站）開發的各個知識點，熟練掌握微信web（微網站）應用的開發。講師介紹    柴神更多講師課程    

微信瀏覽器清空快取（網頁開發）

       微信瀏覽器自帶的瀏覽器快取真心煩，老是有快取，因為開發網頁的需要這裡我在網上找到一個清除快取的方法，親測可用，隨便找一個對話方塊，輸入網址“debugx2.qq.com”，點選訊息中的網址，進入x5除錯頁面，把頁面拉到最底

Android開發丶整合微信原生分享並於分享網頁時載入網路縮圖

微信分享也是一項很常用的功能了，以往都是用友盟或者mobShareSDK框架來實現的，這兩者在微信官方的sdk基礎上封裝的很好，並且加入了一些很實用性的功能，不過這次因為只有微信平臺的分享，而且微信登入也是基於微信官方的原生SDK的，所以我們就不用再去大費周章地使用友盟和mo

微信web網頁背景顏色及promise與ajax合併

微信背景預設不是白色需設定body         const Proms = zhi => {             console

Java微信公眾平臺開發(十四)【番外篇】--微信web開發者工具使用

str weixin ron log 返回 nbsp 地址欄 alt 直接 轉自：http://www.cuiyongzhi.com/post/58.html 為幫助開發者更方便、更安全地開發和調試基於微信的網頁，微信推出了 web 開發者工具。它是一個桌面應用，通過模擬微

微信小程式前端框架/UI元件

前言    剛開始寫bolg，嘗試記錄一些日常。    無意找了個很好看的小程式UI元件庫：ColorUI github。    之前做的小程式小工具都是使用原生的自己編碼的，難免會有東拼西湊的地方，正好這段時間有空，準備花點時間找一個較好的小程式元件庫或者框架，來提示開發效

利用Fiddler手機抓包對ONE·APP網頁爬蟲實現電影資訊微信Java開發

前言 好久沒寫部落格了，打算把之前做的一個電影評分資訊推送的微信開發全程記錄一下，適合對網路爬蟲、微信開發感興趣的童鞋。在教程開始之前，我想先引出兩個問題（這次寫部落格假裝很有條理的樣子= =） 1. 為什麼想要抓取ONE電影的資料？ 因為我平時本身就

微信公眾號開發之使用eclipse建立微信web工程併發布到BAE測試

    本篇博文主要是講一下在eclipse上建立一個微信web工程併發布到BAE上,其中會講一些應該注意的問題 2.下載完以後,解壓到某個盤下面就可以,我習慣放在D盤根目錄,新建一個盤,命名為EclipseForWeiXin,然後把下載到的壓縮包解壓到該目錄即可 3

微信公眾開發URL和token填寫詳解

res wrap this true 進行 -m tmp sem 知識 微信公眾開發URL和token填寫詳解 方法/步驟 作為一名微信公眾號開發者，別人進入你的微信公眾號，肯定會看見某些網頁，或者給你發某些信息，你需要實時自動回復，所以你

微信小程序的特點和網頁APP的區別

微信小程序 我司專註於微信小程序的開發等，運用微信小程序的分享功能我們可以進行推廣，為自己的產品引流吸粉，構建小程序商城，掃碼發貨，金牌導購，進行防偽，分銷等等。更多小程序功能可以詳詢小編（134-7662-8967微信同號）。 什麽是微信小程序？ 微信小程序簡稱小

微信web開發者工具的跨域

開發 技術 .cn alt b-s logs 方式 微信開發 點擊 1、點擊微信開發者工具，擊右鍵， 選擇“屬性”，打開面板之後，選擇“快捷方式” => “目標” 2、在目標那一行的最後，輸入“空格--disable-web-security --user-data

微信平臺開發——日歷服務

int cat href nth 服務 write pre b2c except 非常多人可能用過例如以下的功能：

微信小程序UI------實現攜程首頁頂部的界面（彈性布局）

app clas 點擊下載 技術 使用 css .html 攻略 enter 今天寫了一個攜程界面的UI，利用H5的彈性盒子來實現，學過H5彈性盒子的，來看是比較方便的，因為CSS代碼都差不多。 可以看看這篇博客 快速使用CSS 彈性盒子 效果圖如下： 　　 主要是攜程首頁

用chrome模擬微信瀏覽器訪問需要OAuth2.0網頁授權的頁面

mil col cnblogs bre letter 型號 默認 刷新 build 現在很流行微信網頁小遊戲，用html5制作的小遊戲移過來，可以放到微信瀏覽器中打開，關鍵是可以做成微信分享朋友圈的形式，大大提高遊戲的傳播，增強好友的遊戲互動。 微信瀏覽器中打開網頁遊戲效

微信新手開發

字符 spa implode 時間戳 隨機數 要求 新手 字典序排序 imp 對於新手而言，什麽是微信開發？我覺得這個問題可以難倒一大部分人！ 在微信公眾號管理後臺裏面，其實相應的功能已基本齊全，開發可以將這些功能給搬運到網站上去，當然更深一點的開發是出現新功能，和你需要的

微信jsapi開發應用實例並記錄下錯誤信息

var appid json gbk 信息 pip rand 常常 數據 雖然大家已經有實例，但還是要根據自己的項目更改 在這裏需要註意的幾點 也是常常報錯的 1、頁面必須是UTF8（已經json不認gbk，所以會提醒 -1調用支付JSAPI缺少參數APPID 這是編碼引起

app自動測試-微信web-1

docs span copy lan 文檔 頁面 boot oca desktop appium 是一個用於app自動測試的工具。目前支持測試iOS, Android, Windows上的app。(github: https://github.com/appium/appi