<!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="http://res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css"> </head> <body ontouchstart>  </body> </html>

购物车模板

就是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

vue+weui 手机端项目

用脚手架创建vue项目

再visCode中安装 ESLint 插件（这个不是每次都安装，安装一次就行，他是visCode的插件）

然后配置visCode设置的配置文件

{ "liveServer.settings.donotShowInfoMsg": true, "workbench.colorTheme": "Visual Studio Light", "editor.fontSize": 22, "liveServer.settings.donotVerifyTags": true, "liveServer.settings.port": 5500, "files.autoSave": "off", // 配置 eslint "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, //autoFix默认开启，只需输入字符串数组即可 "eslint.validate": [ "javascript", "vue", "html" ], "[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } // "vetur.format.defaultFormatter.js": "vscode-typescript" }

此时，编写 vue 文件时
编写时，就会自动的按照eslint标准语法进行检测，并标注错误
保存代码时，会自动按照 eslint 语法要求对代码进行修复

2.2 初始化项目结构

删除 views 目录下的 home.vue和about.vue

删除components目录下的HelloWord.vue

在components目录下创建login目录

在login目录下创建index.vue

在路由文件中，编写代码

import Vue from 'vue' import VueRouter from 'vue-router' /** * 1、@ 表示src 目录的别名 * 2、如果组件名称为index.vue，则可以省略组件名称 */ import Login from '@/components/login' Vue.use(VueRouter) const routes = [ { path: '/login', name: 'login', component: Login } ] const router = new VueRouter({ routes }) export default router

2.4 项目中使用weui组件库

将weui.css、weui.min.css、weui.js、weui.min.js 拷贝到 lib 目录下

再将weui.css、weui.min.css拷贝到 assets目录下

在public目录下的index.html中加入如下代码，引入weui.js
在这里插入图片描述

在main.js 中引入 weui.css

// 在入口文件中引入的css，在任何组件中都可以使用其中的样式 import './assets/weui.css'

在login/index.vue中加入如下代码，进行测试

<template> <div> <a href="javascript:" class="weui-btn weui-btn_primary" @click="handleClick">页面主操作</a> </div> </template> <script> export default { 2.5 登录功能效果展示 data () { return { msg: 'hello' } }, methods: { handleClick () { weui.toast('操作成功', 3000) } } } </script>

2.5 登录功能

效果展示图

模板

<template> <div class="page"> <div class="close" @click="close"></div> <div class="weui-form"> <div class="weui-form__text-area"> <h2 class="weui-form__title">手机号登录</h2> </div> <div class="weui-form__control-area"> <div class="weui-cells__group weui-cells__group_form"> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_active"> <div class="weui-cell__hd"><label class="weui-label">手机号</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" pattern="[0-9]{11}" placeholder="请输入手机号" /> </div> </div> <div class="weui-cell weui-cell_active weui-cell_vcode"> <div class="weui-cell__hd"><label class="weui-label">验证码</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" pattern="[0-9]*" placeholder="输入验证码" maxlength="6"/> </div> <div class="weui-cell__ft"> <button class="weui-btn weui-btn_default weui-vcode-btn" @click="getCode">获取验证码</button> </div> </div> </div> <div class="weui-cells__tips"><a class="weui-link" href="javascript:">收不到验证码</a></div> </div> </div> <div class="weui-form__tips-area"> <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree"> <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:">《相关条款》</a> </span> </label> </div> <div class="weui-form__opr-area"> <a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a> </div> </div> </div> </template>

样式

.close{ width: 25px; height: 25px; position: absolute; top: 25px; left: 25px; background-image: url(../../assets/images/cuo.jpg); background-size:100%; } .weui-cells__group_form .weui-cell__hd { padding-right: 10px; }

【实例简介】

基于weui开发的一整套移动端商城,包括首页,购物车,订单管理,评价,分类,会员中心等

【实例截图】

【核心代码】

web

└── web

├── add_card.html

├── address_edit.html

├── address_list.html

├── all_orders.html

├── card.html

├── chongzhi.html

├── classify.html

├── comment.html

├── css

│ ├── demos.css

│ ├── jquery-weui.css

│ ├── jquery-weui.min.css

│ └── style.css

├── gallery.html

├── images

│ ├── BuynBtn.png

│ ├── center-icon-dlmm.png

│ ├── center-icon-dz.png

│ ├── center-icon-jk.png

│ ├── center-icon-jyjl.png

│ ├── center-icon-order-all.png

│ ├── center-icon-order-dfh.png

│ ├── center-icon-order-dfk.png

│ ├── center-icon-order-dpj.png

│ ├── center-icon-order-dsh.png

│ ├── center-icon-out.png

│ ├── center-icon-sc.png

│ ├── center-icon-yhk.png

│ ├── center-top-bj.jpg

│ ├── comment-star.png

│ ├── eamil.png

│ ├── footer001.png

│ ├── footer002.png

│ ├── footer003.png

│ ├── footer004.png

│ ├── footer01.png

│ ├── footer02.png

│ ├── footer03.png

│ ├── footer04.png

│ ├── icon-back.png

│ ├── icon-collection.png

│ ├── icon-dele.png

│ ├── icon-edit.png

│ ├── icon-kefu.png

│ ├── icon-link1.png

│ ├── icon-link2.png

│ ├── icon-link3.png

│ ├── icon-link4.png

│ ├── icon-more.png

│ ├── icon_nav_article.png

│ ├── icon_nav_calendar.png

│ ├── icon_nav_city.png

│ ├── icon_nav_datetime.png

│ ├── icon_nav_noti.png

│ ├── location-border.png

│ ├── news-icon.png

│ ├── password.png

│ ├── pic_160.png

│ ├── pic_heart01.png

│ ├── pic_heart02.png

│ ├── ruzhuliucheng.jpg

│ ├── tophovertree.gif

│ ├── vcode.jpg

│ └── xuanze.png

├── index.html

├── js

│ ├── city-picker.js

│ ├── city-picker.min.js

│ ├── jquery.Spinner.js

│ ├── jquery-weui.js

│ ├── jquery-weui.min.js

│ ├── swiper.js

│ └── swiper.min.js

├── lib

│ ├── fastclick.js

│ ├── jquery-2.1.4.js

│ ├── weui.css

│ ├── weui.min.css

│ └── zepto.js

├── login.html

├── mine.html

├── myburse.html

├── news_info.html

├── news_list.html

├── order_info2.html

├── order_info.html

├── password.html

├── pro_info.html

├── pro_list.html

├── psd_chage.html

├── record.html

├── regist.html

├── Settled_in.html

├── shopcart.html

├── shoucang.html

├── upload

│ ├── ban1.jpg

│ ├── ban2.jpg

│ ├── ban3.jpg

│ ├── ban4.jpg

│ ├── headimg.jpg

│ ├── jingxuan1.jpg

│ ├── jingxuan2.jpg

│ ├── jingxuan3.jpg

│ ├── jingxuan4.jpg

│ ├── jingxuan5.jpg

│ ├── pro1.jpg

│ ├── pro2.jpg

│ ├── pro3.jpg

│ ├── pro4.jpg

│ ├── pro5.jpg

│ ├── xq1.jpg

│ ├── xq2.jpg

│ ├── xq3.jpg

│ ├── xq4.jpg

│ ├── xq5.jpg

│ ├── xq6.jpg

│ ├── xq7.jpg

│ ├── xq8.jpg

│ ├── xq9.jpg

│ ├── zhutu01.jpg

│ ├── zhutu02.jpg

│ ├── zhutu03.jpg

│ ├── zhutu04.jpg

│ └── zhutu05.jpg

└── xieyi.html

6 directories, 121 files

收起

jquery-weui微信商城全套页面模板

weui手机移动商城app模板源码

weui手机商城模板在线下载

weui-master:weui模板

微信WeUI常见页面模板

购物车模板

聊天室模板

基于weui手机鲜花商城app界面模板

兼容微信weui的手机移动端商城模板源码

基于weui整套移动端微信商城模板源码

基于weui开发综合生活购物商城手机模板

weui幼儿园教育微信网站模板

手机移动端登录login html5模板

weui微信商城全套页面模板.rar

weui开发整套移动端微商城模板源码.rar

jquery-weui-build:jquery-weui模板

weui微商城源码模板.zip

weui开发的手机商城模板

weui制作手机棋牌游戏房卡管理界面模板.zip

vue+weui 手机端项目

vue+weui 手机端项目

2.2 初始化项目结构

2.3 组件库

2.4 项目中使用weui组件库

2.5 登录功能

weui开发整套移动端微商城模板源码

jQuery WeUI组件微信公众号页面模板

微信商城基于weui开发整套模板源码.zip

手机wap网站模板打包含12个移动网站模板

weui开发整套移动端微商城模板

基于weui的移动商城html5模板

weui手机模板