微信网页开发样式库

最新推荐文章于 2022-07-26 16:39:30 发布
最新推荐文章于 2022-07-26 16:39:30 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25577301/article/details/52721858
版权

微信网页开发样式库

使用你的公共测试号创建自定义菜单，订阅号没有借口权限


里面写上一个你的能够访问并且修改内容的url地址。

到你的阿里云上安装nodejs，下载微信公共样式库文件。

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

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

Make && make install

在apache根目录/var/www/html运行

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

成功会发现多出来了文件夹node_modules

此时编辑haha.php

写入一下内容

1.button按钮

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        <link rel="stylesheet" href="./node_modules /to/weui/dist/style/weui.min.css"/>
    </head>
    <body>
        <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
        <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
        <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</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-default weui-btn_plain-disabled">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</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>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
        </div>
 
 
    </body>
</html>

 

 

2.cell列表视图
 

<div class="page">
 

    <div class="page__hd">
 

        <h1 class="page__title">List</h1>
 

        <p class="page__desc">列表</p>
 

    </div>
 

    <div class="page__bd">
 

        <div class="weui-cells__title">带说明的列表项</div>
 

        <div class="weui-cells">
 

            <div class="weui-cell">
 

                <div class="weui-cell__bd">
 

                    <p>标题文字</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </div>
 

        </div>
 

        <div class="weui-cells__title">带图标、说明的列表项</div>
 

        <div class="weui-cells">
 

            <div class="weui-cell">
 

                <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
 

                <div class="weui-cell__bd">
 

                    <p>标题文字</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </div>
 

            <div class="weui-cell">
 

                <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
 

                <div class="weui-cell__bd">
 

                    <p>标题文字</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </div>
 

        </div>
 

 
 

        <div class="weui-cells__title">带跳转的列表项</div>
 

        <div class="weui-cells">
 

            <a class="weui-cell weui-cell_access" href="javascript:;">
 

                <div class="weui-cell__bd">
 

                    <p>cell standard</p>
 

                </div>
 

                <div class="weui-cell__ft">
 

                </div>
 

            </a>
 

            <a class="weui-cell weui-cell_access" href="javascript:;">
 

                <div class="weui-cell__bd">
 

                    <p>cell standard</p>
 

                </div>
 

                <div class="weui-cell__ft">
 

                </div>
 

            </a>
 

        </div>
 

 
 

        <div class="weui-cells__title">带说明、跳转的列表项</div>
 

        <div class="weui-cells">
 

            <a class="weui-cell weui-cell_access" href="javascript:;">
 

                <div class="weui-cell__bd">
 

                    <p>cell standard</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </a>
 

            <a class="weui-cell weui-cell_access" href="javascript:;">
 

                <div class="weui-cell__bd">
 

                    <p>cell standard</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </a>
 

 
 

        </div>
 

 
 

        <div class="weui-cells__title">带图标、说明、跳转的列表项</div>
 

        <div class="weui-cells">
 

 
 

            <a class="weui-cell weui-cell_access" href="javascript:;">
 

                <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
 

                <div class="weui-cell__bd">
 

                    <p>cell standard</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </a>
 

            <a class="weui-cell weui-cell_access" href="javascript:;">
 

                <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
 

                <div class="weui-cell__bd">
 

                    <p>cell standard</p>
 

                </div>
 

                <div class="weui-cell__ft">说明文字</div>
 

            </a>
 

        </div>
 

    </div>
 

    <div class="page__ft">
 

        <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
 

    </div>
 

</div>
 

效果
 

 

3. Dialog
 

<ahref="javascript:void(0);" class="weui-btnweui-btn_default" id="showDialog1"οnclick="showDialog1()">iOS Dialog样式一</a>
 

<div id="dialog1" style="display: none;">
 

        <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-dialog__btn weui-dialog__btn_default">辅助操作</a>
 

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
 

            </div>
 

        </div>
 

    </div>
 

Javascript代码
 

<scripttype="text/javascript">
 

       function showDialog1()
 

       {
 

                var dialog =document.getElementById('dialog1');
 

                dialog.style.display = 'block';
 

       }
 

</script>
 

效果
 


 
 

 

其他的可以参考http://www.tianhui.site/node_modules/weui/dist/example/index.html的源代码。
 


                

        

        

    

  


    

      

        

            

              
                
                  qq_25577301
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
微信开发网页样式库

				
			

			

				

					01-24
				

			

		

		

			
				
腾讯微信团队在日前发布了WeUI微信网页设计样式库，该样式库包含了微信目前正在使用的基本样式。通过WeUI可以帮助网页开发者实现与微信客户端一致的视觉体验，并降低设计和开发成本。
目前WeUI已经包含了Button（按钮）、Cell（单元格）、Toast（浮层提示）、Dialog（对话框）、Progress（进度条）、Article（文章）、ActionSheet等，未来也将会继续保持更新。

			
		

	



                

            
              



	

		

			

				
					
新版微信样式库

				
			

			

				

					02-26
				

			

		

		

			
				
微信样式库 weui-最新版

			
		

	



              


  
              

                


	

		

			

				
					
微信样式库使用

				
			

			

				

					qupeng666的博客
				

				

					07-05
					
					464
					
				

			

		

		

			
				
首先引用weui.css（自行找资源下载）
常用的有蒙版、弹出框
初始隐藏，通过点击触发显示即可，看下方例子：

   
   
       弹窗标题-->
       已提交审核！
       
           确定

			
		

	





	

		

			

				
					
微信开发（网页样式库）

				
			

			

				

					洋洋
				

				

					10-04
					
					2888
					
				

			

		

		

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


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

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

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

			
		

	



		

			
		



	

		

			

				
					
微信小程序原生WEUI网页开发样式库_psd&sketch下载.zip

				
			

			

				

					12-28
				

			

		

		

			
				
微信小程序原生WEUI网页开发样式库是一款专为微信小程序设计的UI框架，它提供了丰富的预设样式和组件，帮助开发者快速构建具有高质量用户体验的小程序应用。WEUI的设计理念是简洁、直观，使得用户在微信环境中能获得...

			
		

	





	

		

			

				
					
微信网页开发与样式库：实战指南

				
			

			

				

					
				

			

		

		

			
				
"《微信网页开发样式库 - Windows系统编程（原书第4版）》是一本专注于微信公众号和小程序开发的实用指南。该书籍由张剑明著，主要讲解微信公众平台的从零搭建过程，特别是对于初学者来说，它提供了详尽的开发步骤和...

			
		

	





	

		

			

				
					
Java微信公众平台开发（14） 微信web开发者工具使用

				
			

			

				

					08-30
				

			

		

		

			
				
主要为大家详细介绍了Java微信公众平台开发第十四步，微信web开发者工具的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
vue+web端仿微信网页版聊天室功能

				
			

			

				

					10-17
				

			

		

		

			
				
【Vue+Web端仿微信网页版聊天室功能详解】  在Web开发中，构建一个类似微信的聊天室功能是一项挑战，但也是提升技能的好机会。本文将深入探讨如何使用Vue.js框架来实现这样一个功能丰富的聊天室。我们将关注Vue的...

			
		

	





	

		

			

				
					
weui微信UI样式库

				
			

			

				

					07-02
				

			

		

		

			
				
WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。 由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。

			
		

	





	

		

			

				
					
网页模板库-网页模板素材库431MB

				
			

			

				

					07-14
				

			

		

		

			
				
该资源为html+css+javascript网页模板素材库，内容包含有微网站、后台、经典网页、国内类型、网站布局、web2.0、DIV+CSS国内、电商网站、国外网页、精彩网页、国外早期等网页的素材，可以说是新手练手必备资源

			
		

	





	

		

			

				
					
微信原生视觉体验一致的基础样式库

				
			

			

				

					07-16
				

			

		

		

			
				
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一

			
		

	





	

		

			

				
					
HTML5微信模版

				
			

			

				

					03-23
				

			

		

		

			
				
微信页面模版微信页面模版微信页面模版微信页面模版微信页面模版微信页面模版微信页面模版

			
		

	





	

		

			

				
					
html微信开发样式,微信网页开发样式库

				
			

			

				

					weixin_30609645的博客
				

				

					06-07
					
					294
					
				

			

		

		

			
				
概述WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：1.同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站2.便捷获取快速使用，降低开发和设计成本3.微信设计团队精心打造，清晰明确，简洁大方该样式库目前包含 button、cell、dialog、progress...

			
		

	





	

		

			

				
					
网站样式参考库

				
			

			

				

					weixin_43510072的博客
				

				

					09-21
					
					469
					
				

			

		

		

			
				
中规的：
1.http://www.caas.cn/农科院的网站(门户网站）
2.http://www.gdlwhb.com.cn/index水禽重点实验室的网站



			
		

	





	

		

			

				
					
微信 ui css,样式库 WeUI for Work

				
			

			

				

					weixin_30406901的博客
				

				

					08-03
					
					1032
					
				

			

		

		

			
				
介绍WeUI for Work 是基于WeUI 上开发的一套同企业微信原生视觉体验一致的基础样式库，由微信官方设计团队为企业微信内网页量身设计，令用户的使用感知更加统一。在企业微信网页使用 WeUI for Work，有如下优势：1.同企业微信客户端一致的视觉效果，令所有企业微信用户都能更容易地使用你的网站2.便捷获取快速使用，降低开发和设计成本3.微信设计团队精心打造，清晰明确，简洁大方该样式库...

			
		

	





	

		

			

				
					
微信公众平台架构设计及微信开发样式库-翟东平-专题视频课程

				
			

			

				

					zhaidp_java的博客
				

				

					04-11
					
					233
					
				

			

		

		

			
				
微信公众平台开发有关与架构设计、安全、微信UI的相关知识。提供全套的开发工具，从“初级”开始讲解，教授如何注册、使用开发账号。特别的，还有专门的课程，手把手教同学们如何搭建环境。...

			
		

	





	

		

			

				
					
管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::

				
			

			

				

					第一段代码的博客
				

				

					07-26
					
					1895
					
				

			

		

		

			
				
管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::

			
		

	





	

		

			

				
					
 WeUI基础样式库——写一个移动端界面

				
			

			

				

					weixin_33922672的博客
				

				

					11-16
					
					715
					
				

			

		

		

			
				
WeUI是一套基础样式库，同微信原生视觉体验一致，由微信官方设计团队为微信内网页和微信小程序量身设计的。我们来看看这个基础库样式到底长什么样。
这些密密麻麻的就是压缩后的样式库。密密麻麻地看起来简直要急死密集恐惧症啊。不要急，您请往下看。仔细看我们能看到，这个样式库为很多类写了样式。也就是说，我们只要在html页面中使用这些样式，就能构建...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值