微信公众号weui的使用

最新推荐文章于 2024-08-08 07:17:47 发布

HackShendi

最新推荐文章于 2024-08-08 07:17:47 发布

阅读量3.1k

点赞数 1

分类专栏：微信公众号

本文链接：https://blog.csdn.net/qq_41806966/article/details/116921719

版权

微信公众号专栏收录该内容

1 篇文章 0 订阅

订阅专栏

hello,i’m Shendi
最近在弄微信公众号，于是记录一下

文章目录

预览
下载地址
官方文档
使用

预览

官方给的演示链接
https://weui.io/

下载地址

https://github.com/Tencent/weui
将整个仓库下载下来即可

官方文档

https://github.com/Tencent/weui/wiki

使用

这里展示个简单的 Toast，因为例子官方文档都有
文档展示了所有组件代码，但没有说明要引入什么js文件

我们下载的压缩包解压后大致是这样的
weui目录结构
src是源目录文件，我们要使用的东西都在dist文件夹下
在dist文件夹下有两个文件夹
dist文件夹目录
要引入的css文件在style中
example是案例，我们需要把example中的zepto.min.js文件
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>
	<head>
		<link rel='stylesheet' href='style/weui.min.css'/>
		<script src='example/zepto.min.js'></script>
	<head>
	<body>
		<div class="page">
			<div class="page__hd">
				<h1 class="page__title">Toast</h1>
				<p class="page__desc">弹出式提示</p>
			</div>
			<div class="page__bd page__bd_spacing">
				<a href="javascript:" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
				<a href="javascript:" class="weui-btn weui-btn_default" id="showWarnToast">失败提示</a>
				<a href="javascript:" class="weui-btn weui-btn_default" id="showTextMoreToast">长文案提示</a>
				<a href="javascript:" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
				<a href="javascript:" class="weui-btn weui-btn_default" id="showTextToast">文字提示</a>
			</div>

			<!--BEGIN toast-->
			<div id="toast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<i class="weui-icon-success-no-circle weui-icon_toast"></i>
					<p class="weui-toast__content">已完成</p>
				</div>
			</div>

			<!--BEGIN toast-->
			<div id="textMoreToast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast weui-toast_text-more">
					<i class="weui-icon-warn weui-icon_toast"></i>
					<p class="weui-toast__content">此处为长文案提示详情</p>
				</div>
			</div>

			<!--BEGIN toast-->
			<div id="warnToast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<i class="weui-icon-warn weui-icon_toast"></i>
					<p class="weui-toast__content">获取链接失败</p>
				</div>
			</div>

			<!-- loading toast -->
			<div id="loadingToast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<span class="weui-primary-loading weui-icon_toast">
					  <span class="weui-primary-loading__dot"></span>
					</span>
					<p class="weui-toast__content">加载中</p>
				</div>
			</div>

			<!-- text toast -->
			<div id="textToast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast weui-toast_text">
					<p class="weui-toast__content">文字提示</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// toast
			$(function(){
				var $toast = $('#toast');
				$('#showToast').on('click', function(){
					if ($toast.css('display') != 'none') return;

					$toast.fadeIn(100);
					setTimeout(function () {
						$toast.fadeOut(100);
					}, 2000);
				});
			});

			// warn
			$(function(){
				var $warnToast = $('#warnToast');
				$('#showWarnToast').on('click', function(){
					if ($warnToast.css('display') != 'none') return;

					$warnToast.fadeIn(100);
					setTimeout(function () {
						$warnToast.fadeOut(100);
					}, 2000);
				});
			});

			// text-more
			$(function(){
				var $textMoreToast = $('#textMoreToast');
				$('#showTextMoreToast').on('click', function(){
					if ($textMoreToast.css('display') != 'none') return;

					$textMoreToast.fadeIn(100);
					setTimeout(function () {
						$textMoreToast.fadeOut(100);
					}, 2000);
				});
			});

			// loading
			$(function(){
				var $loadingToast = $('#loadingToast');
				$('#showLoadingToast').on('click', function(){
					if ($loadingToast.css('display') != 'none') return;

					$loadingToast.fadeIn(100);
					setTimeout(function () {
						$loadingToast.fadeOut(100);
					}, 2000);
				});
			});

			// text
			$(function(){
				var $textToast = $('#textToast');
				$('#showTextToast').on('click', function(){
					if ($textToast.css('display') != 'none') return;

					$textToast.fadeIn(100);
					setTimeout(function () {
						$textToast.fadeOut(100);
					}, 2000);
				});
			});
		</script>
	</body>
</html>