WeUI测试代码

最新推荐文章于 2025-04-11 09:26:21 发布
最新推荐文章于 2025-04-11 09:26:21 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Alex_X_Jane/article/details/52644904
版权 
<!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>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.2/weui.css"/>
		
		<link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
		<div class="hd">
			<h2 class="page_title">交汇教育</h2>
			<p class="page_text" style="text-align:center">Hello World</p>
		</div>
	
        <!-- 按钮
        <a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a>
		
		<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>
		-->
		
		
		<!--单元格1
		<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">
					240831095
				</div>
			</div>
			
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>昵称</p>
				</div>
				<div class="weui_cell_ft">
					王尼玛
				</div>
			</div>
			
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>邮箱</p>
				</div>
				<div class="weui_cell_ft">
					240831095@qq.com
				</div>
			</div>	
		</div>
		-->

		
		<!--单元格2
		<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
		<div class="weui_cells weui_cells_access">

			<a class="weui_cell" href="http://www.baidu.com">
				<div class="weui_cell_hd">
					<img src="images/icon_nav_article.png" alt="icon" style="width:28px;margin-right:28px;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>		
		-->
		
		
		<!-- alert弹框（弹窗）
		<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="http://www.baidu.com" class="weui_btn_dialog primary">确定</a>
				</div>
			</div>
		</div>
		-->
		
		<!-- confirm弹框（弹窗）
		<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="toast">
			<div class="bd spacing">
				<a href="#" class="weui_btn weui_btn_primary" id="showToast">注册</a>
			</div>
			<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>
		-->
		
			
		
		<!--"Loading"临时窗口
		<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>	
		-->
		
		
		<!--结果页
		<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">
				<div class="weui_btn_area">
					<a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
					<a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
				</div>
			</div>
			<div class="weui_extra_area">
				<a href="">查看详情</a>
			</div>
		</div>		
		-->
		

		<!--九宫格Grid-->
		<div class="weui_grids">
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_button.png" alt="">
				</div>
				<p class="weui_grid_label">
					会员绑定
				</p>
			</a>


			
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_panel.png" alt="">
				</div>
				<p class="weui_grid_label">
					会员中心
				</p>
			</a>
			

			
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_tab.png" alt="">
				</div>
				<p class="weui_grid_label">
					教学地点
				</p>
			</a>
			

			
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_toast.png" alt="">
				</div>
				<p class="weui_grid_label">
					课程介绍
				</p>
			</a>
		</div>

		<!--输入框input表单
		<div class="weui_cells_title">表单</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">qq</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="tel" placeholder="请输入qq号">
				</div>
			</div>
		</div>
		-->
		
		<!-- 文本域textarea表单
		<div class="weui_cells_title">意见反馈</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<textarea class="weui_textarea" placeholder="请输入意见反馈" rows="3"></textarea>
					<div class="weui_textarea_counter"><span>0</span>/200</div>
				</div>
			</div>
		</div>
		-->

		<!--单选框Raido表单
		<div class="weui_cells_title">单选列表项</div>
		<div class="weui_cells weui_cells_radio">
			<label class="weui_cell weui_check_label" for="x11">
				<div class="weui_cell_bd weui_cell_primary">
					<p>cell standard</p>
				</div>
				<div class="weui_cell_ft">
					<input type="radio" class="weui_check" name="radio1" id="x11">
					<span class="weui_icon_checked"></span>
				</div>
			</label>
			
			<label class="weui_cell weui_check_label" for="x12">
				<div class="weui_cell_bd weui_cell_primary">
					<p>cell standard</p>
				</div>
				<div class="weui_cell_ft">
					<input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
					<span class="weui_icon_checked"></span>
				</div>
			</label>
		</div>		
		-->
		
		<!--复选框checkbox表单
		<div class="weui_cells_title">复选列表项</div>
		<div class="weui_cells weui_cells_checkbox">
			<label class="weui_cell weui_check_label" for="s11">
				<div class="weui_cell_hd">
					<input type="checkbox" class="weui_check" name="checkbox1" id="s11">
					<i class="weui_icon_checked"></i>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<p>standard is dealt for u.</p>
				</div>
			</label>
			
			<label class="weui_cell weui_check_label" for="s12">
				<div class="weui_cell_hd">
					<input type="checkbox" class="weui_check" name="checkbox1" id="s12">
					<i class="weui_icon_checked"></i>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<p>standard is dealicient for u.</p>
				</div>
			</label>
		</div>
		-->
		
		
		<!--选择框select表单
		<div class="weui_cells_title">选择</div>
		<div class="weui_cells">
			<div class="weui_cell weui_cell_select weui_select_before">
				<div class="weui_cell_hd">
					<select class="weui_select" name="select2">
						<option value="1">+86</option>
						<option value="2">+80</option>
						<option value="3">+84</option>
						<option value="4">+87</option>
					</select>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="tel" placeholder="请输入号码">
				</div>
			</div>
		</div>
		<div class="weui_cells_title">选择</div>
		<div class="weui_cells">
			<div class="weui_cell weui_cell_select">
				<div class="weui_cell_bd weui_cell_primary">
					<select class="weui_select" name="select1">
						<option selected="" value="1">微信号</option>
						<option value="2">QQ号</option>
						<option value="3">Email</option>
					</select>
				</div>
			</div>
			<div class="weui_cell weui_cell_select weui_select_after">
				<div class="weui_cell_hd">
					国家/地区
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<select class="weui_select" name="select2">
						<option value="1">中国</option>
						<option value="2">美国</option>
						<option value="3">英国</option>
					</select>
				</div>
			</div>
		</div>		
		-->
		
		
		<!--开关switch表单
		<div class="weui_cells_title">开关</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell weui_cell_switch">
				<div class="weui_cell_hd weui_cell_primary">声音</div>
				<div class="weui_cell_ft">
					<input class="weui_switch" type="checkbox">
				</div>
			</div>
			<div class="weui_cell weui_cell_switch">
				<div class="weui_cell_hd weui_cell_primary">振动</div>
				<div class="weui_cell_ft">
					<input class="weui_switch" type="checkbox" checked>
				</div>
			</div>
		</div>
		-->
		
		
		<!--上传组件Uploader表单
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<div class="weui_uploader">
						<div class="weui_uploader_hd weui_cell">
							<div class="weui_cell_bd weui_cell_primary">图片上传</div>
							<div class="weui_cell_ft">0/2</div>
						</div>
						<div class="weui_uploader_bd">
							<ul class="weui_uploader_files">
								<li class="weui_uploader_file" style="background-image:url(...)"></li>
								<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
									<div class="weui_uploader_status_content">
										<i class="weui_icon_warn"></i>
									</div>
								</li>
								<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
									<div class="weui_uploader_status_content">50%</div>
								</li>
							</ul>
							<div class="weui_uploader_input_wrp">
								<input class="weui_uploader_input" type="file" accept="image/*" multiple="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
		-->

		<!--图文列表Panel
		<div class="weui_panel weui_panel_access">
			<div class="weui_panel_hd">图文组合列表</div>
			<div class="weui_panel_bd">
				<a href="http://www.baidu.com" class="weui_media_box weui_media_appmsg">
					<div class="weui_media_hd">
						<img class="weui_media_appmsg_thumb" src="" alt="">
					</div>
					<div class="weui_media_bd">
						<h4 class="weui_media_title">标题一</h4>
						<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
					</div>
				</a>
				<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
					<div class="weui_media_hd">
						<img class="weui_media_appmsg_thumb" src="" alt="">
					</div>
					<div class="weui_media_bd">
						<h4 class="weui_media_title">标题二</h4>
						<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
					</div>
				</a>
			</div>
			<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
		</div>		
		-->
		
	</body>
</html>

Allennnn_
关注
WEUI 源码学习一
plustard1的博客
07-07 443
BEM命名规范 CSS命名模板 page page_hd page_bd primary | default 语法点 .weui-btn + .weui-btn 表示有前btn的btn-webkit-tap-highlight-color: rgba(0,0,0,0); reset 样式，不同类型的浏览器 对按上按钮的高亮颜色不一致 请大家注意有以下坑 1. 这个属性目前是实验属性，加前缀 -webkit Android和IOS手机浏览器都是 -webkit PC端 IE -ms 2. 怎么看效.
weui 小程序组件样式开源代码
10-03
8. `test`：测试目录，包含项目的单元测试或集成测试，以确保代码的质量和功能的正确性。 9. `dist`：发布目录，存放经过构建和打包后的文件，可供部署和运行使用。 综上所述，WeUI小程序组件样式开源代码项目为...
WeUI 源代码
04-05
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
WEUI 源码学习
yunxingmantian的博客
07-07 260
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录学习目标：学习内容：前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结学习时间：学习产出： 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
WeUI 使用教程
最新发布
gitblog_00836的博客
04-11 932
WeUI 使用教程 weui A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications. ...
微信WeUI源代码
09-22
WeUI
weui模板源码
06-11
weui模板源码，基于模板用于微信商城，电商平台，移动版微商城
WEUI 源码学习—
ljx15970777407的博客
07-08 208
.BEM命名规范 .CSS 命名模板 ~~~css page page_hd page_bd primary|default -语法点 . weui-btn + .weui-btn 表示有前btn的btn ```css webkit-tap-highlight- color:rgba(0,0,0,0); reset 样式， 不同类型的浏览器 对按上按...
深入探索微信WeUI源代码的设计与应用
同时，WeUI的兼容性是经过严格测试的，可以支持大部分现代浏览器，确保了应用的稳定运行。 总结而言，微信WeUI源代码是微信生态中重要的UI资源，它为微信小程序及其他微信相关应用提供了一整套界面设计和开发框架。...
微信小程序官方weui css小程序weui 真机测试
03-12
在本压缩包中，"微信小程序官方weui css小程序weui 真机测试" 提供了一个基于WeUI框架的小程序示例，确保了在真实设备上的可用性和性能。 WeUI是微信官方设计团队推出的一套符合微信原生视觉体验的Web UI组件库，...
微信小程序weUI组件所有demo示例
10-17
"今天把整个ui组件从github上拷贝下来"意味着这些代码资源来源于开源社区，开发者可以在GitHub这样的平台上找到WeUI的源代码，参与贡献或者获取最新的更新。这对于开源软件的发展非常重要，因为它鼓励了协作和分享。...
weui示例源码
06-11
weui示例源码，包含weui的使用示例和weui-wxss，与GITHUB基本一致
weui的代码
01-04
weui 摘自github 上传了试试。。。。。。。。。。。。
WEUI整套移动端模板源码
03-15
WEUI整套移动端模板源码WEUI整套移动端模板源码WEUI整套移动端模板源码
weui开发整套移动端微商城模板源码
11-13
一、源码特点 1、自适应，运用了html5新特性标签，使用weui开发的一整套移动端商城，包括首页，购物车，订单管理，评价，分类，会员中心等，全面到注册协议都弄好了。私人定制服务手机网站模板html源码下载，可进行二次修改进行开发，适合微信，值得借鉴。 文档参考地址：http://www.ui92.com/
weui的项目代码及使用示例
02-15
本代码根据http://bbs.html51.com/f-36-1/的源码整理分享给大家。更多资源请自己进论坛下载。
WEUI源码学习
weixin_34310127的博客
04-24 261
WEUI为微信Web服务量身设计 English version 概述 WEUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为 微信web开发量身设计，可以令用户的使用感知更加统一。包含button、cell 、progress、dialog、toast、actionsheet、icon等各式元素。 手机预览 weui.io 文档 Weui 说明文档参考wiki Weui 视...
WEUI的源代码
weixin_47521196的博客
01-11 1182
WEUI官方网站中不像elementui和vant一样能够在网页上就同时看到源码和样式 WEUI的git地址为https://github.com/weui/weui-wxss 将代码下载下来后不要直接导入整个项目，只导入dist文件即可。 导入dist文件可能会出现"sitemapLocation":"sitemap.json"这个错误，说这个文件找不到，我们只需要重启再导入一遍dist文件即可 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值