微信WeUI常见页面模板

最新推荐文章于 2024-03-20 14:47:09 发布
最新推荐文章于 2024-03-20 14:47:09 发布
阅读量2.8k 收藏 4
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/643617
版权

购物车模板

就是popup弹层(css样式+js)，还有slider滑动操作，还有增减的js

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<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="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
        <style>
      .summary {
        padding: 8px;
        text-align: right;
        background-color: white;
      }
      .price {
        font-size: .9em;
        margin-right: 6px;
      }
    </style>
</head>
<body ontouchstart>
    <!-- Your Code -->
    
    <header class='demos-header'>
      <h1 class="demos-title">购物车</h1>
    </header>

    <div class='demos-content-padded'>
      <article class="weui-article">
        <p>这是一个购物车的模板，可以参考这个模板完成你自己的购物车。支持：</p>
        <ul>
          <li>可以加减数量</li>
          <li>可以滑动删除</li>
        </ul>
        <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#cart">打开购物车</a>
      </article>
    </div>
    
    <div id="cart" class='weui-popup__container popup-bottom'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button close-popup">关闭</a>
            <h1 class="title">我的购物车</h1>
          </div>
        </div>
        <div class="modal-content">
          <div class="weui-cells">
            <div class="weui-cell weui-cell_swiped">
              <div class="weui-cell__bd">
                <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>清风纸巾12包装</p>
                  </div>
                  <div class="weui-cell__ft">
                    <span class="price">￥24.00</span>
                    <div class="weui-count">
                      <a class="weui-count__btn weui-count__decrease"></a>
                      <input class="weui-count__number" type="number" value="1" />
                      <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="weui-cell__ft">
                <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
                <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
              </div>
            </div>
            <div class="weui-cell weui-cell_swiped">
              <div class="weui-cell__bd">
                <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">
                    <span class="price">￥35.00</span>
                    <div class="weui-count">
                      <a class="weui-count__btn weui-count__decrease"></a>
                      <input class="weui-count__number" type="number" value="1" />
                      <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="weui-cell__ft">
                <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
                <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
              </div>
            </div>
          </div>
        </div>
        <p class="summary">
          2 件商品, 共计 <strong>123.5</strong> 元
        </p>
      </div>
    </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        add_delete();
        slider_operate();
        
        //封装成方法，便于调用
        function add_delete () {
          var MAX = 99, MIN = 1;
          $('.weui-count__decrease').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            console.log($input.val());
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
          });
          $('.weui-count__increase').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1
            if (number > MAX) number = MAX;
            $input.val(number)
          });
        }
        
        //封装成方法，便于调用    
        function slider_operate () {
          $('.delete-swipeout').click(function () {
            $(this).parents('.weui-cell').remove()
          });
          $('.close-swipeout').click(function () {
            $(this).parents('.weui-cell').swipeout('close')
          });
        }
            

      
    </script>
</body>
</html>
View Code

 

tpl就是template的简写

聊天室模板

<!DOCTYPE html>
<html lang="zh-CN">
<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="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
    <style type="text/css">
        .badge-position{
            position: absolute;
            top: -.4em;
            right: -.4em;
        }
    </style>
</head>
<body ontouchstart>
    <!-- Your Code -->
    <div class="page__pd">
      <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" action="#">
          <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
          </div>
          <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
          </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
      </div>
      <div class="weui-panel weui-panel_access">
        <div class="weui-panel__bd">
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-cell__bd">
               <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
              <span class="weui-badge badge-position" >8</span>
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                刘亦菲
                <span class="weui-media-box__title-after">下午8:12</span>
              </h4>
              <p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
            </div>
            

           
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
              <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">3</span>
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                Baby
                <span class="weui-media-box__title-after">下午7:23</span>
              </h4>
              <p class="weui-media-box__desc">晚上约吗？</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
              <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">99+</span>
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                江户川-元芳
                <span class="weui-media-box__title-after">上午10:15</span>
              </h4>
              <p class="weui-media-box__desc">真相只有一个</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                刘亦菲
                <span class="weui-media-box__title-after">下午8:12</span>
              </h4>
              <p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                Baby
                <span class="weui-media-box__title-after">下午7:23</span>
              </h4>
              <p class="weui-media-box__desc">晚上约吗？</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                江户川-元芳
                <span class="weui-media-box__title-after">上午10:15</span>
              </h4>
              <p class="weui-media-box__desc">真相只有一个</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                刘亦菲
                <span class="weui-media-box__title-after">下午8:12</span>
              </h4>
              <p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                Baby
                <span class="weui-media-box__title-after">下午7:23</span>
              </h4>
              <p class="weui-media-box__desc">晚上约吗？</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                江户川-元芳
                <span class="weui-media-box__title-after">上午10:15</span>
              </h4>
              <p class="weui-media-box__desc">真相只有一个</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                刘亦菲
                <span class="weui-media-box__title-after">下午8:12</span>
              </h4>
              <p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                Baby
                <span class="weui-media-box__title-after">下午7:23</span>
              </h4>
              <p class="weui-media-box__desc">晚上约吗？</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                江户川-元芳
                <span class="weui-media-box__title-after">上午10:15</span>
              </h4>
              <p class="weui-media-box__desc">真相只有一个</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <style>
      .weui-panel {
        margin: 0;
      }
      .weui-media-box {
        padding: 8px 15px;
      }
      .weui-panel__bd .weui-media-box__hd {
        width: 50px;
        height: 50px;
        line-height: 50px;
        position: relative;
      }
      .weui-media-box__desc {
        -webkit-line-clamp: 1;
      }
      .weui-media-box__title {
        margin-top: -4px;
      }
    </style>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    
</body>
</html>
View Code

 

weixin_34101229
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
weui微信商城全套页面模板.rar
04-24
包括主页，分类页，购物车，后台页等等等，效果请访问 https://blog.csdn.net/weixin_44797182/article/details/105739913
微信WeUI入门2
weixin_34187862的博客
08-27 157
引入需要的样式文件 最重要的css文件为 weui.min.css 基本的框架如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
WeUI 商城模板免费下载，完整全套模板包括首页/列表/登录等。
05-26
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在WeUI基础上开发的完整全套模板包括首页/列表/登录等。
weui实现微信网页模板（主页，购物车，分类，后台等等）
咖啡味的小认真
04-24 2261
试试
微信小程序如何导入weui并使用example里的模板
qq_45777875的博客
04-19 195
可以看到一些开头的class是在app.wxss文件里面定义的。运行源文件example可以看到例子，直接复制粘贴对应代码。实际上查询一下example里面的模板选择器类型。不知道是不是weui改版的问题。并没有用npm,直接导入文件。查了几个博客没试出成功的。
移动商城html 源码,基于weui的移动商城html5模板
weixin_39948309的博客
06-18 3082
【实例简介】基于weui开发的一整套移动端商城,包括首页,购物车,订单管理,评价,分类,会员中心等【实例截图】【核心代码】web└── web├── add_card.html├── address_edit.html├── address_list.html├── all_orders.html├── card.html├── chongzhi.html├── classify.html├── ...
weui 开发文档
热门推荐
gegephp的博客
03-28 6万+
今天需要用到weui，这里记录一下开发文档地址 开发文档： https://github.com/Tencent/weui.js/blob/master/docs/README.md github： https://github.com/Tencent/weui.js 效果展示： https://weui.io ...
微信商城基于weui开发整套模板源码.zip
03-05
WeUI包含了各种常见的组件，如按钮、输入框、表单、加载提示、弹窗等，使得开发者能够快速构建符合微信风格的页面。 在微信商城项目中，**首页**是用户首次接触商城的入口，通常包含轮播图、热销商品、推荐活动等...
weui微信前端样式
07-24
2. **组件丰富**：WeUI 包含了多种常见的 UI 组件，如按钮（Button）、表单（Form）、栅格（Grid）、导航（Nav）、下拉菜单（Dropdown）、提示（Toast）、加载（Loading）、弹窗（Modal）等，满足微信小程序和网页的...
移动端微信UI界面ydui模板
06-24
在移动应用开发领域，设计和实现一套用户友好的界面至关重要，尤其对于微信这样的...在实际开发过程中，结合微信的开发框架，如WeUI或微信小程序的开发工具，可以更高效地利用这些资源，构建出高质量的移动端微信应用。
jQuery WeUI组件微信公众号页面模板
04-25
jQuery WeUI组件微信公众号页面模板jQuery WeUI组件微信公众号页面模板
weui-master:weui模板
03-23
WeUI-为WeChat Web服务量身定制 介绍 WeUI是类似于WeChat的UI框架，由WeChat设计团队正式设计，是为WeChat Web开发量身定制的，目的是改善和标准化WeChat用户的体验。 包括button ， cell ， dialog ， progress ， toast ， article ， actionsheet ， icon 。 手机演示 旧版： ： 文献资料 WeUI文档 WeUI设计参考 发展 执照 MIT许可证（ ） 请随时使用并为开发做出贡献。 贡献 如果您有任何改善微信WeUI的想法或建议，欢迎提交问题/拉取请求。
OmniGraffle 微信模板
08-17
在“OmniGraffle 微信模板”中，用户可以找到一系列预先设计好的图形样式和布局，这些模板通常涵盖了微信应用中的常见界面元素，如按钮、导航栏、对话框、图标等。通过使用这些模板，设计师可以节省大量的时间和精力...
1.3.3微信小程序WeUI.js网页开发样式库
Eric is a ....
04-22 4297
目录 1 概述2 使用方法 2.1 安装2.2 开发 3 元素类型 3.1 Button3.2 Cell3.3 Dialog3.4 Progress3.5 Toast3.6 Msg Page3.7 Article3.8 ActionSheet3.9 Icon 4 技术支持与反馈 概述 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官
uni-app 微信小程序之好看的ui登录页面（五）
@必意玲
12-07 7046
【代码】uni-app 微信小程序之好看的ui登录页面（五）
如何调uView中input和Form表单的样式
最新发布
s_156的博客
03-20 604
如上，我们不想让bottom线占满整个宽度，可以直接找到组件u-form-item，在样式中添加width：80%的样式。以上添加了两个类，其中u-m-l-40表示的是 margin-left ：40rpx；如果想placeholder的文字靠右，可以再给input框加入文字靠右的属性。用 placeholder=“请输入备注内容”再通过内置样式修改input框的长度。
weui 必填_WeUI注册页面
weixin_39623716的博客
12-19 449
注册页面1. 路由配置系统路由配置文件：resources\web.phpRoute::get('/register', function () {return view('register');});2. 模板规划基础布局模板：resources\views\layout.blade.php模板组件目录：resources\component基础布局模板：resources\views\layo...
微信小程序登陆账号验证隐私协议验证页面及代码
凉梦的博客
07-28 1567
微信小程序登陆页面样式及代码
WeUI实现登录页面
沧海龙腾LV的博客
02-22 8417
利用WeUIz做的登录页： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;he...
微信小程序前端页面模板
05-11
微信小程序前端页面可以使用官方提供的组件库和API进行构建。同时，也可以使用第三方的UI框架，如WeUI、Vant等。 在使用官方组件库时，可以使用小程序开发者工具提供的模板来快速创建页面。具体步骤如下： 1. 打开小程序开发者工具，选择创建项目。 2. 在创建项目的界面中，选择“小程序模板”。 3. 在“小程序模板”中，选择需要的页面模板，如“空白模板”、“列表模板”等。 4. 点击“确定”创建项目。 在使用第三方UI框架时，可以先安装对应的框架，然后根据框架提供的文档进行使用。 以使用WeUI为例，具体步骤如下： 1. 在小程序项目中的app.json文件中，添加WeUI的样式文件路径。 ``` { "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "Demo" }, "style": "weui/dist/style/weui.wxss" //添加WeUI样式文件路径 } ``` 2. 在需要使用WeUI组件的页面中，引入WeUI的样式文件和JS文件。 ``` <view class="weui-cells__title">表单</view> <form class="weui-form"> <view class="weui-form__text-area"> <textarea class="weui-textarea" placeholder="请输入文本" maxlength="200" rows="3"></textarea> </view> </form> <!-- 引入WeUI样式文件 --> @import 'weui/dist/style/weui.wxss'; <!-- 引入WeUI JS文件 --> const weui = require('weui.js'); ``` 以上是一个简单的使用WeUI的示例，具体的使用方法和组件文档可以参考WeUI官方文档。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值