微信公众号weui的使用
生活随笔
收集整理的這篇文章主要介紹了
微信公众号weui的使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
hello,i’m Shendi
最近在弄微信公眾號，于是記錄一下
文章目錄
- 預(yù)覽
- 下載地址
- 官方文檔
- 使用
預(yù)覽
官方給的演示鏈接
https://weui.io/
下載地址
https://github.com/Tencent/weui
將整個(gè)倉庫下載下來即可
官方文檔
https://github.com/Tencent/weui/wiki
使用
這里展示個(gè)簡單的 Toast，因?yàn)槔庸俜轿臋n都有
文檔展示了所有組件代碼，但沒有說明要引入什么js文件
我們下載的壓縮包解壓后大致是這樣的
src是源目錄文件，我們要使用的東西都在dist文件夾下
在dist文件夾下有兩個(gè)文件夾
要引入的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>總結(jié)
以上是生活随笔為你收集整理的微信公众号weui的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux go环境安装和基本项目结构
- 下一篇： 演化博弈与GAN网络