微信网页开发样式库

最新推荐文章于 2023-06-09 16:45:12 发布
最新推荐文章于 2023-06-09 16:45:12 发布
阅读量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
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
WeUI 入门教程

				
			

			

				

					黄沙百战穿金甲，不破楼兰终不还。                               
				

				

					02-24
					
					7万+
					
				

			

		

		

			
				
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式,下面demo下载地址：http://download.csdn.net/detail/comet

			
		

	



                

              
                



	

		

			

				
					
WeUI for 小程序使用教程文档总结

				
			

			

				

					采菊东篱下，Python满乾坤！
				

				

					09-26
					
					1万+
					
				

			

		

		

			
				
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元素。

 

一、项目地址

https://github.com/weui/weui-wxss/
...

			
		

	



                


  
              

                


	

		

			

				
					
小程序 修改weui组件里标题大小

				
			

			

				

					LlanyW的专栏
				

				

					06-09
					
					377
					
				

			

		

		

			
				
需要单独修改的话，使用官方的嵌套自定属性：ext-class 增加自己的class,然后组合选择当前标题。这样会把整个页面所有cells标题都修改。如下2个表单荐标题都被改了。然后在当前页面对应的.wxss，直接重置对应的字体大小。

			
		

	





	

		

			

				
					
微信小程序 - weui的引入使用方法

				
			

			

				

					我的博客
				

				

					03-11
					
					3284
					
				

			

		

		

			
				
查看weui是否是想要的表单样式，样式大致为：
	



	下载weui
	

链接：https://pan.baidu.com/s/1jYqX1TEsyPWAqUHLwUm19Q提取码：kvtc



	引入weui
	
（1）将src->style->weui.wxss复制到自己项目的最外层文件夹中



（2）在app.wxss文件中顶部加上如下代码


/* 这里的""里...

			
		

	



		

			
		



	

		

			

				
					
小程序中flex兼容性布局参考weui源码

				
			

			

				

					weixin_43837268的博客
				

				

					08-27
					
					429
					
				

			

		

		

			
				
1.example.wxml


<!--pages/usercenter/usercenter.wxml-->
<view class="weui-cells__title">
    带说明的列表项
</view>
<view class="weui-cells">
    <view class="weui-cell">
     ...

			
		

	





	

		

			

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

				
			

			

				

					.NET快速开发框架
				

				

					05-28
					
					2088
					
				

			

		

		

			
				
1、前言
通过前面系列文章的学习与讲解，相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病，对于微信开发前端组件这一块总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端...

			
		

	





	

		

			

				
					
微信开发网页样式库

				
			

			

				

					01-24
				

			

		

		

			
				
腾讯微信团队在日前发布了WeUI微信网页设计样式库，该样式库包含了微信目前正在使用的基本样式。通过WeUI可以帮助网页开发者实现与微信客户端一致的视觉体验，并降低设计和开发成本。 目前WeUI已经包含了Button...

			
		

	





	

		

			

				
					
微信网页开发文件

				
			

			

				

					09-12
				

			

		

		

			
				
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

			
		

	





	

		

			

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

				
			

			

				

					08-30
				

			

		

		

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

			
		

	





	

		

			

				
					
微信公众号网页开发使用 WeUI优势

				
			

			

				

					10-30
				

			

		

		

			
				
本资源详细介绍了微信公众号网页开发使用 WeUI优势，为快速开发公众号网页开发的必备利器，为企业节约了微信网页的设计和开发成本

			
		

	





	

		

			

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

				
			

			

				

					12-28
				

			

		

		

			
				
微信小程序原生WEUI网页开发样式库 psd&sketch下载 PSD、主题包、小应用UI、小程序、微信psd、微信UI界面、微信UI设计、微信小应用psd、微信设计流程、微信设计规范

			
		

	





	

		

			

				
					
新版微信样式库

				
			

			

				

					02-26
				

			

		

		

			
				
微信样式库 weui-最新版

			
		

	





	

		

			

				
					
css常用公共样式 pc端

				
			

			

				

					weixin_44510655的博客
				

				

					07-22
					
					572
					
				

			

		

		

			
				
css常用公共样式 pc端

			
		

	





	

		

			

				
					
WeUI使用

				
			

			

				

					hangGe0111的博客
				

				

					08-11
					
					7291
					
				

			

		

		

			
				
方法一：

1.先去官网（官方网址：https://weui.io/）==》右键查看源码找到


&lt;link rel="stylesheet" href="./weui.css"/&gt;

点击href后的路径即可进入https://weui.io/weui.css，把所有的css复制到自己本地的weui.css文件中。如果嫌麻烦，也可引入bootcdn线上资源里的css。

2.如果想使...

			
		

	





	

		

			

				
					
WeU专为微信移动 Web应用设计的 UI 库。

				
			

			

				

					weixin_30257433的博客
				

				

					10-19
					
					1214
					
				

			

		

		

			
				
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。
WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
使用
方法一：
使用bower进行安装


?




1



bower...

			
		

	





	

		

			

				
					
微信小程序-自定义组件

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					01-10
					
					9064
					
				

			

		

		

			
				
https://github.com/skyvow/wux



微信小程序-自定义组件



Components


[Backdrop - 背景幕]

[Dialog - 对话框]

[Loading - 指示器]

[Toast - 提示框]

[Rater - 评分]


Backdrop
 - 背景幕

import src="../.

			
		

	





	

		

			

				
					
weui 列表控件

					
热门推荐

				
			

			

				

					xiaozaq的博客
				

				

					01-23
					
					1万+
					
				

			

		

		

			
				
下面是个列表


    
        
            标题文字
        
        说明文字
    



    
        
        
            标题文字
        
        说明文字
    



    
        
            标题文字
        
        
    



   

			
		

	





	

		

			

				
					
折叠面板的使用，简洁-weui的使用

				
			

			

				

					白白的博客
				

				

					08-06
					
					1557
					
				

			

		

		

			
				
<link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script>
        $(function(){
            $('.collapse .js-category').c.

			
		

	





	

		

			

				
					
uniapp 微信小程序ui库

					
最新发布

				
			

			

				

					09-09
				

			

		

		

			
				
WeUI 是一套由微信官方设计团队为微信内网页和微信小程序量身设计的基础样式库，可以保证用户的使用感知更加统一。 Cube UI 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库，支持按需引入和后编译，具有轻量...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值