微信小程序商城篇（一）首页功能

一个小程序的首页，是整个小程序门面，及小程序的所有推荐小型功能。很重要

我的首页分为背景图，轮播图，搜索，平移轮播，特价跳转，食谱跳转和推荐的物品及其跳转功能。
emmmmm…唯一的不足就是没有用到盒子和布局。。。。，下次给你们补上吧，这次用这个会陆续发布整个商城的完成。对了，这些都是动态的数据交互之后的数据，照着改掉就好了，注释也都在代码里，我的图片也加载服务器了。

在这里插入图片描述
在这里插入图片描述
直接给你们代码看吧！！！

首先 wxlm代码

<wxs src="../../utils/constant.wxs" module="util" />
<scroll-view>
  <view class='img-img'>


    <!-- 顶部轮播图 -->
    
      <swiper class='all-img' indicator-dots='{{indiicatorDots}}' autoplay='{{autoplay}} ' interval='{{interval}}' duration='{{duration}}' indicator-color="#67ac0e" indicator-active-color="green" circular="{{circular}}" bindchange="indexChange">
        <view wx:for="{{imgUrl}}">
          <swiper-item>
            <image src='{{item}}' data-src='{{item}}' class='carousel-img'></image>
          </swiper-item>
        </view>
      </swiper>
      <block wx:if='{{current == 0}}'>
        <view class="img-class">
          <image class="index-img" src="/pages/img/back.png"></image>
        </view>
      </block>
      <block wx:elif='{{current == 1}}'>
        <view class="img-class">
          <image class="index-img" src="/pages/img/back2.png"></image>
        </view>
      </block>
      <block wx:elif='{{current == 2}}'>
        <view class="img-class">
          <image class="index-img" src="/pages/img/back.png"></image>
        </view>
      </block>
      <block wx:elif='{{current == 3}}'>
        <view class="img-class">
          <image class="index-img" src="/pages/img/back2.png"></image>
        </view>
      </block>
    

    <!-- 搜索 -->
    <view class='search-input'>
      <view class='search-img'>
        <image class='search' src='/pages/img/sousuo.png' mode='aspectFit'></image>
      </view>
      <view class='search-value'>
        <input class='sou-input' placeholder='店内搜索你想要的' bindtap='jumpSearchGood'></input>
      </view>
    </view>
  </view>

  <!-- 分类的图片和文字 -->
  <view class='img-all-text'>
    <view class='img-back' wx:for='{{classList}}'>
      <view class='classify-input1'>
        <image class='fruit' src='{{util.IMAGE_URL}}{{item.img}}' mode='aspectFit' bindtap='fruitClassify' data-id='{{item.id}}' data-title='{{item.title}}' data-img_biu='{{item.img_biu}}'></image>
        <!-- 字体分类 -->
        <view class='classify-text'>
          <text class='text-text'>{{item.title}}</text>
        </view>
      </view>
    </view>
  </view>


  <!-- 背景 -->
  <view class='demo-page'>

    
    <!-- <swiper class="swiper-block" previous-margin="180rpx" next-margin="180rpx" current="{{centerItem}}" bindchange="swiperChange" indicator-dots='true' indicator-color="#67ac0e" indicator-active-color="green">
      <block wx:for="{{imgInfoArr}}" wx:index="{{index}}">
        <swiper-item class="swiper-item" bindtap='jumpCoupon'>
          <image src="{{item.src}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" />
        </swiper-item>
      </block>
    </swiper> -->

    <!-- 限时特价 -->
    <view class='special-img' bindtap='jumpPromotion'>
      <image class='special' src='cloud://lzn.6c7a-lzn/xianshi.png' mode='aspectFill'></image>
    </view>
    <!-- 定制食谱 -->
    <!-- <view class='custom-img'>
      <image class='custom' src='cloud://lzn.6c7a-lzn/dingzhi.png' mode='aspectFit' bindtap='jumpCustom'></image>
    </view> -->
    <!-- 推荐展示物品 -->
    <view class='all-recommend'>
      <view class='dongtai' wx:for='{{goodsList}}'>
        <view class='recommend-img' bindtap='jumpDetail' data-id='{{item.id}}'>
          <image class='recommend' src='{{util.IMAGE_URL}}{{item.img}}'></image>
        </view>
        <!-- 推荐物品名字 -->
        <view class='freeze-text'>
          <view class='freeze'>
            <text>{{item.title}}</text>
          </view>

        </view>
        <!-- 推荐物品价格 -->
        <view class='car-price'>
          <view class='car-img'>
            <view class='price-text'>
              <text class='text-price1'>￥{{item.price1}}</text>
              <text class='text-price2'>{{item.price2}} /{{item.unit}}</text>
            </view>
            <view class='img-buy' bindtap='addCarts' data-id="{{item.id}}">
              <image class='buy' src='/pages/img/caradd.png' mode='aspectFit'></image>
            </view>
          </view>
        </view>

      </view>

    </view>


  </view>




</scroll-view>

wcss代码

.img-img {
  width: 100%;
  height: 100%;
}

.img-class{
  width: 100%;
  margin-top: -340rpx;
}

.index-img{
  width: 100%;
  height: 430rpx;
}

.all-img {
  margin-left: 5%;
  margin-right: 5%;
}


.carousel-img {
  width: 100%;
  height: 260rpx;
  margin-top: 26rpx;
  border-radius: 30rpx;
}

.search-input {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 20rpx;
  display: flex;
  border-radius: 60rpx;
  width: 80%;
  background-color: white;
  margin-top: -90rpx;
  align-items: center;
  height: 60rpx;
  line-height: 60rpx;
  position: absolute;
}

.search-img {
  width: 10%;
  display: inline-block;
  margin-left: 5%;
}

.search {
  width: 60rpx;
  height: 30rpx;
}

.search-value {
  width: 70%;
  display: inline-block;
}

.sou-input {
  font-size: 30rpx;
}

.demo-page {
  background-color: #f3f3f3;
}

.special-img {
}

.special {
  width: 100%;
  height: 200rpx;
}

.custom-img {
  border: 20rpx solid #f3f3f3;
}

.custom {
  width: 100%;
  height: 200rpx;
}

.all-recommend {
  border: 20rpx solid #f7f7f7;
  background-color: #f3f3f3;
  margin-top: -46rpx;
}

.recommend-img {
  margin-top: 40rpx;
}

.recommend {
  width: 210rpx;
  height: 210rpx;
}

.freeze-text {
  margin-left: 5%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.car-price {
  margin-left: 5%;
  margin-top: 30rpx;
}

.freeze {
  width: 100%;
  display: inline-block;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 20rpx;
}

.price-text {
  width: 55%;
  display: inline-block;
}

.text-price1 {
  display: inline-block;
  color: #ee7f9f;
  font-size: 24rpx;
}

.text-price2 {
  display: inline-block;
  color: #ee7f9f;
  font-size: 18rpx;
}

.input-price1 {
  display: inline-block;
  vertical-align: bottom;
  width: 20%;
  font-size: 18rpx;
  margin-left: -30rpx;
  margin-bottom: 4rpx;
}

.car-img {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy {
  width: 30px;
  height: 40rpx;
  margin-left: 30%;
}

.img-buy {
  display: inline-block;
  vertical-align: top;
  margin-top: 10rpx;
  width: 45%;
  text-align: right;
}

/* 轮播平移 */

swiper {
  display: block;
  height: 340rpx;
}

.optionBox {
  width: 80%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: 10%;
  margin-right: 10%;
}

.optionBox image {
  width: 100%;
  height: 100%;
}

.swiperText {
  width: 100%;
  height: 50rpx;
  font-family: bariol_bold;
  font-size: 30rpx;
  margin-top: 40rpx;
  text-indent: 20rpx;
}

.profile-text {
  width: 100%;
  height: 50rpx;
  font-size: 26rpx;
  color: #4a4a4a;
  margin-top: 10rpx;
  text-indent: 20rpx;
}

.mask {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 0;
  top: 0;
}

.perch {
  width: 100%;
  height: 100%;
}

.swiper-block {
  height: 220rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}

.slide-image {
  height: 320rpx;
  width: 320rpx;
  border-radius: 9rpx;
  box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
  margin: 20rpx 0rpx 75rpx 60rpx;
  z-index: 1;
}

.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

.dongtai {
  display: inline-block;
  width: 30%;
  margin-left: 3%;
}

.img-all-text {
  border: 20rpx solid #f3f3f3;
  border-radius: 0rpx;
}

.fruit {
  width: 100%;
  height: 130rpx;
}

.classify-text {
  margin-bottom: 20rpx;
}

.text-text {
  font-size: 26rpx;
}

.classify-input1 {
  margin-top: 20rpx;
}

.img-back {
  background-color: white;
  display: inline-block;
  width: 25%;
  text-align: center;
}

js代码

//index.js
//获取应用实例
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    goodsList: [],
    imgUrl: [
      "cloud://lzn.6c7a-lzn-1259608225/store.jpg",
      "cloud://lzn.6c7a-lzn-1259608225/shop.jpg",
      "/pages/img/indexSwiper.png",
      "cloud://lzn.6c7a-lzn-1259608225/lunbo.png"
    ],
    current: 0,
    indiicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    gods_id: '', //跳转进详情id
    // 平移
    imgInfoArrLength: '', // 轮播图列表的长度
    centerItem: '', // 居中项的位置
    imgInfoArr: [{
      src: '/pages/img/mycoupon.png',
      id: 1
    }, {
      src: '/pages/img/mycoupon.png',
      id: 2
    }, {
      src: '/pages/img/mycoupon.png',
      id: 3
    }, {
      src: '/pages/img/mycoupon.png',
      id: 4
    }, {
      src: '/pages/img/mycoupon.png',
      id: 5
    }, {
      src: '/pages/img/mycoupon.png',
      id: 6
    }, {
      src: '/pages/img/mycoupon.png',
      id: 7
    }],
  },

  swiperChange(e) {
    var that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },
  indexChange(e) {
    var that = this;
    that.setData({
      current: e.detail.current
    })
  },
  // 加入到购物车
  addCarts: function(e) {
    var that = this;
    var token = wx.getStorageSync('token')
    var id = e.currentTarget.dataset.id;
    var successStatus = wx.getStorageSync('successStatus')
    this.setData({
      successStatus: successStatus,
    })
    //console.log("kk", id)
    if (successStatus == '') {
      wx.showModal({
        title: '提示',
        content: '您暂未授权登录，如果需要加入购物车，请点击确定前往登录界面，否则取消则是继续浏览界面',
        success(res) {
          if (res.confirm) {
            wx.navigateTo({
              url: '/pages/login/login',
            })
          } else if (res.cancel) {

          }
        }
      })
    } else {
      wx.request({
        method: 'POST',
        url: app.URL + '/cart/add',
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
          userToken: token,
        },
        data: {
          product_id: id,
          number: 1, //默认的数量

        },
        success: function(res) {
          //console.log("出 : ", res)
          that.setData({})
        }
      })
      wx.showToast({
        title: '添加购物车成功',
      })
    }
  },
  // 定制
  jumpCustom: function(e) {
    wx.navigateTo({
      url: '/pages/index/custom/custom',
    })
  },
  // 详情
  jumpDetail: function(e) {
    var product_id = e.currentTarget.dataset.id;
    //console.log("kkk", id)
    wx.navigateTo({
      url: '/pages/classify/detail/detail?product_id=' + product_id,
    })
  },
  // 促销
  jumpPromotion: function(e) {
    wx.navigateTo({
      url: '/pages/index/promotion/promotion',
    })
  },
  // 水果列表
  fruitClassify: function(e) {
    var id = e.currentTarget.dataset.id;
    var title = e.currentTarget.dataset.title;
    var img_biu = e.currentTarget.dataset.img_biu;
    wx.navigateTo({
      url: '/pages/classify/fruitclass/fruitclass?id=' + id + '&title=' + title + '&img_biu=' + img_biu,
    })
  },
  // 取消订单详情
  jumpOrderCancel: function(e) {
    wx.navigateTo({
      url: '/pages/person/orderdetail/orderdetail',
    })
  },
  // 退款
  jumpApplication: function(e) {
    wx.navigateTo({
      url: '/pages/person/applicationrefund/applicationrefund',
    })
  },
  // 优惠
  jumpCoupon: function(e) {
    wx.navigateTo({
      url: '/pages/person/couponAll/couponAll',
    })
  },
  // 跳转到关键字搜索
  jumpSearchGood: function(e) {
    wx.navigateTo({
      url: '/pages/index/searchall/searchall',
    })
  },
  onLoad: function() {
    var that = this
    var token = wx.getStorageSync('token')
    console.log("kl", token)

    var len = this.data.imgInfoArr.length;
    var center = parseInt(len / 2);
    this.setData({
      imgInfoArrLength: len,
      centerItem: center
    })

    wx.request({
      method: 'POST',
      url: app.URL + '/product/lists',
      header: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
        userToken: token,
      },
      data: {
        cate_id: 0, //其他传的对应的id
        hot: 1,
        rows: 12,
      },
      success: function(res) {
        console.log("出 : ", res)
        that.setData({
          goodsList: res.data.data
        })

      }
    })
    //显示分类
    wx.request({
      method: 'POST',
      url: app.URL + '/product/cate',
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        userToken: token,
      },
      data: {
        pid: 0,
      },
      success: function(res) {
        console.log("出 : ", res)
        that.setData({
          classList: res.data.data
        })
      }
    })


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var that = this
    that.onLoad();
    wx.showModal({
      title: '公告',
      content: '生鲜类产品预订制，送达时间为第二天，菜品不满意，可当场拒收退款。如需当天配送，请电话联系13340716089，微信同号。配送范围：炳草岗至炳三区，营业时间8：00--22:00，地址：乐活天街金海世纪城39栋',
      showCancel: false,
      confirmText: '我知道了',
      success(res) {
        if (res.confirm) {

        }
      }
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  onPullDownRefresh: function() {
    var that = this
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //模拟加载
    setTimeout(function() {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
      that.onLoad();
    }, 1500);
  },
})
然后是上面的模板域名

var IMAGE_URL = ‘https://127.0.0.1:8080’;//你的请求域名
module.exports = {
IMAGE_URL: IMAGE_URL,

}


哦，对了，我在app.js里设置了一个全局变量地址，方便你改域名，放在APP括号下面就可以了。


URL:'https://127.0.0.1:8080';//你的请求域名


这就是首页代码了，有什么问题可以留言告诉我.
版权声明：本文为nan961136007原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。