精华内容
下载资源
问答
  • 微信小程序常见模板源代码,包括源代码成功运行截图,不可多得的学习模板
  • 这是一个运行于微信环境的小程序,正好是模拟制作的微信主界面和功能,源代码目录很规范,编写微信相关的小程序,运用的知识技巧是很综合的,这涉及到音频处理、查找联系人、信息、日志、消息、新朋友发现、日志记事...
  • 微信小程序简单的用户页面模板

    千次阅读 2019-09-26 20:01:19
    wxml <view class='index-contier'> <view class="index-center"> <view class="logo"> <open-data type="userAvatarUrl" class="userinfo" id="userinfo1"><...
    5640239-b19a966da1dfbf46.png

    wxml

    <view class='index-contier'>
      <view class="index-center">
        <view class="logo">
          <open-data type="userAvatarUrl" class="userinfo" id="userinfo1"></open-data>
        </view>
        <view id="userinfo2">
          <open-data type="userNickName" class="userinfo"></open-data>
        </view>
      </view>
    </view>
    <view class='inform'>
      <view class="item-box">
        <view class="items">
          <view class="item">
            <view class="inner txt">
              <image class="item-icon" mode="widthFix" src="/img/manger.png"></image>
              <i> 工号</i>
              <span class="item-data">
                <i class="rankpace"> {{user.empNo}}</i>
              </span>
            </view>
          </view>
          <view class="item">
            <view class="inner txt">
              <image class="item-icon" mode="widthFix" src="/img/name.png"></image>
              <i> 姓名</i>
              <span class="item-data">
                <i class="rankpace">{{user.name}}</i>
              </span>
            </view>
          </view>
    
          <view class="item">
            <view class="inner txt">
              <image class="item-icon" mode="widthFix" src="/img/sex.png"></image>
              <i> 性别</i>
              <span class="item-data">
                <i wx:if="{{user.sex == '1'}}">男</i>
                <i wx:if="{{user.sex == '0'}}">女</i>
              </span>
            </view>
          </view>
    
          <view class="item">
            <view class="inner txt">
              <image class="item-icon" mode="widthFix" src="/img/phone.png"></image>
              <i> 手机</i>
              <span class="item-data">
                <i class="rankpace"> {{user.phone}}</i>
              </span>
            </view>
          </view>
        </view>
      </view>
    </view>
    

    js

    var app = getApp()
    Page({
      data: {
        user: {},
      },
      onShow: function (options) {
        console.log()
        var that = this;
        wx.request({
          url: app.globalData.root + "wx/" + app.globalData.openid + ".do",
          method: 'GET',
          header: {
            'Content-type': 'application/json'
          },
          success: function (res) {
            that.setData({ user: res.data });
          }
        });
      }
    })
    

    css

    .img {
      width: 60rpx;
      height: 60rpx;
      margin-top: 18rpx;
    }
    
    .index-contier {
      color: #fff;
      font-size: 12px;
      width: 100%;
      height: 570rpx;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url("图片路径");
    }
    
    .index-left {
      float: left;
      width: 30%;
      text-align: center;
      margin-top: 477rpx;
      color: #000;
    }
    
    .index-center {
      float: left;
      width: 40%;
      text-align: center;
      margin-top: 240rpx;
      color: #000;
    }
    
    .logo {
      margin: 0 auto;
      width: 80px;
      height: 80px;
      border-radius: 40px;
    }
    
    .index-right {
      float: left;
      width: 30%;
      text-align: center;
      margin-top: 477rpx;
      color: #000;
    }
    
    .index-right image {
      height: 100%;
      width: 100%;
    }
    
    .inform {
      padding: 0 6px;
      font-size: 30rpx;
    }
    
    #userinfo1 {
      width: 185rpx;
      height: 185rpx;
      /* margin:20rpx; */
      border-radius: 50%;
      display: flex;
      overflow: hidden;
      text-align: center;
    }
    
    #userinfo2 {
      font-family: "微软雅黑";
      font-size: 15px;
      margin-top: 75rpx;
      color:#ffffff;
    
    }
    
    /* pages/leftSwiperDel/index.wxss */
    
    view {
      box-sizing: border-box;
    }
    
    .item-box {
      width: 700rpx;
      margin: 0 auto;
    }
    
    .items {
      width: 100%;
    }
    
    .item {
      position: relative;
      border-top: 2rpx solid #eee;
      height: 110rpx;
      line-height: 120rpx;
      overflow: hidden;
    }
    
    .item:last-child {
      border-bottom: 2rpx solid #eee;
    }
    
    .inner {
      position: absolute;
      top: 0;
    }
    
    .inner.txt {
      background-color: #fff;
      width: 100%;
      z-index: 5;
      padding: 0 10rpx;
      transition: left 0.2s ease-in-out;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .inner.del {
      background-color: #e64340;
      width: 180rpx;
      text-align: center;
      z-index: 4;
      right: 0;
      color: #fff;
    }
    
    .item-icon {
      width: 60rpx;
      height: 60rpx;
      vertical-align: middle;
      margin-right: 16rpx;
      margin-left: 6px;
      border-radius: 50%;
    }
    
    .item-data {
      margin-left: 15%;
    }
    

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:473819131。

    展开全文
  • 微信小程序主页面排版

    万次阅读 多人点赞 2019-03-19 14:01:58
    开发小程序的话 首先要了解里面的每个文件的作用 小程序没有DOM对象,一切基于组件化 小程序的四个重要的文件 *.js *.wxml ---> view结构 ----> html *.wxss ---> view样式 -----> css *. json...

    开发小程序的话 首先要了解里面的每个文件的作用

    1. 小程序没有DOM对象,一切基于组件化
    2. 小程序的四个重要的文件
      1. *.js
      2. *.wxml ---> view结构 ----> html
      3. *.wxss ---> view样式 -----> css
      4. *. json ----> view 数据 -----> json文件
    3. 储备知识
      1. 理解事件机制
      2. 理解组件化
      3. 理解数据绑定
      4. Flex布局
      5. 移动端适配方案
    4. 贴心小建议

    学习vue后开发小程序的感觉会爽到飞起

    1 什么是flex布局?

    1) Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

    2) 任何一个容器都可以指定为Flex布局。

    3) display: ‘flex’

    2 flex属性

    1) flex-direction:

    row(默认值):主轴为水平方向,起点在左端。

    row-reverse:主轴为水平方向,起点在右端。

    column:主轴为垂直方向,起点在上沿。

    column-reverse:主轴为垂直方向,起点在下沿。

    3 小程序适配方案

    Iphon6 1rpx = 1物理像素 = 0.5px

    微信官方提供的换算方式:

    1. iPhone6的物理像素个数为标准: 750;
    2. 1rpx = 目标设备宽度 / 750 * px;
    3. 注意此时底层已经做了viewport适配的处理,即实现了理想视

     前面是简单介绍 然后就可创建一个小程序

    35424

    进去之后是一个白板 需要自己创建 里面的文件

    567

     大概需要的文件只有这么多 如果需要新建页面就可在pages下建文件夹

    首先需要画一个简单的页面就要一步一步来

    app.js里面写一个

    App({//注册小程序

    });

    表示是一个小程序

    然后在app.json里设置需要配置的页面以及相关样式

    {
      "pages":[
        "pages/index/index"
      ],
      "window":{
        "navigationBarBackgroundColor": "#8ED145",
        "navigationBarTitleText": "阿圆网络",
        "navigationBarTextStyle": "black"
      }
    }
    

    里面引用了一个页面index 我们就建立一个index文件夹 点击pages右键一个 创建的时候自动建了下面的小文件

    然后我们就来画一个界面

    首先是她的index.wxml里画一个基本模板  所有需要调整的组件都给一个class 然后在wxcc里需要引用

    <!--pages/index/index.wxml-->
    <!--wxml里面放文本内容 app.json配置全局文件 index或其他页面配置自己的页面-->
    <!--view容器-->
    <view class='indexContext'>
    <image class='avatar' src='/images/7.jpg'></image>
    <text class='userName'>hello 安好</text>
    <view class='text'>
    <text>开启小程序之旅</text>
    </view>
    </view>

    index.wxcc页面 对前面这个页面里的组件进行样式的调试

    /* pages/index/index.wxss */
    /*里面设置class那边的样式  */
    page{
      /*最外面有一层page设置整个高度 和背景  */
      height: 100%;
      background: #8ED145;
    }
    .indexContext{
      /*flex布局  */
    display: flex;
    /*纵向布局  */
    flex-direction: column;
    /*布局居中  */
    align-items: center;
    }
    .avatar{
      width: 200rpx;
      height: 200rpx;
      /*圆角图形取一半  */
      border-radius: 100rpx;
      margin: 100rpx;
    }
    .userName{
      margin: 100rpx;
      font-size: 40rpx;
      /*字体变粗  */
      font-weight: bold;
      color: bisque;
    }
    .text{
      /*设置这个class边框等 里面内容另外设置  */
      width: 250rpx;
      height: 80rpx;
      /*设置里面的字体  */
      font-size: 30rpx;
      /*实现边框长度颜色  */
      border: 1rpx solid brown;
      border-radius: 10rpx;
      /*字体居中  */
      text-align: center;
      line-height: 80rpx;
    }

    最后的效果如图 一个简单的页面就这样调整完成。

     

    474

     

    展开全文
  • 在线课程和代码 1、安装和演示课程 2、后台权限管理系统讲解和源代码 3、商城网站前后台开发讲解和源代码 4、小程序商城界面设计课程讲解和源代码 5、小程序开发课程讲解和源代码 6、小程序接口解说课程讲解和源代码
  • 微信小程序-主页面静态页面搭建

    千次阅读 2018-08-31 14:07:33
    AppID 在你的微信公众平台==&amp;amp;amp;gt;设置==&amp;amp;amp;gt;开发设置中可以找到 点击确定后项目就建好了: 可以看到里面一开始只有一个文件,下面还报了个错误… 所以我们可以根据错误来先创建...

    新建一个文件夹来放项目
    这里写图片描述
    AppID 在你的微信公众平台==>设置==>开发设置中可以找到

    这里写图片描述
    点击确定后项目就建好了:
    这里写图片描述
    可以看到里面一开始只有一个文件,下面还报了个错误…
    开始新建文件:
    这里写图片描述

    新建app.js:

    App({//注册小程序
    
    });

    再新建app.json:

    {
      "pages": [
        "pages/index/index"
    
      ],
      "window": {
        "navigationBarBackgroundColor": "#11EE3D",
        "navigationBarTitleText": "导航栏",
        "navigationBarTextStyle": "black"
      }
    }

    上面pages中的是页面路径,是你新建页面时自动生成进去的
    "navigationBarBackgroundColor"的取值只能使用十六进制的颜色,像red,yellow这样子写不生效
    window中的配置不懂去看文档去,在小程序开发==>框架==>全局配置==>app.json配置项列表中有

    新建pages文件夹(就是点击+号新建目录)
    再右键点击pages新建index文件夹(因为点击+号新建的都是在根目录下的,所以要右键点击)
    右键点击index文件夹,新建Page,输入index回车,就会自动生成index页面的配置并将页面路径写入到app.json文件的"pages"中,就不用一个一个手动创建了
    这里写图片描述
    这里写图片描述
    注意:一个文件夹管理一个页面
    index.wxml:

    <!--pages/index/index.wxml-->
    <view class='indexContainer'>
    <!-- 图片用image -->
      <image class='avatar' src='/images/index/cart.jpg'></image>
      <text class='userName'>hello 小程序</text>
      <view class='goStudy'>
        <text>开启小程序之旅</text>
      </view>
    
    </view>

    index.wxss:

    /* pages/index/index.wxss */
    page{
      height: 100%;
      background: rgb(223, 226, 44);
    }
    .indexContainer{
      display: flex;
      /* 主轴变为纵向 */
      flex-direction: column;
      align-items: center;
    
    }
    .avatar{
      width: 200rpx;
      height: 200rpx;
      border-radius: 100rpx;
      margin: 100rpx 0;
    
    }
    .userName{
      font-size: 32rpx;
      /* font-weight:400是正常的字体,往上是加粗,往下是变细 */
      font-weight: bold;
      margin: 100rpx 0;
    }
    .goStudy{
      width:220rpx;
      height: 80rpx;
      font-size: 28rpx;
      border: 1rpx solid #999;
      border-radius: 50rpx;
      text-align: center;
      line-height: 80rpx;
    }

    写完后结果如图:
    这里写图片描述
    补充一点:
    这里写图片描述

    展开全文
  • 微信小程序之侧栏菜单,微信UI界面设计范例。在一些微信商城小程序中,一般都会有分类页面,可以给用户快速找到相关的商品,设计开发成如下图所示的效果,原理是使用了左右两个盒子,左盒子使用标准流,右盒子使用...
  • 微信小程序点餐页面实现完整版

    千次阅读 多人点赞 2021-03-05 12:27:23
    微信小程序点餐页面实现完整版HTMLJSCSS总结 HTML <view class="page"> <view class="header-input" style="background:#efefef;height:40rpx;"> <!-- 搜索条 --> <view class="search-...

    微信小程序点餐页面实现完整版

    效果

    在这里插入图片描述

    HTML

    <!--pages/index/index.wxml-->
    <view class="page">
    	<view class="header-input" style="background:#efefef;height:100rpx;width:100%;position: fixed;top: 0px;z-index: 99999;">
    		<!-- 搜索条 -->
    		<view class="search-input" style="background-color: white;width: 90%;margin: 10px auto;border-radius: 20px;height:60rpx;" ><!-- bindtap="searchNav" -->
    			<icon size='15' type='search' style="margin: 15rpx 10rpx;float: left;"></icon>
    			<view style="padding-top:6rpx;float: left;width: 90%;font-size: 28rpx;">
                    <input bindblur="Search" placeholder="请输入菜名"/>
    			</view>
    		</view>
    	</view>
    	<view class="body">
    		<!-- 左侧滚动栏 -->
    		<view style='float: left' class='left'>
    			<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY'
    				style='height: {{winHeight}}px'>
    				<view class='all clear'>
    					<block wx:key="tabs" wx:for="{{tabs}}">
    						<view bindtap='jumpIndex' data-menuindex='{{index}}' data-ch_typeno='{{item.ch_typeno}}'>
    							<view class="text-style {{indexId==index?' activeView':''}}">
    								<text class="{{indexId==index?'active1':''}}">{{item.vch_typename}}</text>
    							</view>
    						</view>
    					</block>
    				</view>
    			</scroll-view>
    		</view>
    		<view class="right" style='height: {{winHeight}}rpx;width:calc(100% - 200rpx);'>
    			<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft"
    				scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'>
    				<block wx:key="tabs" wx:for="{{tabs}}" wx:for-item="itemft"> 
    					<view id="view-{{itemft.ch_typeno}}">
    						<view class="title" id="title-{{itemft.ch_typeno}}">{{itemft.vch_typename}}</view>
    						<view class="orders" wx:for="{{tabsList}}" wx:key="tabsList" wx:for-item="itemf">
    							<view wx:if="{{itemf.ch_typeno==itemft.ch_typeno}}" style="height:180rpx;border-bottom:1rpx solid #F0F0F0;width:96%;margin:20rpx auto;">
    								<image src="{{itemf.img}}" bindtap="toDetail" data-id="{{itemf.ch_dishno}}" data-ch_typeno="{{itemf.ch_typeno}}" style="width:160rpx;height:160rpx;float:left;"></image>
    								<view style="width:calc(100% - 180rpx);float:right;height:160rpx;">
    									<view
    										style="height:40rpx;line-height:40rpx;margin-top:5rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    										{{itemf.vch_dishname}}</view>
    									<view
    										style="height:40rpx;line-height:40rpx;margin-top:15rpx;font-size:24rpx;color:#c2c2c2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    										<text style="color:red;">会员价:{{itemf.num_m_price1}}¥</text></view>
    									<view style="height:40rpx;line-height:40rpx;margin-top:15rpx;">
    										<text
    											style="color:#c2c2c2;font-size:24rpx;">售价:{{itemf.num_price1}}¥</text>
    										<!-- 加号 -->
    										<image src="../images/add.png" data-id="{{itemf.ch_dishno}}" 
    											bindtap="addCart" style="float:right;height:50rpx;width:50rpx;margin-right: 10rpx;"></image>
    										<!-- 数量 -->
    										<text style="float:right;height:50rpx;padding:0rpx 10rpx;line-height: 50rpx;" class="value"
    											hidden="{{itemf.quantity<=0}}" data-id="{{itemf.ch_dishno}}"
    											data-num="{{itemf.quantity}}">{{itemf.quantity}}</text>
    										<!-- 减号 -->
    										<image src="../images/reduce.png" hidden="{{itemf.quantity<=0}}"
    											data-id="{{itemf.ch_dishno}}" bindtap="delCart" style="float:right;height:50rpx;width:50rpx;"></image>
    									</view>
    								</view>
    							</view>
    						</view>
    					</view>
    				</block>
    			</scroll-view>
    		</view>
    	</view>
    	<!-- 底部下单 -->
    	<view class="bottom_box">
    		<view class="shop_cartBox" bindtap="cascadeToggle">
                <text wx:if="{{totalNum!=0}}" style="float: right;width: 40rpx;height: 40rpx;border-radius: 50rpx;background-color:red;text-align: center;margin-right: -10rpx;margin-top: -10rpx;color: white;line-height: 40rpx;padding: 2rpx;">{{totalNum}}</text>
    			<image class="shopCart_img" src="../images/cart.png"></image>
    		</view>
    		<view class="all_money">总计:{{totalPrice}}元,{{totalNum}}件</view>
    		<view class="choose_ok color-block" bindtap="gotoOrder">提交</view>
    	</view>
    	<!--购物车弹窗  -->
    	<view hidden="{{maskFlag}}" class="modal-mask" bindtap="cascadeToggle"></view>
    	<view animation="{{animationData}}" class="cart_popup">
    		<view class="shopcart_title"><span class="shopcart_close" bindtap="cascadeToggle">返回</span>
            <span class="shopcart_deleteAll" bindtap="cleanList">清空</span></view>
    		<scroll-view scroll-y style="height:250px;margin-top:35px">
                <view wx:if="{{cartList.length===0}}" style="text-align: center;color: gray;margin-top: 40rpx;">~空空如也!~</view>
    			<block wx:for="{{cartList}}" wx:key="item">
    				<view class="cart_cells" wx:if="{{item.quantity > 0}}">
                        <image src="{{item.img}}" data-id="{{item.ch_dishno}}" style="width:80rpx;height:80rpx;float:left;margin: 10rpx 10rpx;"></image>
    					<view class="cells_name" style="font-size:28rpx;color:gray;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" data-index="{{index}}">{{item.vch_dishname}}</view>
    					<view class="cells_price" data-index="{{index}}">会员:{{item.num_m_price1}}¥<text style="color:gray;margin-left: 10rpx;">售价:{{item.num_price1}}¥</text></view>
    					<view class="price-box">
    						<!-- 减号 -->
    						<image src="../images/reduce.png" hidden="{{item.quantity<=0}}"
    							data-id="{{item.ch_dishno}}" bindtap="delCart" style="float:right;height:50rpx;width:50rpx;margin-top: 10rpx;"></image>
    						<!-- 数量 -->
    						<text style="float:right;height:50rpx;padding:0rpx 10rpx;margin-top: 10rpx;line-height: 50rpx;" class="value" hidden="{{item.quantity<=0}}"
    							data-id="{{item.ch_dishno}}" data-num="{{item.quantity}}">{{item.quantity}}</text>
    						<!-- 加号 -->
    						<image src="../images/add.png" data-id="{{item.ch_dishno}}" bindtap="addCart"
    							style="float:right;height:50rpx;width:50rpx;margin-top: 10rpx;"></image>
    					</view>
    					<icon class="shopcart_delete" type="clear" size="24" data-index="{{index}}" data-id="{{item.ch_dishno}}" bindtap="deleteOne" />
    				</view>
    			</block>
    		</scroll-view>
    	</view>
    </view>
    

    JS

    // var config = require('../../../utils/config.js');
    // var http = require('../../../utils/request.js');
    Page({
        data: {
            tabs: [{vch_typename: "推荐",ch_typeno: "a"},
                {vch_typename: "锡纸饭套餐",ch_typeno: "b"},
                {vch_typename: "锡纸烤饭",ch_typeno: "c"},
                {vch_typename: "精品冷碟",ch_typeno: "d"},
            ],
            tabsList: [{
                  quantity:0,num_price1: 10.1,num_m_price1: 9.90,img:"../images/cai.png", ch_typeno: "a", ch_dishno: 0, vch_dishname: "皇家烩四宝套餐"
                },
                {
                  quantity:0,num_price1: 10.4,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "b", ch_dishno: 3, vch_dishname: "皇家烩四宝套餐"
                },
                {
                  quantity:0,num_price1: 10.7, num_m_price1: 10.0,img:"../images/cai.png",ch_typeno: "c", ch_dishno: 6, vch_dishname: "皇家烩四宝套餐"
                },
                {
                  quantity:0,num_price1: 11.0,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 9, vch_dishname: "皇家烩四宝套餐"
                }, {
                  quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 10, vch_dishname: "皇家烩四宝套餐"
                }
                , {
                    quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 11, vch_dishname: "皇家烩四宝套餐"
                  }
                  , {
                    quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 12, vch_dishname: "皇家烩四宝套餐"
                  }
                  , {
                    quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 13, vch_dishname: "皇家烩四宝套餐"
                  }],
            indexId: 0,
            toTitle: "title-0",
            scrollTop: 0,
            top: [],
            totalPrice: 0, //选中商品总价格
            totalNum: 0, //选中商品数量
            cartList: [], //选中商品列表
            // 购物车动画
            animationData: {},
            animationMask: {},
            maskVisual: "hidden",
            maskFlag: true,
        },
        // 左侧点击事件
        jumpIndex(e) {
            let index = e.currentTarget.dataset.menuindex;
            let ch_typeno = e.currentTarget.dataset.ch_typeno;
            let that = this
            that.setData({
                indexId: index,
                toTitle: "title-" + ch_typeno
            });
        },
        scrollToLeft(res) {
            // console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top));
            this.setData({
                scrollTop: res.detail.scrollTop
            })
            var length = this.data.top.length;
            for (var i = 0; i < this.data.top.length; i++) {
                if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)) {
                    if (this.data.indexId != i) {
                        this.setData({
                            indexId: i,
                        });
                    }
                }
            }
        },
        onLoad: async function (options) {
            var that = this;
            wx.showLoading({
                mask: true,
                title: '加载中…',
            })
            //获取分类
            // await GetFoodType(that)
            //获取菜品
            // await GetFoodCook(that)
            wx.hideLoading()
            //设置高度,左右滚动
            wx.getSystemInfo({
              success: function (res) {
                that.setData({
                  winHeight: res.windowHeight - 100
                });
                var top2 = new Array();
                for (var i = 0; i < that.data.tabs.length; i++) {
                  wx.createSelectorQuery().select('#view-' + that.data.tabs[i].ch_typeno).boundingClientRect(function (rect) {
                    var isTop = Number(rect.top);
                    top2.push(isTop);
                    console.log("view-c:" + JSON.stringify(rect));
                  }).exec();
                }
                that.setData({
                  top: top2
                });
              }
            });
        },
        onShow: function (options) {
            var that = this;
            // 获取购物车缓存数据
            var arr = wx.getStorageSync('cart') || [];
            // 进入页面后判断购物车是否有数据,如果有,将菜单与购物车quantity数据统一
            if (arr.length > 0) {
                for (var i in arr) {
                    for (var j in that.data.tabsList) {
                        if (that.data.tabsList[j].ch_dishno == arr[i].ch_dishno) {
                            that.data.tabsList[j].quantity = arr[i].quantity;
                            break
                        } 
                        // else {
                        //     that.data.tabsList[j].quantity = 0;
                        // }
                    }
                }
            } else {
                for (var j in that.data.tabsList) {
                    that.data.tabsList[j].quantity = 0;
                }
            }
            // 进入页面计算购物车总价、总数
            var totalPrice = 0;
            var totalNum = 0;
            if (arr.length > 0) {
                for (var i in arr) {
                    totalPrice += arr[i].num_m_price1 * arr[i].quantity;
                    totalNum += Number(arr[i].quantity);
                }
            }
            //赋值数据
            this.setData({
                cartList: arr,
                tabsList: that.data.tabsList,
                totalPrice: totalPrice.toFixed(2),
                totalNum: totalNum
            })
        },
        // 购物车增加数量
        addCart: function (e) {
            var id = e.currentTarget.dataset.id;
            var arr = wx.getStorageSync('cart') || [];
            var f = false;
            for (var i in this.data.tabsList) { // 遍历菜单找到被点击的菜品,数量加1
                if (this.data.tabsList[i].ch_dishno == id) {
                    this.data.tabsList[i].quantity += 1;
                    if (arr.length > 0) {
                        for (var j in arr) { // 遍历购物车找到被点击的菜品,数量加1
                            if (arr[j].ch_dishno == id) {
                                arr[j].quantity += 1;
                                f = true;
                                try {
                                    wx.setStorageSync('cart', arr)
                                } catch (e) {
                                    console.log(e)
                                }
                                break;
                            }
                        }
                        if (!f) {
                            arr.push(this.data.tabsList[i]);
                        }
                    } else {
                        arr.push(this.data.tabsList[i]);
                    }
                    try {
                        wx.setStorageSync('cart', arr)
                    } catch (e) {
                        console.log(e)
                    }
                    break;
                }
            }
            this.setData({
                cartList: arr,
                tabsList: this.data.tabsList
            })
            this.getTotalPrice();
        },
        // 购物车减少数量
        delCart: function (e) {
            var id = e.currentTarget.dataset.id;
            var arr = wx.getStorageSync('cart') || [];
            for (var i in this.data.tabsList) {
                if (this.data.tabsList[i].ch_dishno == id) {
                    this.data.tabsList[i].quantity -= 1;
                    if (this.data.tabsList[i].quantity <= 0) {
                        this.data.tabsList[i].quantity = 0;
                    }
                    if (arr.length > 0) {
                        for (var j in arr) {
                            if (arr[j].ch_dishno == id) {
                                arr[j].quantity -= 1;
                                if (arr[j].quantity <= 0) {
                                    this.removeByValue(arr, id) 
                                }
                                if (arr.length <= 0) {
                                    this.setData({
                                        tabsList: this.data.tabsList,
                                        cartList: [],
                                        totalNum: 0,
                                        totalPrice: 0,
                                    })
                                    this.cascadeDismiss()
                                }
                                try {
                                    wx.setStorageSync('cart', arr)
                                } catch (e) {
                                    console.log(e)
                                }
                            }
                        }
                    }
                }
            }
            this.setData({
                cartList: arr,
                tabsList: this.data.tabsList
            })
            this.getTotalPrice();
        },
        // 定义根据id删除数组的方法
        removeByValue: function (array, val) {
            for (var i = 0; i < array.length; i++) {
                if (array[i].f_Cooks_Id == val) {
                    array.splice(i, 1);
                    break;
                }
            }
        },
        // 获取购物车总价、总数
        getTotalPrice: function () {
            var cartList = this.data.cartList; // 获取购物车列表
            var totalP = 0;
            var totalN = 0
            for (var i in cartList) { // 循环列表得到每个数据
                totalP += cartList[i].quantity * cartList[i].num_m_price1; // 所有价格加起来     
                totalN += cartList[i].quantity
            }
            this.setData({ // 最后赋值到data中渲染到页面
                cartList: cartList,
                totalNum: totalN,
                totalPrice: totalP.toFixed(2)
            });
        },
        // 清空购物车
        cleanList: function (e) {
            for (var t in this.data.tabs) {
                for (var j in this.data.tabsList) {
                    this.data.tabsList[j].quantity = 0;
                }
            }
            try {
                wx.setStorageSync('cart', "")
            } catch (e) {
                console.log(e)
            }
            this.setData({
                tabsList: this.data.tabsList,
                cartList: [],
                cartFlag: false,
                totalNum: 0,
                totalPrice: 0,
            })
            this.cascadeDismiss()
        },
        //删除购物车单项
        deleteOne: function (e) {
            var id = e.currentTarget.dataset.id;
            var index = e.currentTarget.dataset.index;
            var arr = wx.getStorageSync('cart')
            for (var i in this.data.tabsList) {
                if (this.data.tabsList[i].ch_dishno == id) {
                    this.data.tabsList[i].quantity = 0;
                }
            }
            arr.splice(index, 1);
            if (arr.length <= 0) {
                this.setData({
                    tabsList: this.data.tabsList,
                    cartList: [],
                    cartFlag: false,
                    totalNum: 0,
                    totalPrice: 0,
                })
                this.cascadeDismiss()
            }
            try {
                wx.setStorageSync('cart', arr)
            } catch (e) {
                console.log(e)
            }
            this.setData({
                cartList: arr,
                tabsList: this.data.tabsList
            })
            this.getTotalPrice()
        },
        //切换购物车开与关
        cascadeToggle: function () {
            var that = this;
            if (that.data.maskVisual == "hidden") {
                that.cascadePopup()
            } else {
                that.cascadeDismiss()
            }
        },
        // 打开购物车方法
        cascadePopup: function () {
            var that = this;
            // 购物车打开动画
            var animation = wx.createAnimation({
                duration: 200,
                timingFunction: 'ease-in-out',
                delay: 0
            });
            that.animation = animation;
            animation.translate(0, -285).step();
            that.setData({
                animationData: that.animation.export(),
            });
            // 遮罩渐变动画
            var animationMask = wx.createAnimation({
                duration: 200,
                timingFunction: 'linear',
            });
            that.animationMask = animationMask;
            animationMask.opacity(0.8).step();
            that.setData({
                animationMask: that.animationMask.export(),
                maskVisual: "show",
                maskFlag: false,
            });
        },
        // 关闭购物车方法
        cascadeDismiss: function () {
            var that = this
            // 购物车关闭动画
            that.animation.translate(0, 285).step();
            that.setData({
                animationData: that.animation.export()
            });
            // 遮罩渐变动画
            that.animationMask.opacity(0).step();
            that.setData({
                animationMask: that.animationMask.export(),
            });
            // 隐藏遮罩层
            that.setData({
                maskVisual: "hidden",
                maskFlag: true
            });
        },
        // 提交订单
        gotoOrder: function () {
            wx.navigateTo({
                url: '../confirmOrder/confirmOrder'
            })
        },
        //查看菜品详情
        toDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            var goodDetail = [];
            for (var i = 0; i < this.data.tabsList.length; i++) {
                if (this.data.tabsList[i].f_Cooks_Id == id) {
                    goodDetail.push(this.data.tabsList[i]);
                }
            }
            wx.navigateTo({
                url: '../../category/goodDetail/goodDetail?goodDetail=' + JSON.stringify(goodDetail),
            })
        },
        //搜索菜品
        Search:function(e){
            var searchkey=e.detail.value;
            console.log(searchkey);
        }
    })
    //获取商品信息
    function GetFoodCook(_this) {
        var that = _this
        return new Promise((resove, reject) => {
            //获取分类
            let data = {}
            let header = {}
            http.request(config.GetFoodCook_WXList, data, 'POST', header).then(function (res) {
                var e = res
                if (e.meta.Code == 200) {
                    that.setData({
                        tabsList: e.data.foodCookInfo == null ? [] : e.data.foodCookInfo
                    })
                    resove(true);
                } else {
                    wx.showToast({
                        title: res.Msg,
                        duration: 2000,
                        icon: "none",
                        mask: true
                    })
                    reject(false)
                }
            }).catch((res) => {
                wx.showToast({
                    title: res.Msg,
                    duration: 2000,
                    icon: "none",
                    mask: true
                })
                reject(false)
            })
        })
    }
    //获取商品类别
    function GetFoodType(_this) {
        var that = _this
        return new Promise((resove, reject) => {
            let data = {
                pagenum: 1,
                pagesize: 100
            }
            let header = {}
            http.request(config.GetFoodTypeList, data, 'POST', header).then(function (res) {
                var e = res
                if (e.meta.Code == 200) {
                    that.setData({
                        tabs: e.data.foodTypeInfo == null ? [] : e.data.foodTypeInfo
                    })
                    resove(true);
                } else {
                    wx.showToast({
                        title: res.Msg,
                        duration: 2000,
                        icon: "none",
                        mask: true
                    })
                    reject(false)
                }
            }).catch((res) => {
                wx.showToast({
                    title: res.Msg,
                    duration: 2000,
                    icon: "none",
                    mask: true
                })
                reject(false)
            })
        })
    }
    

    CSS

    /* pages/index/index.wxss */
    /* pages/catering.wxss */
    .page {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #F7F4F8;
        background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%);
        /* padding-top: 16px; */
      }
      
      .under_line {
        width: 100%;
        border-top: 1rpx solid #efefef;
      }
      
      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
      }
      
      .body {
        margin-top: 100rpx;
        display: flex;
        width: 100%;
      }
      
      .scrollY {
        width: 200rpx;
        /* position: fixed;
       left: 0;
       top: 0; */
        background: #F5F5F5;
        /* border-right: 1rpx solid #efefef; */
      }
      
      /* scrollRight{
       flex: 1;
      } */
      .right {
        flex: 1;
        /* height: 200rpx; */
        /* background: #00FF00; */
      }
      
      .left {
        border-top: 1rpx solid #efefef;
        border-right: 1rpx solid #efefef;
      }
      
      .text-style {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFangSC-Semibold;
        color: rgba(51, 51, 51, 1);
      }
      
      .active1 {
        color: #FB4C22;
        /* background: #FFF; */
      }
      
      .activeView {
        background: #FFF;
      }
      
      .active {
        display: block;
        width: 50rpx;
        height: 6rpx;
        background: #FB4C22;
        position: relative;
        left: 75rpx;
        bottom: 30rpx;
      }
      
      .title {
        margin-left: 32rpx;
        padding-top: 16rpx;
        font-size: 28rpx;
        /* padding-bottom: 16rpx; */
      }
      
      
      /*底部  */
      
      .bottom_box {
        width: 100%;
        height: 80rpx;
        position: fixed;
        left: 0;
        bottom: 0px;
        z-index: 100;
        background-color: #fff;
      }
      
      .shop_cartBox {
        width: 100rpx;
        height: 100rpx;
        background-color: #FB4C22;
        border-radius: 50%;
        position: absolute;
        top: -40rpx;
        left: 20rpx;
      }
      
      .shopCart_img {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        top: 24rpx;
        left: 24rpx;
      }
      
      .all_money {
        position: absolute;
        width: 50%;
        height: 80rpx;
        top: 0;
        left: 25%;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
      }
      
      .choose_ok {
        position: absolute;
        width: 25%;
        height: 80rpx;
        top: 0;
        right: 0;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        font-size: 40rpx;
      }
      
      .fontP {
        color: #FB4C22;
        font-size: 40rpx;
      }
      .color-block{
        color: #fff;
        font-size: 35rpx;
        background: #FB4C22;
      }
      
      /*弹窗遮罩层  */
      
      .modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity:0.6;
        background: #000;
         z-index: 666; 
      }
      
      /*购物车弹窗  */
      
      .cart_popup {
        width: 100%;
        height: 285px;
        background: #fff;
        position: fixed;
        z-index: 999;
        left: 0;
        bottom: -285px;
        overflow: auto;
      }
      
      .shopcart_title {
        width: 100%;
        height: 70rpx;
        line-height: 80rpx;
        text-align: center;
        position: fixed;
        left: 0;
        background-color: #FB4C22;
        color: #fff;
      }
      
      /*关闭按钮  */
      
      .shopcart_close {
        position: absolute;
        left: 30rpx;
        font-size: 28rpx;
      }
      
      /*清空购物车  */
      
      .shopcart_deleteAll {
        position: absolute;
        right: 30rpx;
        font-size: 28rpx;
      }
      
      .margin_r {
        margin-right: 30rpx;
      }
      
      /*购物车列表  */
      
      .cart_cells {
        width: 100%;
        height: 98rpx;
        position: relative;
        border-bottom: 1px #dedede solid;
      }
      
      .cells_name {
        width: 40%;
        height: 50%;
        position: absolute;
        top: 0;
        left: 80rpx;
        font-size: 14px;
        margin-left: 40rpx;
        padding-top: 10rpx;
      }
      
      .cells_price {
        width: 60%;
        height: 50%;
        position: absolute;
        top: 50rpx;
        left: 80rpx;
        margin-left: 40rpx;
        font-size: 14px;
        padding-bottom: 10rpx;
        color: #FB4C22;
      }
      
      .price-box {
        padding-right: 20rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 20%;
        position: absolute;
        left:62%;
        top: 20rpx;
      }
      
      /*删除购物车某项  */
      
      .shopcart_delete {
        position: absolute;
        right: 20rpx;
        top: 32rpx;
      }
      
      /*我的订单  */
      
      .my_menu {
        width: 100%;
        overflow: auto;
        padding-top: 140rpx;
        background: #fff;
      }
      
      .weui_titleBox {
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 30rpx;
        font-size: 32rpx;
        color: #000;
      }
      
      .weui_titleBox::after {
        border-bottom: none;
      }
      
      .weui_orderBox {
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 30rpx;
        vertical-align: sub;
        border-top: 1rpx solid #e5e5e5;
      }
      
      .weui_orderBox::before {
        border-top: none;
      }
      
      .bd_radius {
        border-radius: 50%;
      }
      
      .order_img {
        vertical-align: sub;
      }
      
      /*合计  */
      
      .order_sum {
        height: 100rpx;
        padding: 0 30rpx;
        line-height: 100rpx;
        color: #000;
        font-size: 32rpx;
        overflow: hidden;
        border-bottom: 1rpx solid #e5e5e5;
      }
      
      .order_sum::after {
        border-bottom: none;
      }
      
      .order_sumMoney {
        float: left;
      }
      
      .order_Money {
        color: #FB4C22;
      }
      
      .order_payd {
        color: #01bf05;
        float: right;
        vertical-align: sub;
      }
      
      .paydIcon {
        vertical-align: sub;
        font-size: 48rpx;
        margin-right: 40rpx;
      }
      
      /*价格,份数  */
      
      .order_price {
        font-size: 28rpx;
      }
      
      .fenxi {
        width: 100%;
        height: 10rpx;
        background: #ddd;
      }
      
    

    总结

    这是一个完整的点餐页面,下载修改接口即可使用。如果对你有帮助希望能给个关注,我会继续分享更多的内容!

    展开全文
  • 小程序大家都知道,其实小程序这个是个很低的门槛,只要你会搭建基本的网站,基本的代码修改无需编程就可以拥有一份属于的小程序,不仅仅是小程序还可以通过流量来收益,目前小程序开通流量的门槛是1000用户就...
  • 微信小程序推送模板消息

    千次阅读 2020-04-09 15:18:04
    订阅消息卡片跳转能力:点击查看详情可跳转至该小程序页面 使用说明 步骤一:获取模板 ID 在微信公众平台手动配置获取模板 ID: 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,...
  • 微信小程序模板信息【详】

    万次阅读 2019-02-25 13:48:35
    前段时间做毕设用到过,怕以后会忘记,特地...首先小程序发送模板信息需要以下几样参数 1.access_token 2.模板id 3.openid 4.formid 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framewo...
  • 这是一款装逼神器小程序源码 内包含了N种模板制作,另外并有大分类 另外小编还给添加了几个流量广告,包含了每一个页面都覆盖了 而且流量还不是单一种: Banner 激励视频 视频广告 多格子广告 横幅广告 不同...
  • 的用法1 跳转到新页面(2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面1 wx.navigateTo({2 url: 'pages/a/a'3 })(3)wx.switchTab方法跳转只适用于调转到设置了tabbar的页面1 wx.switchTab({2 url: '...
  • 微信开发者平台会默认提供一套模板来承载项目 文件夹 作用 ...用来存放一些静态资源(测试图片为) ...除了上面的文件夹,项目根目录下面还会有app...微信小程序做网页和PC端网页的区别 在做PC端网页的时候,常用...
  • 2、准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能;如: (此图片来源于网络,如有侵权,请联系删除! ) (此图片来源于网络,如有侵权,请联系删除! ) (此图片来源于...
  • 最近在微信小程序开发中使用到自定义组件Components   1 组件传递内容给页面 给组件设置compclick事件,通过this.triggerEvent('compclick', data) 触发该compclick事件并传递内容data,在页面用onCompClick...
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...
  • 微信小程序-页面间如何进行传递数据(通信)

    千次阅读 多人点赞 2020-11-11 08:11:39
    虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder)如果不知...
  • 页面结构是完全一样的,适合使用模板来完成页面搭建,就不用写那些重复的代码了,而且修改界面的时候,也只需要稍微改动模板 一、定义模板 1、新建一个template文件夹用来管理项目中所有的模板; 2、新建一个person....
  • (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,...再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 WXML(
  • 1、不带参数 首先在pages文件夹中新建... This is template.wxml文件,我是一个模板 然后我们书写我们所要调用template的页面index.wxml  This is index.wxml 注意: (1)index.wxml中template 标签的is属...
  • 微信小程序开发实战》课后题
  • 今天微信小程序页面编写过程中使用到了模板,但是在模板中使用wx:if,wx:else时发现并不好使,在代码不变化的情况下不管我的判断值为真还是为假,最终显示结果都一样,具体可看图: isAgree为true,然后在下图的...
  • 在商场项目中,一般都会有分类页面。 分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图 布局分析: 盒子> 左盒子>左盒子> 右盒子>右盒子> 盒子> 左盒子使用标准流 右盒子使用绝对定位(top...
  • 原生微信小程序

    千次阅读 2020-02-22 08:46:58
    微信小程序 https://mp.weixin.qq.com/ 小程序代码构成 JSON 配置 WXML 模版 WXSS 样式 JS 逻辑交互 JSON 配置 在小程序中,JSON扮演的静态配置的角色。 小程序配置 app.json { "pages": ["pages/index/index",...
  • 调用小程序音乐播放API BackgroundAudioManager BackgroundAudioManager实例,可以通过wx.getBackgroundAudioManager获取。 string str / string title 两个必须 js文件里注册一个播放事件 onMusic(){ const mgr = ...
  • 微信小程序的测试方法

    千次阅读 2021-09-12 17:56:17
    微信小程序的定义 依附于微信而无需再次下载安装的移动端应用程序 微信小程序的特点 无需下载,即用即走 功能丰富,清爽体验 流量大、易裂变 微信小程序的局限性 数量:每个应用最大支持页面层级为10层 大小:小程序...
  • 开发小程序的话 首先要了解里面的每个文件的作用小程序没有DOM对象,一切基于组件化小程序的四个重要的文件*.js*.wxml ---> view结构 ----> html*.wxss ---> view样式 -----> css*. json ----> view ...
  • 微信小程序】发送消息模板教程

    万次阅读 2017-07-07 10:26:43
    微信小程序】发送消息模板教程(后台以PHP示例)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,623
精华内容 2,649
关键字:

微信小程序主页面模板

微信小程序 订阅