微信公众号开发之样式库

最新推荐文章于 2025-09-15 17:24:22 发布
原创 最新推荐文章于 2025-09-15 17:24:22 发布 · 2.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

微信作为一款聊天工具;在中国来说应该是家喻户晓的了;微信在qq横行的时代异军突起靠的是什么?下面我们来了解一下微信公众号的开发;


想要开发微信,我们最先要准备的开发工具莫过于一个服务器;有了服务器,我们才能随意的为公众号;添加功能;

下面;我们在服务器上开发一下微信公众号的样式库;

①;在服务器上安装weui;

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：

  • 同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站
  • 便捷获取快速使用，降低开发和设计成本
  • 微信设计团队精心打造，清晰明确，简洁大方
该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已经在  GitHub  上开源。访问 http://weui.github.io/weui/  即可预览。


在服务器上安装weui

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

wget https://nodejs.org/dist/v4.6.0/node-v4.6.0.tar.gz

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

Make && make install

2:安装好以后在,微信开发目录下输出安装指令

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

成功后获得node_modules目录
②安装成功后使用weui;

在需要使用weui功能的页面,输出下面代码用来引入weui;

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">  
  6.         <title>WeUI</title>  
  7.         <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>  
  8.     </head>  
  9.     <body>  
  10.     
  11.     </body>  
  12. </html>  
还可以使用
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">  
  6.         <title>WeUI</title>  
  7.         <link rel="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><a href="#" class="weui_btn weui_btn_primary">按钮</a>  
  12. <a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>  
  13. <a href="#" class="weui_btn weui_btn_warn">确认</a>  
  14. <a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>  
  15. <a href="#" class="weui_btn weui_btn_default">按钮</a>  
  16. <a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>  
  17. <div class="button_sp_area">  
  18.     <a href="#" class="weui_btn weui_btn_plain_default">按钮</a>  
  19.     <a href="#" class="weui_btn weui_btn_plain_primary">按钮</a>  
  20.   
  21.     <a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>  
  22.     <a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>  
  23. </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
即可： 

 
 

 
 
 
  
 
   [html] 
   view plain
    copy 
   
 
   
 
    
   在CODE上查看代码片
   派生到我的代码片
  
 
 
 
 
  1.  带说明的列表项  
  2.    
  3.  <div class="weui_cells_title">带说明的列表项</div>  
  4.  <div class="weui_cells">  
  5.      <div class="weui_cell">  
  6.          <div class="weui_cell_bd weui_cell_primary">  
  7.              <p>标题文字</p>  
  8.          </div>  
  9.          <div class="weui_cell_ft">  
  10.              说明文字  
  11.          </div>  
  12.      </div>  
  13.  </div>  
 

 

 

 
 
 
  
 
   [html] 
   view plain
    copy 
   
 
   
 
    
   在CODE上查看代码片
   派生到我的代码片
  
 
 
 
 
  1.  Cell 可根据需要进行各种自定义扩展，包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项，其他情况可以直接参考 example 下的代码：  
  2.    
  3.  <div class="weui_cells_title">带图标、说明、跳转的列表项</div>  
  4.  <div class="weui_cells weui_cells_access">  
  5.    
  6.      <a class="weui_cell" href="#">  
  7.          <div class="weui_cell_hd">  
  8.              <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">  
  9.          </div>  
  10.          <div class="weui_cell_bd weui_cell_primary">  
  11.              <p>cell standard</p>  
  12.          </div>  
  13.          <div class="weui_cell_ft">  
  14.              说明文字  
  15.          </div>  
  16.      </a>  
  17.      <a class="weui_cell" href="#">  
  18.          <div class="weui_cell_hd">  
  19.              <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">  
  20.          </div>  
  21.          <div class="weui_cell_bd weui_cell_primary">  
  22.              <p>cell standard</p>  
  23.          </div>  
  24.          <div class="weui_cell_ft">  
  25.              说明文字  
  26.          </div>  
  27.      </a>  
  28.  </div>  
 

 

 
 

 ③dialog
 

 若系统的 alert 窗体无法满足网页的临时视图内容需求，则可以自定义实现与 alert 形式相似的 dialog，并且在 dialog 中可以自定义地使用各种控件，来满足需求。
 

 
 

 
 
 
  
 
   [html] 
   view plain
    copy 
   
 
   
 
    
   在CODE上查看代码片
   派生到我的代码片
  
 
 
 
 
  1.  <div class="weui_dialog_confirm">  
  2.      <div class="weui_mask"></div>  
  3.      <div class="weui_dialog">  
  4.          <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>  
  5.          <div class="weui_dialog_bd">自定义弹窗内容，居左对齐显示，告知需要确认的信息等</div>  
  6.          <div class="weui_dialog_ft">  
  7.              <a href="#" class="weui_btn_dialog default">取消</a>  
  8.              <a href="#" class="weui_btn_dialog primary">确定</a>  
  9.          </div>  
  10.      </div>  
  11.  </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="#" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>
 

 
 

 ④article
 

 
 

 文字视图显示大段文字，这些文字通常是页面上的主体内容。Article 支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式，并可响应用户的选择操作。
 
在微信客户端 webview 中使用 
Article
，必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。

 

 
 

 
 

 
 
 
  
 
   [html] 
   view plain
    copy 
   
 
   
 
    
   在CODE上查看代码片
   派生到我的代码片
  
 
 
 
 
  1.  <article class="weui_article">  
  2.      <h1>大标题</h1>  
  3.      <section>  
  4.          <h2 class="title">章标题</h2>  
  5.          <section>  
  6.              <h3>1.1 节标题</h3>  
  7.              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  8.                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  9.                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  10.                  consequat. Duis aute</p>  
  11.          </section>  
  12.          <section>  
  13.              <h3>1.2 节标题</h3>  
  14.              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  15.                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  16.                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  17.                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
  18.          </section>  
  19.      </section>  
  20.  </article>  
 


                

        

    


  



    

      

        

            

              
                
                  hwk_yellow
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
java版微信公众号开发（四）回复客户消息

				
			

			

				

					weixin_70044963的博客
				

				

					05-27
					
					730
					
				

			

		

		

			
				
当用户发送消息给公众号时，会产生一个POST请求，开发者可以在响应包（Get）中返回特定XML结构，来对该消息进行响应（现支持回复文本、图片、图文、语音、视频、音乐）。严格来说，发送被动响应消息其实并不是一种接口，而是对微信服务器发过来消息的一次回复。客户发送的消息会默认转到配置的url初始路径。以文本为例接下来以文本为例进行测试。

			
		

	



                

            
              



	

		

			

				
					
java版微信公众号开发（五）模版消息

				
			

			

				

					weixin_70044963的博客
				

				

					05-28
					
					993
					
				

			

		

		

			
				
模板消息仅用于公众号向用户发送重要的服务通知，只能用于符合其要求的服务场景中，如信用卡刷卡通知，商品购买成功通知等。不支持广告等营销类消息以及其它所有可能对用户造成骚扰的消息。记录好模版ID以及参数的名称。废话不多说，直接上干货。

			
		

	



              


  
              

                


	

		

			

				
					
公众号HTML的style属性和参数

				
			

			

				

					君王羔羊
				

				

					04-25
					
					824
					
				

			

		

		

			
				
padding-right: 10em; 
padding-left: 10em; 
padding-right: 5cm;


position: relative;
left:-20px

min-height: 1em;
color: rgb(62, 62, 62);
font-size: 16px;
list-style-type: none;
padding-inline-start: ...

			
		

	





	

		

			

				
					
2025 年公众号排版全攻略：借批量处理工具（样式库 + 自动配图）降本的理性指南

					
最新发布

				
			

			

				

					weixin_69348069的博客
				

				

					09-15
					
					739
					
				

			

		

		

			
				
壹伴 AI 编辑器之类的工具，本质是「效率工具」—— 它帮你省掉「重复劳动」的时间，让你把精力放在「内容本身」上。但请记住：排版的核心永远是「用户」—— 你要想「读者看这篇文章时，眼睛会怎么动？」「他们想快速找到什么？」「他们会觉得哪里累？工具能帮你更快落地这些想法，但不能替你「思考用户需求」。公众号排版的逻辑是「先想清楚用户需要什么，再用工具实现」—— 不是「用工具做排版，再让用户适应」。下次排版时，先问自己：「这行字 / 这张图 / 这个组件，能帮读者更易读吗？」如果答案是「不能」，就删掉。

			
		

	



		

			
		



	

		

			

				
					
微信网页开发样式库的使用

				
			

			

				

					【热血蜗牛】的博客
				

				

					05-23
					
					8562
					
				

			

		

		

			
				
WeUI 的使用

			
		

	





	

		

			

				
					
微信公众号CSS样式常见问题解析

				
			

			

				

					tjjucheng的博客
				

				

					07-20
					
					8385
					
				

			

		

		

			
				
一、排版问题：

在公众号中，例如这种页面。由于不同手机屏幕长度不一致，导致页面中间部分高度不定，且上下两部分的高度也因机型问题不适宜定死值。因此，中间部分建议使用js获取上下部分的实际站位高度以及屏幕总高度。通过屏幕高减去上下部分的高度来确定中间部分的高度。



二、行高问题：

由于安卓系统本身对行高解析的缺点，在不同的安卓手机中普遍存在字与同行的小图标不对齐的问题，对于此情况，一般使用两种...

			
		

	





	

		

			

				
					
微信公众号开发常用类库

				
			

			

				

					bj123467的博客
				

				

					06-08
					
					1485
					
				

			

		

		

			
				
namespace WeChat\Model;
use Think\Model;
class JieRuModel extends Model {
    private $_token = ''; //令牌
    private $appid;
    private $appsecret;
    public function __construct()
    {
   

			
		

	





	

		

			

				
					
基于Vue.js的微信公众号后台前端管理界面设计源码

				
			

			

				

					09-23
				

			

		

		

			
				
该项目是基于Vue.js框架的微信公众号后台前端管理界面设计源码，采用Vue、JavaScript、CSS和HTML等技术语言开发。项目文件结构清晰，共包含87个文件，其中Vue组件文件56个，JavaScript脚本文件16个，SCSS样式文件4个...

			
		

	





	

		

			

				
					
使用vue完成微信公众号网页小记(推荐)

				
			

			

				

					11-26
				

			

		

		

			
				
公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是...

			
		

	





	

		

			

				
					
简单清爽的手机微信商城HTML静态模板

				
			

			

				

					09-26
				

			

		

		

			
				
简单清爽的手机微信商城HTML静态模板    手机网页模板开发 htmlcss齐全  适合需要手机网页开发的朋友 手机微信商城HTML静态模板

			
		

	





	

		

			

				
					
公众号的css

				
			

			

				

					04-26
				

			

		

		

			
				
微信公众号正文排版markdown的ccs代码 一键排版很有用

			
		

	





	

		

			

				
					
企业微信自建应用开发初探

				
			

			

				

					测试0901-1
				

				

					11-11
					
					1万+
					
				

			

		

		

			
				
企业微信是腾讯推出的一个新的办公协作平台，通过与微信一致的沟通体验，为企业员工提供最基础和最实用的办公服务。同时企业微信作为一个开发平台，企业可以根据需要开发定制自己的企业应用集成到企业微信上。ABC WeChat是我们公司为ABC开发的基于企业微信的一款应用（因保密需要，这里用ABC代替公司名称）。\n本文以该项目为例对在企业微信平台开发企业应用的特点进行了总结，重点分析了企业微信开发平台对应用...

			
		

	





	

		

			

				
					
Java爬取公众号文章并生成HTML

				
			

			

				

					BodyCoding
				

				

					04-09
					
					2415
					
				

			

		

		

			
				
1. 需求
用户上传一个微信链接，能够从链接中解析HTML并保存在自己服务器中。要求HTML包含标题、作者和来源，并且保留文章的排版格式。
2. 实现方案
      通过Jsoup访问URL，获得DOM，然后解析出标题、正文等。由于公众号文章的css样式都相同，所以将style保存在服务器中，通过 <link href="…">的方式引入css文件。
&...

			
		

	





	

		

			

				
					
微信公众号开发之发送模板消息

					
热门推荐

				
			

			

				

					朱哲的博客
				

				

					11-10
					
					11万+
					
				

			

		

		

			
				
在我们做微信公众号开发时，发送模板消息往往是必不可少的功能。今天我们就来说说吧！

1、申请模板消息

首先我们应该知道，模板消息是需要申请的。这个申请就其本身来说是很easy的（我前一天晚上申请的，显示需要2--3个工作日，结果第二天早上就发现已经开通了，所以说腾讯官方还是比较给力的哈）。

但是我们在申请时还是有一些东西要注意，这个在官方的文档有非常详细的说明。



这个我建议你好好看看。选...

			
		

	





	

		

			

				
					
微信服务号开发----基本配置

				
			

			

				

					u014520797的专栏
				

				

					12-18
					
					7729
					
				

			

		

		

			
				
1、参数获取，登录服务号




2、更改参数
package com.kp.utils;

public interface Constants {

			String APPID = "";
			String TOKEN = "";
			String SECRET = "";
			String encodingAESKey = "";




3、url 配置可以

			
		

	





	

		

			

				
					
微信公众号开发（四） -- 自定义分享样式

				
			

			

				

					谁还不是一块小饼干的博客
				

				

					11-24
					
					2658
					
				

			

		

		

			
				
1.微信的分享接口调用其实相当于是重写了个接口，自定义的是分享样式
2.位置还是右上角的三个点点

首先获取jssdk
因为我的token是储存在数据库里的，所以只要appid和token
没有的话需要加一步获取token值
&lt;?php
class JSSDK {
  private $appId;
  private $access_token;

  public function __...

			
		

	





	

		

			

				
					
Java企业微信开发-企业微信所有类型消息推送封装

				
			

			

				

					会飞的老王博客
				

				

					07-30
					
					4715
					
				

			

		

		

			
				
企业微信开发第一步获取AccessToken，企业微信的AccessToken和公众号的不一样，企业微信所有接口调用只需要一个AccessToken，而公众号授权和jssdk是分开的

一、获取企业微信AccessToken



import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com...

			
		

	





	

		

			

				
					
微信开发（网页样式库）

				
			

			

				

					洋洋
				

				

					10-04
					
					2960
					
				

			

		

		

			
				
首先，我们先聊下这个微信  网页样式库，它是干嘛的，怎么用；


WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信

内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：

同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站便捷获取快速使用，降低开发和设计成本微信设计团队精心打造，清晰明确，简洁大方

			
		

	





	

		

			

				
					
微信公众号开发需要多少钱

				
			

			

				

					01-13
				

			

		

		

			
				
### 微信公众号开发成本构成

#### 成本概述
微信公众号的开发成本由多个因素决定，主要包括技术实现、维护费用以及运营推广等方面。具体而言：

- **基础功能构建**：创建一个基本的功能完备的微信公众号涉及前端设计、后端逻辑编写和服务部署等工作。例如，在农业领域中，为了提供作物病虫害识别服务，需设立微信公众号前端1、微信后台2和微信公众号服务器3之间的交互机制[^1]。

- **定制化需求满足**：根据不同企业的需求，还需进行个性化设置，比如定义公众号的内容框架、风格样式等，这往往需要专业的团队来进行规划与执行[^2]。

- **持续运维投入**：除了初期建设外，长期稳定运行同样重要。考虑到可能出现的技术难题，如消息传递失败等问题，开发者应具备解决问题的能力并不断优化系统性能[^3]。

- **数据一致性保障**：当涉及到复杂的消息处理流程时，确保数据的一致性和准确性至关重要。采用适当的方法论和技术手段可以有效防止因网络延迟或其他异常情况引起的重复操作或丢失信息现象发生[^4]。

#### 费用明细
针对上述各项活动所产生的实际开销如下所示：
- 技术研发人员薪资；
- 云服务平台租赁费（用于托管应用及数据库资源）；
- 安全防护措施开支（SSL证书购买、DDoS攻击防御等）；
- 域名注册年费；
- 推广营销预算（SEO优化、广告投放等）；

值得注意的是，“注册一个公众号本身并不收取任何费用”，但后续管理和扩展则会产生相应支出。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值