2. 程式人生 > >微信公眾號開發之樣式庫

微信公眾號開發之樣式庫

阿新 • • 發佈：2018-12-31

微信作為一款聊天工具;在中國來說應該是家喻戶曉的了;微信在qq橫行的時代異軍突起靠的是什麼?下面我們來了解一下微信公眾號的開發;

想要開發微信,我們最先要準備的開發工具莫過於一個伺服器;有了伺服器,我們才能隨意的為公眾號;新增功能;

下面;我們在伺服器上開發一下微信公眾號的樣式庫;

①;在伺服器上安裝weui;

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁開發量身設計，可以令使用者的使用感知更加統一。在微信網頁開發中使用 WeUI，有如下優勢：

  • 同微信客戶端一致的視覺效果，令所有微信使用者都能更容易地使用你的網站
  • 便捷獲取快速使用，降低開發和設計成本
  • 微信設計團隊精心打造，清晰明確，簡潔大方
該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已經在 GitHub 上開源。訪問http://weui.github.io/weui/ 即可預覽。

在伺服器上安裝weui

1:首先需要先安裝一下nodejs;

./configure  --prefix=/usr/local/nodejs

Make && make install

2:安裝好以後在,微信開發目錄下輸出安裝指令

/usr/local/nodejs/bin/npm install –save weui

成功後獲得node_modules目錄

②安裝成功後使用weui;

在需要使用weui功能的頁面,輸出下面程式碼用來引入weui;

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3.     <head>
  4.         <metacharset="UTF-8">
  5.         <metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=0">
  6.         <title>
    WeUI</title>
  7.         <linkrel="stylesheet"href="path/to/weui/dist/style/weui.min.css"/>
  8.     </head>
  9.     <body>
  10.     </body>
  11. </html>
還可以使用
  1. git clone https://github.com/weui/weui.git  
  2. cd weui  
  3. npm install -g gulp  
  4. npm install  
  5. gulp -ws  
執行 gulp -ws 命令，會監聽 src 目錄下所有檔案的變更，並且預設會在8080埠啟動伺服器，

下面我們就可以使用weui的各種功能樣式了

①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：
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3.     <head>
  4.         <metacharset="UTF-8">
  5.         <metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=0">
  6.         <title>WeUI</title>
  7.         <linkrel="stylesheet"href="<span style="color:#FF0000;">引入node_modules目錄下的./node_modules /to/weui/dist/style/weui.min.css檔案</span>"/>
  8.     </head>
  9.     <body>
  10. <div>
  11. <pre><ahref="#"class="weui_btn weui_btn_primary">按鈕</a>
  12. <ahref="#"class="weui_btn weui_btn_disabled weui_btn_primary">按鈕</a>
  13. <ahref="#"class="weui_btn weui_btn_warn">確認</a>
  14. <ahref="#"class="weui_btn weui_btn_disabled weui_btn_warn">確認</a>
  15. <ahref="#"class="weui_btn weui_btn_default">按鈕</a>
  16. <ahref="#"class="weui_btn weui_btn_disabled weui_btn_default">按鈕</a>
  17. <divclass="button_sp_area">
  18.     <ahref="#"class="weui_btn weui_btn_plain_default">按鈕</a>
  19.     <ahref="#"class="weui_btn weui_btn_plain_primary">按鈕</a>
  20.     <ahref="#"class="weui_btn weui_btn_mini weui_btn_primary">按鈕</a>
  21.     <ahref="#"class="weui_btn weui_btn_mini weui_btn_default">按鈕</a>
  22. </div>
</body></html>

②cell列表檢視

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

Cell 由 thumbnail weui_cell_hd、body weui_cell_bd、accessory weui_cell_ft 三部分組成，cell 採用自適應佈局，在需要自適應的部分加上 class weui_cell_primary即可：
  1. 帶說明的列表項  
  2. <divclass="weui_cells_title">帶說明的列表項</div>
  3. <divclass="weui_cells">
  4.     <divclass="weui_cell">
  5.         <divclass="weui_cell_bd weui_cell_primary">
  6.             

    相關推薦

    微信公眾號開發之樣式庫

    微信作為一款聊天工具;在中國來說應該是家喻戶曉的了;微信在qq橫行的時代異軍突起靠的是什麼?下面我們來了解一下微信公眾號的開發; 想要開發微信,我們最先要準備的開發工具莫過於一個伺服器;有了伺服器,我們才能隨意的為公眾號;新增功能; 下面;我們在伺

    微信公眾號開發之網頁授權（獲取用戶信息）

    還需要 開發文檔 app err 通過 casb ddt 省份 sse 　　這次暑假留在學校參與工作室的項目，對微信公眾號比較感興趣，所以參與這方面的學習研究。 昨天完成了關於網頁授權，獲取用戶信息方面的功能，所以乘熱打鐵，寫上一篇。實現本篇涉及的 功能，還需要完成一些基礎

    C#微信公眾號開發之接收事件推送與消息排重的方法

    data push con 這樣的 etime ali 推薦 系列 是否 本文實例講述了C#微信公眾號開發之接收事件推送與消息排重的方法。分享給大家供大家參考。具體分析如下： 微信服務器在5秒內收不到響應會斷掉連接，並且重新發起請求，總共重試三次。這樣的話，問題就來了。有

    微信公眾號開發之-回調的所有類型

    mage 下回 nco ble sgi msg www 系統拍照 sel 眾所周知,微信公眾號配置後臺開發時,微信會在一些情況下回調我們配置的服務器地址,比如www.***.com/wechat_callback 盡管調用情況不同,調用的都是這一個接口,只是攜帶的參數不同,

    利用NATAPP隧道解決微信公眾號開發之本地調試難題

    需要 alt clas 公眾號開發 help 服務器 -a amd64 驗證 一、問題 眾所周知，微信公眾號開發需要公網的有效域名和80端口，本機當然互聯網是訪問不了的。那麽我們難道去一個公網的服務器去開發嗎？那樣是不是太土了。 答案當然是，NO 當然我們在做微信支付

    微信公眾號開發之傳送模板訊息

    在我們做微信公眾號開發時，傳送模板訊息往往是必不可少的功能。今天我們就來說說吧！ 1、申請模板訊息 首先我們應該知道，模板訊息是需要申請的。這個申請就其本身來說是很easy的（我前一天晚上申請的，顯示需要2--3個工作日，結果第二天早上就發現已經開通了，所以說騰訊官方還是比較給力的哈）。

    微信公眾號開發之微信JSSDK

    概述 　　微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。 　　通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力， 為微信使用者提供更優質的網頁體驗。 　　此文件面向

    微信公眾號開發之選擇圖片，上傳圖片，下載圖片，顯示圖片

    function clickImg(that)｛ wx.chooseImage({ count: 1, needResult: 1, sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓

    使用spring boot+thymeleaf實現微信公眾號開發之js_sdk介面

    1.使用微信的js-sdk介面首先要在自己的微信測試公眾號，或者是公眾號上面新增js安全域名。 2.在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js。 3.通過config介面注入許

    php微信公眾號開發之微信企業付款給個人

    /*微信企業付款給個人*/ <!--具體細節參考微信支付開發文件--> <!--引數 $openid個人openid,$re_user_name個人真實姓名，$amount付款金額，$partner_trade_no商戶訂單號，$desc描述--> &

    微信公眾號開發之自帶debug結合postman除錯

    最近有涉及到微信公眾號的開發，其中除錯過程挺好玩，記錄之... 需求：由於自帶的debug平臺沒法訪問本地區域網，本地想除錯程式碼可以使用postman除錯，但是需要符合微信伺服器接收規則的xml。 首先附上微信自帶的debug平臺：https://mp.weixin.q

    微信公眾號開發之模板訊息

    微信公眾號傳送模板訊息其實很簡單，呼叫下面的這個工具類即可（這個工具類是我在網上找的。。。）。工具類主要用於呼叫微信傳送模板訊息的介面。 首先會獲取ACCESS_TOKEN，若之前獲取的沒過期則用之前的，若過期了則從新獲取。然後用一個http工具類呼叫傳送模板訊息的介面即可。 傳送模板訊息工

    ThinkPHP5.0微信公眾號開發之 微信公眾號接入

    ThinkPHP5.0 微信公眾號接入 第一步：準備工作 首先，要有自己的公眾號（這句是廢話），個人可以申請微信公眾號的訂閱號，企業才可以申請服務號，其次要有云空間或者伺服器，並且將伺服器IP新增至微信公眾號開發配置中的IP白名單，這只是基礎的準備工作 第二步：

    微信公眾號開發之回覆圖文訊息(被動) 微信公眾號開發之VS遠端除錯

    目錄 （一）微信公眾號開發之VS遠端除錯 （二）微信公眾號開發之基礎梳理 （三）微信公眾號開發之自動訊息回覆和自定義選單 （四）微信公眾號開發之網頁授權獲取使用者基本資訊 （五）微信公眾號開發之網頁中及時獲取當前使用者Openid及注意事項 （六）微信公眾號開發之掃碼支付 （七）微信公眾號開發之

    php微信公眾號開發之快遞查詢

    mysq read 學習課程 商家 con 零基礎入門 fun app後端 事件 快遞查詢 數組用法 foreach 查詢接口是：愛快遞：https://www.aikuaidi.cn/api/ 核心代碼如下： ? 1 2 3 4 5 6 7 8 9 10

    php微信公眾號開發之音樂信息

    ajax 生成器 border lod 韓順平 p s lba 版本 性能 高品質—-HQMusicUrl 低品質—-MusicUrl 核心代碼如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1

    微信公眾號開發之如何使用JSSDK

    微信開發交流群：148540125 歡迎留言、轉發 檢視公眾號是否有使用JSSDK的許可權 服務號、訂閱號可以通過登入微信公眾平臺檢視開發>介面許可權 使用JSSDK主要包括 1、判斷當前客戶端版本是否支援指定JS介面、 2、分享介面（微

    微信公眾號開發之微信網頁授權獲取使用者個人資訊

    說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！ 一丶概述 微信網頁授權 如果使用者在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取使用者基本資訊，進而實現業務邏輯。 現在，我們要實現一個微信內網頁，通過微信訪問網頁時，網頁

    微信公眾號開發之接收與傳送訊息

    說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！ 在上一篇部落格中已經驗證了伺服器有效性：https://blog.csdn.net/qq_41782425/article/details/85321424 一丶概論 公眾號接收與傳送訊息 驗證

    微信公眾號開發之訂閱號如何獲取使用者資訊（一）

    最近在做微信的公眾號的開發。之前是在一個認證過的微信服務號上開發一些相應的功能。 比如說 對認證過的微信服務好進行 自定義選單的開發，模板訊息的回覆以及關鍵詞回覆的功能。 但是目前新接了這樣一個需求：