微信小程序笔记1（目录不知道为什么有内容....）

一、项目初始化

重置 app.js ，app.wxss 中的代码、删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹

重置 pages/index ⽂件夹下的 index.js 、index.wxss、 index.html 以及 index.json ⽂件

1.配置app.json

{

  "pages": [

    "pages/cart/cart",

    "pages/category/category",

    "pages/my/my",

    "pages/index/index",

    "pages/list/list",

    "pages/detail/detail",

    "pages/order/order"

  ],

  "window": {

    "navigationBarTextStyle": "white",

    "navigationBarTitleText": "幕尚花坊",

    "navigationBarBackgroundColor": "#f3514f"

  },

  "tabBar": {

    "color": "#252933",

    "selectedColor": "#FF734C",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath": "assets/tabbar/index.png",

        "selectedIconPath": "assets/tabbar/index-active.png"

      },

      {

        "pagePath": "pages/category/category",

        "text": "分类",

        "iconPath": "assets/tabbar/cate.png",

        "selectedIconPath": "assets/tabbar/cate-active.png"

      },

      {

        "pagePath": "pages/cart/cart",

        "text": "购物车",

        "iconPath": "assets/tabbar/cart.png",

        "selectedIconPath": "assets/tabbar/cart-active.png"

      },

      {

        "pagePath": "pages/my/my",

        "text": "我的",

        "iconPath": "assets/tabbar/my.png",

        "selectedIconPath": "assets/tabbar/my-active.png"

      }

    ]

  },

  "sitemapLocation": "sitemap.json",

  "l+azyCodeLoading": "requiredComponents",

  "usingComponents": {

    "van-submit-bar": "@vant/weapp/submit-bar/index",

    "van-checkbox": "@vant/weapp/checkbox/index",

    "van-checkbox-group": "@vant/weapp/checkbox-group/index",

    "van-empty": "@vant/weapp/empty/index",

    "van-button": "@vant/weapp/button/index",

    "van-swipe-cell": "@vant/weapp/swipe-cell/index",

    "van-stepper": "@vant/weapp/stepper/index"

  }

}

二、用户页面

2.1用户页面基础样式

<!--pages/info/info.wxml-->
<view class="container">
  <!-- 顶部展示图 -->
  <view class="top-show">
    <image mode="widthFix" class="top-show-img" src="/assets/images/banner.jpg"></image>
  </view>
 
  <view class="bottom-show">
    <!-- 未登录面板 -->
    <view wx:if="{{ !token }}" class="user-container section" bindtap="toLoginPage">
      <view class="avatar-container">
        <image src="/assets/images/avatar.png"></image>
        <view class="no-login">
          <text class="ellipsis">未登录</text>
          <text>点击授权登录</text>
        </view>
      </view>
    </view>
 
    <!-- 登录以后得面板 -->
    <view wx:else class="user-container section">
      <view class="avatar-container">
        <image src="{{ userInfo.headimgurl }}"></image>
        <view class="no-login">
          <text class="ellipsis">{{ userInfo.nickname }}</text>
        </view>
      </view>
      <view class="setting">
        <navigator url="/modules/settingModule/pages/settings/settings"> 设置 </navigator>
      </view>
    </view>
 
    <!-- 订单面板 -->
    <view class="order section">
      <view class="order-title-wrap">
        <text class="title">我的订单</text>
        <text class="more">查看更多></text>
      </view>
 
      <view class="order-content-wrap">
        <view class="order-content-item" wx:for="{{ initpanel }}" wx:key="index">
          <navigator url="{{ token ? item.url : '/pages/login/login' }}">
            <view class="iconfont {{ item.iconfont }}"></view>
            <text>{{ item.title }}</text>
          </navigator>
        </view>
      </view>
    </view>
 
    <!-- 关于售前售后服务面板 -->
    <view class="after-scale section">
      <view class="order-title-wrap">
        <text class="title">关于售前售后服务</text>
      </view>
      <view class="after-scale-item">
        <view class="iconfont icon-kefufenxiermaikefu"></view>
        <text>可与小程序客服实时聊天或电话咨询</text>
      </view>
      <view class="after-scale-item">
        <view class="iconfont icon-shijian"></view>
        <text>小程序客服工作时间为: 8:30 ~ 20:30</text>
      </view>
      <view class="after-scale-item">
        <view class="iconfont icon-dizhiguanli"></view>
        <text>鲜花制作完毕情况下暂不支持退款</text>
      </view>
      <view class="after-scale-item">
        <view class="iconfont icon-zhangben"></view>
        <text>鲜花可以提前7-15天预订重大节假日不支持定时配送</text>
      </view>
    </view>
 
    <!-- 底部面板 -->
    <view class="info-footer"> 尚硅谷技术支持 </view>
  </view>

2.2用户页面配置

// pages/info/info.js
 
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userstore'
 
ComponentWithStore({
  // 页面的初始数据
  data: {
    // 初始化第二个面板数据
    initpanel: [
      {
        url: '/modules/orderPayModule/pages/order/list/list',
        title: '商品订单',
        iconfont: 'icon-dingdan'
      },
      {
        url: '/modules/orderPayModule/pages/order/list/list',
        title: '礼品卡订单',
        iconfont: 'icon-lipinka'
      },
      {
        url: '/modules/orderPayModule/pages/order/list/list',
        title: '退款/售后',
        iconfont: 'icon-tuikuan'
      }
    ]
  },
 
  storeBindings: {
    store: userStore,
    fields: ['token', 'userInfo']
  },
 
  methods: {
    // 跳转到登录页面
    toLoginPage() {
      wx.navigateTo({
        url: '/pages/login/login'
      })
    }
  }

2.3用户页面渲染：

// 商品列表样式
.goods-wrap {
  padding: 16rpx 16rpx 100rpx 16rpx;
 
  .goods-item {
    .goods-swipe {
      width: 100%;
 
      .goods-info {
        display: flex;
        align-items: center;
        padding: 24rpx 16rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
        background-color: white;
        box-sizing: border-box;
        transition: transform 1s cubic-bezier(0.18, 0.89, 0.32, 1) !important;
 
        .left {
          /* width: 56px; */
          display: flex;
          align-items: center;
          justify-content: center;
        }
 
        .mid {
          width: 114px;
          height: 125px;
 
          .img {
            height: 100%;
          }
        }
 
        .right {
          height: 125px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10px;
 
          .title {
            flex: 1;
            flex-shrink: 0;
            font-size: 26rpx;
            color: #333;
            line-height: 44rpx;
            font-weight: 400;
            overflow: hidden;
            word-break: break-word;
          }
 
          .buy {
            display: flex;
            justify-content: space-between;
 
            .price {
              display: flex;
              color: #fa4126;
              font-size: 36rpx;
 
              .symbol {
                font-size: 10px;
                margin-right: 2px;
                margin-top: 8px;
              }
            }
          }
        }
      }
 
      .van-swipe-cell__right {
        background-color: #fa4126;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130rpx;
        color: #fff;
        font-size: 24rpx;
        height: 100%;
      }
    }
  }
}
 
// 提交订单栏样式
.submit-footer {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: white;
  padding: 12px 8px;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
 
  .right {
    display: flex;
    margin-right: 16px;
    align-items: center;
    justify-content: center;
  }
}

1.3 用户页面配置(my.js)
// pages/info/info.js
 
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userstore'
 
ComponentWithStore({
  // 页面的初始数据
  data: {
    // 初始化第二个面板数据
    initpanel: [
      {
        url: '/modules/orderPayModule/pages/order/list/list',
        title: '商品订单',
        iconfont: 'icon-dingdan'
      },
      {
        url: '/modules/orderPayModule/pages/order/list/list',
        title: '礼品卡订单',
        iconfont: 'icon-lipinka'
      },
      {
        url: '/modules/orderPayModule/pages/order/list/list',
        title: '退款/售后',
        iconfont: 'icon-tuikuan'
      }
    ]
  },
 
  storeBindings: {
    store: userStore,
    fields: ['token', 'userInfo']
  },
 
  methods: {
    // 跳转到登录页面
    toLoginPage() {
      wx.navigateTo({
        url: '/pages/login/login'
      })
    }
  }

2.4效果展示：

三、商品列表细节设置

商品列表细节页面样式

<view class="container goods-detail">
  <!-- 商品大图 -->
  <view class="banner-img">
    <image class="img" src="/assets/images/floor-img.jpg" />
  </view>
 
  <!-- 商品的基本信息 -->
  <view class="content">
    <view class="price">
      <view class="price-num">¥299</view>
      <view class="price-origin-num">¥399</view>
    </view>
    <view class="title">亲爱的/情人节网红款/19枝亲爱的/情人节网红款</view>
    <view class="desc">用最温暖的最有情的心意，用最温暖的最有情的心意</view>
  </view>
 
  <!-- 商品的详细信息 -->
  <view class="detail">
    <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" />
    <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" />
    <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" />
  </view>
 
  <!-- 商品的底部商品导航 -->
  <van-goods-action>
    <navigator url="/pages/index/index" open-type="switchTab">
      <van-goods-action-icon icon="wap-home-o" text="首页" />
    </navigator>
    <navigator url="/pages/cart/cart" open-type="switchTab">
      <van-goods-action-icon icon="cart-o" text="购物车" info="{{ allCount }}" />
    </navigator>
    <van-goods-action-icon
      open-type="contact"
      icon="chat-o"
      text="客服"
      bind:click="onClickIcon"
    />
    <van-goods-action-button text="加入购物车" type="warning" bindtap="handleAddcart" />
    <van-goods-action-button text="立即购买" bindtap="handeGotoBuy" />
  </van-goods-action>
 
  <!-- 加入购物车、立即购买弹框 -->
  <!-- show 控制弹框的隐藏和展示 -->
  <!-- bind:close 点击关闭弹框时触发的回调 -->
  <van-action-sheet show="{{ show }}" sh>
    <view class="sheet-wrapper">
      <view class="goods-item">
        <!-- 需要购买的商品图片 -->
        <view class="mid">
          <image class="img" src="/assets/images/floor-img.jpg" />
        </view>
 
        <!-- 商品基本信息 -->
        <view class="right">
          <!-- 商品名字 -->
          <view class="title"> 亲爱的/情人节网红款/19枝 </view>
          <!-- 商品价格 -->
          <view class="buy">
            <view class="price">
              <view class="symbol">¥</view>
              <view class="num">100</view>
            </view>
 
            <!-- 步进器组件控制购买数量 -->
            <view class="buy-btn">
              <!-- Stepper 步进器，由增加按钮、减少按钮和输入框组成，控制购买数量 -->
              <van-stepper value="{{ count }}" bind:change="onChangeGoodsCount" />
            </view>
          </view>
        </view>
      </view>
 
      <!-- 祝福语输入框 -->
      <view class="time-wraper">
        <view class="title">祝福语</view>
        <textarea
          model:value="{{ blessing }}"
          bindinput="onTextAreaChange"
          class="form-textarea"
          placeholder="必填，写上您的祝福语，给心爱的他（她）送上你的祝福（请勿填写特殊符号或表情符号）"
          name="textarea"
        />
      </view>
 
      <!-- 确定按钮 -->
      <view class="sheet-footer-btn">
        <van-button block type="primary" round> 确定 </van-button>
      </view>
    </view>
  </van-action-sheet>
</view

商品列表细节渲染：

/* pages/goods/detail/index.wxss */
 
.container {
  padding: 0rpx !important;
}
 
.goods-detail {
  margin-bottom: 100px;
}
 
// 商品大图
.banner-img {
  height: 800rpx;
 
  image {
    height: 100%;
  }
}
 
// 商品的基本信息
.content {
  margin: 0 16rpx;
  background: white;
  padding: 40rpx;
  position: relative;
  border-radius: 18rpx;
  top: -80px;
  height: 170rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
 
  .price {
    display: flex;
 
    .price-num {
      font-size: 18px;
      color: #fa4126;
      font-weight: bold;
    }
 
    .price-origin-num {
      font-size: 12px;
      color: #b4babf;
      margin-left: 4px;
      text-decoration: line-through;
      margin-top: 6px;
    }
  }
 
  .title {
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
 
  .desc {
    font-size: 12px;
    color: #999999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
 
// 详细图片
.detail {
  margin: -130rpx 16rpx 100rpx;
  background: white;
  padding: 20rpx 16rpx;
  border-radius: 16rpx;
}
 
// 加入购物车、立即购买弹框
.sheet-wrapper {
  padding: 16px;
 
  .sheet-footer-btn {
    padding: 16px;
  }
}
 
// 商品详情
.goods-item {
  display: flex;
  align-items: center;
  padding: 0 32rpx 40rpx 0;
 
  .left {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .mid {
    width: 114px;
    height: 125px;
 
    image {
      height: 100%;
    }
  }
 
  .right {
    height: 125px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
 
    .title {
      flex: 1;
      flex-shrink: 0;
      font-size: 28rpx;
      color: #333;
      line-height: 40rpx;
      font-weight: 400;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }
 
    .buy {
      display: flex;
      justify-content: space-between;
 
      .price {
        display: flex;
        /* align-items: flex-end; */
        color: #fa4126;
        font-size: 36rpx;
 
        .symbol {
          font-size: 10px;
          margin-right: 2px;
          margin-top: 8px;
        }
      }
    }
  }
}
 
// 祝福语
.time-wraper {
  margin-bottom: 12px;
 
  .title,
  .time {
    justify-content: space-between;
    font-size: 14px;
    color: #333333;
  }
 
  .form-textarea {
    border-radius: 12px;
    background-color: #f7f8fa;
    padding: 16px 12px;
    font-size: 13px;
    margin-top: 12px;
    width: 94%;
    height: 84px;
  }

商品列表页面配置 js文件

// pages/goods/detail/index.js
Page({
  // 页面的初始数据
  data: {
    goodsInfo: {}, // 商品详情
    show: false, // 控制加入购物车和立即购买弹框的显示
    count: 1, // 商品购买数量，默认是 1
    blessing: '' // 祝福语
  },
 
  // 加入购物车
  handleAddcart() {
    this.setData({
      show: true
    })
  },
 
  // 立即购买
  handeGotoBuy() {
    this.setData({
      show: true
    })
  },
 
  // 点击关闭弹框时触发的回调
  onClose() {
    this.setData({ show: false })
  },
 
  // 监听是否更改了购买数量
  onChangeGoodsCount(event) {
    console.log(event.detail)
  }
})

效果：

四、订单页面

订单页面基础样式

<!--pages/tist/tist.wxml-->
<view class="container" wx:if="{{ orderList.length }}">
  <view class="order-list" wx:for="{{orderList}}" wx:key="index">
    <view class="order-item">
      <view class="top">
        <view class="order-num">订单号<text class="num">679246470200</text></view>
        <view class="order-status">已支付</view>
      </view>
      <view class="middle">
        <view class="img">
          <image src="../../assets/images/floor-img.jpg" mode="widthFix" />
        </view>
        <view class="text">
          <view class="goods-name">不变的承诺</view>
          <view class="goods-blessing">不变的承诺</view>
        </view>
        <view class="number">
          <view class="goods-price">¥100</view>
          <view class="goods-count">x 1</view>
        </view>
        <view class="bottom">
          <view class="total-price">
            <view class="text">实付</view>
            <view class="price"><text>¥</text>666</view>
          </view>
        </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 购物车列表为空的情况 -->
  <van-empty description="还没有购买商品，快去购买吧~" wx:else>

订单页面渲染
/* pages/tist/tist.wxss */
.container {
  background-color: whitesmoke;
  height: 100vh;
 
  .order-list {
    .order-item {
      width: 90%;
      height: 380rpx;
      margin: 20rpx auto;
      padding: 20rpx;
      border-radius: 20rpx;
      background-color: white;
      position: relative;
 
      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: normal;
        color: #333333;
      }
 
      .middle {
        display: flex;
 
        .img {
          height: 200rpx;
          width: 250rpx;
 
          image {
            width: 100%;
          }
        }
 
        .text {
          margin: 0 220rpx 0 20rpx;
 
          .goods-name {
            font-size: 28rpx;
            color: #333;
            line-height: 40rpx;
            font-weight: 400;
          }
 
          .goods-blessing {
            font-size: 24rpx;
            height: 32rpx;
            line-height: 32rpx;
            color: #999999;
            margin: 8rpx 0;
          }
        }
 
        .number {
          .goods-price {
            white-space: nowrap;
            color: #fa4126;
            font-size: 24rpx;
            line-height: 48rpx;
          }
 
          .goods-count {
            white-space: nowrap;
            order: 4;
            text-align: right;
            font-size: 24rpx;
            color: #999;
            margin: 20rpx 0 0 auto;
          }
        }
      }
 
      .bottom {
        position: absolute;
        right: 50rpx;
        bottom: 50rpx;
        .total-price {
          display: flex;
 
          .text {
            font-size: 28rpx;
            color: #333333;
            margin-right: 10px;
          }
 
          .price {
            font-size: 32rpx;
            color: #fa4126;
            font-weight: bold;
          }
        }
      }
    }
  }
}

订单页面配置：

// pages/tist/tist.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    orderList:[1,2,3]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})

效果

五、封装请求快捷方式
1、GET

2、PUT

3、POST

4、DETELE

wx.request 知识点
在使用wx.request 发送网络请求时。
只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。
开发者根据业务逻辑对返回值进行判断。
什么时候会有 fail 回调函数 ？
⼀般只有网络出现异常、请求超时等时候，才会走fail 回调。
完善请求/响应拦截器示例