微信小程序商城15天从零实战视频课程-商城首页

最新推荐文章于 2022-01-11 13:52:34 发布

黄菊华老师

最新推荐文章于 2022-01-11 13:52:34 发布

阅读量1.5k

点赞数

分类专栏：微信小程序实战-商城文章标签：微信小程序商城15天从零实战视频课程-商城首页

本文链接：https://blog.csdn.net/u013818205/article/details/88684841

版权

微信小程序实战-商城专栏收录该内容

44 篇文章 29 订阅

订阅专栏

在这里插入图片描述
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

js代码

// pages/index/index.js
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //myid: app.globalData.openid
    img_ad02:"https://www.yaoyiwangluo.com/wx/ad02.png",
    ads: [
      '/img/ban1.jpg',
      '/img/ban2.jpg',
      '/img/ban3.jpg',
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1200,
    
    navs: [
      { icon: "/images/menu03.png", name: "留言反馈", typeId: 0, dizhi:"/pages/tmp/form/01-liuyan"},
      { icon: "/images/menu06.png", name: "活动列表", typeId: 1, dizhi: "/pages/tmp/liebiao/03-tubiaowenzi"},
      { icon: "/images/menu07.png", name: "帮助中心", typeId: 2, dizhi: "/pages/tmp/liebiao/02-tupianwenzi"},
      { icon: "/images/menu08.png", name: "关于我们", typeId: 3, dizhi: "/pages/tmp/liebiao/01-wenzi"}
          ],
    tongzhi01:
      {
        "id": 5,
        "biaoti": "本地数据-微信小程序上线通知",
        "shijian": "09/09 "
      },
    tongzhi02: {},
    cpzuixin01: [
      {
        "id": 4,
        "title": "产品名称04",
        "jiage": "155.00",
        "shuoming": "自然堂",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp04.jpg"
      },
      {
        "id": 5,
        "title": "产品名称05",
        "jiage": "199.00",
        "shuoming": "御泥坊",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp05.jpg"
      },
      {
        "id": 6,
        "title": "产品名称06",
        "jiage": "233.00",
        "shuoming": "妮维雅",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp06.jpg"
      }
    ],
    cps01:[],
    cpjingpin01: [
      {
        "id": 3,
        "title": "产品名称03",
        "jiage": "155.00",
        "shuoming": "自然堂",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp04.jpg"
      },
      {
        "id": 4,
        "title": "产品名称04",
        "jiage": "199.00",
        "shuoming": "御泥坊",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp05.jpg"
      }
    ],
    cpjingpin02:[],
    paihang01: [
      {
        "id": 2,
        "title": "销售排行产品名称02",
        "title2": "秋季补水套餐双11优惠",
        "jiage": "255.00",
        "shuoming": "自然堂",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp02.jpg"
      },
      {
        "id": 3,
        "title": "售排行产品名称03",
        "title2": "御泥坊面膜套餐-冬季套餐",
        "jiage": "299.00",
        "shuoming": "御泥坊面膜套餐",
        "img": "https://www.yaoyiwangluo.com/wx/img/cp03.jpg"
      }
    ],
    paihang02: []

  },
  navToCP: function (event) {
    let route = event.currentTarget.dataset.route
    //console.log(route);
    wx.navigateTo({
      url: route
    })
  },

  catchTapCategory: function (event) {
    let route = event.currentTarget.dataset.dizhi
    //console.log(route);
    wx.navigateTo({
      url: route
    })
  },
  fetchTongzhi02: function () {
    var that =this;
    wx.request({ //获取远程服务器端数据
      url: "https://www.yaoyiwangluo.com/wx/tongzhi02.html",
      //第三步：将获取的菜单内容，赋值给菜单数组navs
      success: function (res) // res为系统参数
      {
        // res.data为远程获取后系统返回的内容，也就是shop-menu.txt的内容
        that.setData({ tongzhi02: res.data }) //返回的内容，赋值给菜单数组navs
      }
    })
  },
  fetchCpjingpin02: function () {
    var that = this;
    wx.request({ //获取远程服务器端数据
      url: "https://www.yaoyiwangluo.com/wx/Cpjingpin02.html",
      //第三步：将获取的菜单内容，赋值给菜单数组navs
      success: function (res) // res为系统参数
      {
        // res.data为远程获取后系统返回的内容，也就是shop-menu.txt的内容
        that.setData({ cpjingpin02: res.data }) //返回的内容，赋值给菜单数组navs
      }
    })
  },
  fetchCpPaihang02: function () {
    var that = this;
    wx.request({ //获取远程服务器端数据
      url: "https://www.yaoyiwangluo.com/wx/cppaihang02.html",
      //第三步：将获取的菜单内容，赋值给菜单数组navs
      success: function (res) // res为系统参数
      {
        // res.data为远程获取后系统返回的内容，也就是shop-menu.txt的内容
        that.setData({ paihang02: res.data }) //返回的内容，赋值给菜单数组navs
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //var getAppInfo = app.globalData.openid;
    //console.log(getAppInfo);
    //app.globalData.openid="1111111111";
    var that = this
    //that.setData({ hidden: false })
    wx.request({
      url: 'http://www.yaoyiwangluo.com/wx/cp_zuixin03.HTML',
      success: function (res) {
        that.setData({
          cps01: res.data,
          //hidden: true
        })
      }
    })
    this.fetchTongzhi02();
    this.fetchCpjingpin02();
    this.fetchCpPaihang02();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

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

wxml代码

<view > 
  <image class='ad01' src='/img/ad01.png'></image>
  <image class='ad02' src='{{img_ad02}}'></image>
</view>


  <swiper  indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"  >
    <block wx:for="{{ads}}" wx:key="item.id">
      <swiper-item>
      <image src="{{item}}" class="slide-image"/>
      </swiper-item>
    </block>
  </swiper>
  

<!--菜单第一行-开始-->
<view class="navs">
  <view class="nav-item" >
     <navigator url="/pages/fenlei/list/01-dingbu">
     <image src='/images/menu01.png' class="nav-image"/><text >品牌大全</text>
     </navigator>
  </view>
  <view class="nav-item" >
     <navigator url="/pages/fenlei/list/01-dingbu">
     <image src='/images/menu02.png' class="nav-image"/><text >最新上架</text>
     </navigator>
  </view>  
  <view class="nav-item" >
     <navigator url="/pages/huiyuan/index"  open-type="switchTab">
     <image src='/images/menu05.png' class="nav-image"/><text >用户中心</text>
     </navigator>
  </view>  
  <view class="nav-item" >
     <navigator url="/pages/huiyuan/order/order_list2">
     <image src='/images/menu04.png' class="nav-image"/><text >订单列表</text>
     </navigator>
  </view>      
</view><!--菜单第一行-结束-->

<!--菜单第2行-开始-->
<view class="navs2">
      <block wx:for-items="{{navs}}" wx:key="name">
        <view class="nav2-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-dizhi="{{item.dizhi}}">
          <image src="{{item.icon}}" class="nav2-image"/>
          <text>{{item.name}}</text>
        </view>
      </block>
</view><!--菜单第2行-结束-->

<!--最新消息-开始-->
<navigator url='/pages/tmp/yemian/01-xiangxi?id={{888}}'>
  <view class="wx-cells">
      <view class="wx-cell">
        <image class="wx-cell-icon"src="/images/news.png"></image>
        <text class="wx-cell-text">08/08 本地界面-微信小程序上线通知</text>
        <image class="wx-cell-arrow" src="/images/right.png"></image>
      </view>
  </view>
</navigator>

<navigator url='/pages/tmp/yemian/01-xiangxi?id={{tongzhi01.id}}'>
  <view class="wx-cells">
      <view class="wx-cell">
        <image class="wx-cell-icon"src="/images/news.png"></image>
        <text class="wx-cell-text">{{tongzhi01.shijian}} {{tongzhi01.biaoti}}</text>
        <image class="wx-cell-arrow" src="/images/right.png"></image>
      </view>
  </view>
</navigator>

<navigator url='/pages/tmp/yemian/01-xiangxi?id={{tongzhi02.id}}'>
  <view class="wx-cells">
      <view class="wx-cell">
        <image class="wx-cell-icon"src="/images/news.png"></image>
        <text class="wx-cell-text">{{tongzhi02.shijian}} {{tongzhi02.biaoti}}</text>
        <image class="wx-cell-arrow" src="/images/right.png"></image>
      </view>
  </view>
</navigator>



<!--最新产品-区块标题-->
<view class='text'>
  <view class='line_y'></view>
  <text>最新产品</text>
</view>

<!--最新产品-1行3列图片-->
<view class="zuixins">

  <navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class="zuixin-item" >   
      <image src='/img/cp01.jpg' class="zuixin-image"/>
      <text>产品名称01</text>
      <text>¥：123.00</text>
  </view>  
  </navigator>

  <navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class="zuixin-item" >   
      <image src='/img/cp02.jpg' class="zuixin-image"/>
      <text>产品名称02</text>
      <text>¥：188.00</text>
  </view>  
  </navigator>

  <navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class="zuixin-item" >   
      <image src='/img/cp03.jpg' class="zuixin-image"/>
      <text>产品名称03</text>
      <text>¥：159.00</text>
  </view>  
  </navigator>     
 
</view>


<view class="zuixins">
  <block wx:for-items="{{cpzuixin01}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
      <view class="zuixin-item"   >
        <image src='{{item.img}}' class="zuixin-image"/>
        <text>{{item.title}}</text>
        <text >¥：{{item.jiage}}</text>
      </view>    
  </navigator>           
  </block>
</view>



<view class="zuixins">
  <block wx:for-items="{{cps01}}" wx:key="name" >
      <view class="zuixin-item zuixin-kuandu"   data-route='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}' bindtap='navToCP'>
        <image src='{{item.img}}' class="zuixin-image"/>
        <text>{{item.title}}</text>
        <text >¥：{{item.jiage}}</text>
      </view>    
  </block>
</view>


<!--精品推荐-区域标题-->
<view class='text'>
  <view class='line_y'></view>
  <text>精品推荐</text>
</view>
<!--精品推荐-1行2列图片-->
<view class="tuijians">
  <navigator url=''>
  <view class="tuijian-item" >
    <image src='/img/cp01.jpg' class="tuijian-image"/>
    <text>产品名称01</text>
    <text class='bg01'>¥：368</text>
  </view>  
  </navigator>
  <navigator url=''>
  <view class="tuijian-item" >
    <image src='/img/cp02.jpg' class="tuijian-image"/>
    <text>产品名称01</text>
    <text class='bg01'>¥：368</text>     
  </view>     
  </navigator>
</view>

<view class="tuijians">
  <block wx:for-items="{{cpjingpin01}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
  <view class="tuijian-item" >
    <image src='{{item.img}}' class="tuijian-image"/>
    <text>{{item.title}}</text>
    <text class='bg01'>¥：{{item.jiage}}</text>
  </view>  
  </navigator>
  </block>
</view>

<view class="tuijians">
  <block wx:for-items="{{cpjingpin02}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
  <view class="tuijian-item" >
    <image src='{{item.img}}' class="tuijian-image"/>
    <text>{{item.title}}</text>
    <text class='bg01'>¥：{{item.jiage}}</text>
  </view>  
  </navigator>
  </block>
</view>


<!--销售排行-1行2列-->
<view class='text'>
  <view class='line_y'></view>
  <text>销售排行</text>
</view>

<navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class='paihang'>
    <image class="paihang-img" src='/img/cp01.jpg' />
    <view class='two-line-text'>
      <text class='txt1'>销售排行产品名称01</text>
      <text class="txt2">150g加量装(洗面奶 护肤化妆品</text>
      <text class="txt2">¥：368</text>
    </view>
  </view>
</navigator>  

<block wx:for-items="{{paihang01}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
    <view class='paihang'>
      <image class="paihang-img" src='{{item.img}}' />
      <view class='two-line-text'>
        <text class='text-center txt1'>{{item.title}}</text>
        <text class="text-center txt2">{{item.title2}}</text>
        <text class="text-center txt2">¥：{{item.jiage}}</text>
      </view>
    </view>
  </navigator>    
</block>

<block wx:for-items="{{paihang02}}" wx:key="name" >
  <navigator url='/pages/fenlei/yemian/01-xiangxi?id={{item.id}}'>
    <view class='paihang'>
      <image class="paihang-img" src='{{item.img}}' />
      <view class='two-line-text'>
        <text class='text-center txt1'>{{item.title}}</text>
        <text class="text-center txt2">{{item.title2}}</text>
        <text class="text-center txt2">¥：{{item.jiage}}</text>
      </view>
    </view>
  </navigator>    
</block>

wxss代码

page{
  width: 100%;
}
.ad01{ 
  width: 100%; height: 30px; /*最顶部广告图片*/
}

.ad02{
  width: 100%; height: 80px;/*最顶部广告图片下面一张  section  index-nav */
}

.slide-image {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}


/*菜单样式：1行4列图片的布局*/
.navs {
  display: flex;
}
.nav-item {
  width: 24%;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.nav-item navigator{ 
  padding: 5px; 
  display: flex;
  flex-direction: column;
  align-items:  center;
  }
.nav-item .nav-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.nav-item text {
  padding-top: 20rpx;
  font-size: 25rpx;
}

.navs2 {
  display: flex;
}
.nav2-item {
  width: 24%;
  align-items: center;
  display: flex;
  flex-direction: column;
 
}
.nav2-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.nav2-item text {
  padding-top: 20rpx;
  font-size: 25rpx;
}


/*最新消息:1行3列：左图片，中文字，右图片（最新通告）*/
.wx-cells {
  width: 100%;
  margin-top: 15rpx;
  font-size: 34rpx;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  background-color: #fff;
}
.wx-cell {
  padding: 20rpx 25rpx;
  display: flex;
  align-items: center;
}
.wx-cell-icon{
  width: 56rpx;
  height: 56rpx;
}
.wx-cell-text{
  flex: 1;
  margin-left: 30rpx;
}
.wx-cell-arrow{
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
}

/*最新产品-区块标题*/
view.text
{
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 6px ; 
  background-color:  lightgoldenrodyellow;
}
.line_y{
  width: 3px;
  height: 18px;
  background-color:  darkcyan;  
}
view.text text{ 
  margin-left: 6px;
}

/*最新产品-1行3列图片*/
.zuixins {
  display: flex;
}
.zuixins navigator{
  width:33%;
}
.zuixin-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5rpx;
}
.zuixin-image {
  width: 220rpx;
  height: 220rpx;
}
.zuixin-item text {
  padding-top: 10rpx;
  font-size: 25rpx; text-align: left;
}
.zuixin-kuandu{ width: 100%; }


/*精品推荐-1行2列图片*/
.tuijians {
  display: flex;
   width: 100%;
}
.tuijians navigator{
  width:47%;
}
.tuijian-item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20rpx;
}
.tuijian-image {
  width: 330rpx;
  height: 330rpx;
}
.tuijian-item text {
  padding-top: 10rpx;
  font-size: 25rpx; text-align: left;
  width: 100%;
}
.bg01{ background:  #d9d9d9;}


/* 销售排行 1行2列：左图片，右文字（多行文字） */
.paihang{
    display: flex;
    margin: 1rpx;
    border-bottom:   #ddd solid 1px; 
    padding: 10rpx;
}
.paihang-img{
    width: 80px;
    height: 80px;
}
.two-line-text{
    padding: 3px;
    display: flex;
    flex-direction: column;
}
.txt1{
    margin: 3px 3px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; color:  #09bb07;
}
.txt2{
    margin: 3px 3px;
    font-size: 13px;
     color: #656565;
    white-space: nowrap;
}
.txt3{
    margin: 3px 3px;
    font-size: 13px;
    color: #656565;
    white-space: nowrap;
}

欢迎大家收看我的视频教程：微信小程序商城15天从零实战视频课程

在这里插入图片描述