微信小程序企业版生活购物内容首页设计制作开发教程

本文给大家带来的是微信小程序企业版生活购物内容首页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="page">
   <view class="er">
   <image class="faf" src="../../images/log.jpg"></image>
<view class="sousuo">
     <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <view class="weui-search-bar__box" bindtap="inpu">
                    <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容" value="{{inputValue}}" focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm="searchAction"  disabled="disabled"/>
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                        <icon type="clear" size="14"></icon>
                    </view>
                </view>
            </view>
        </view>
</view>
</view>

<!--分类-->
  <view class="df nav"  >
    <view wx:for="{{kbs}}" class="df_1" data-text="{{item.text}}" bindtap="dele">
        <image src="{{item.imgs}}"></image>     
        <text>{{item.text}}</text>  
    </view>  
  </view>

<view class="xian"></view>
<!--分类two-->
  <view class="df nav two" >
    <view class="df_1" bindtap="qiang">
     <view class="lie">超级推荐</view> 
      <view class="sss"> 百里挑一的超级翡翠</view>
        <image class="mm" src="/images/sp_slt02.png"></image>
    </view>
    <view class="df_1" bindtap="qiang">
     <view class="lie">清仓</view> 
      <view class="sss"> 百里挑一的超级翡翠</view>
        <image class="mm" src="/images/sp_slt03.png"></image>
    </view>
    <view class="df_1" bindtap="qiang">
     <view class="lie">店主推荐</view> 
      <view class="sss"> 百里挑一的超级翡翠</view>
        <image class="mm" src="/images/sp_slt04.png"></image>
    </view>
  </view>
  <!--我是一条分割线-->
<view class="xian"></view>

  <!--推荐内容开始-->
<view class="name">
   <i> 宁为玉碎不为瓦全 </i>
</view>
<!--横滑动--> 
 <view class="cont">
    <navigator class="pr" url="../detail/detail?productId={{item.ProID}}" hover-class="changestyle" wx:for="{{productData}}">
    <image src="../../images/viedo.png" class="vi"></image>
    <image class="cont_image" src="{{item.ImgUrl}}"></image>
      <view class="video" wx:if="{{item.IsVedioPath}}">
            <image src="/images/viedo.png"></image>
      </view>
      <view class="title">{{item.ProductName}} </view>
      <view class="gmxx df">
        <text class="jiage df_11">￥：{{item.Price}}</text> 
        <text class="jiage df_2" >原价￥{{item.Price}}</text> 
      </view>
            <view class="gmxx df">
           <span class="xiaoliang df_3">新上架</span>  
<span class="xiaoliang df_4">库存：{{item.UpsetPrice
}}</span> 
      </view>
    </navigator>
</view>
  <!--底部清除-->
  <view class="clear mt10">点击查看更多</view>
</view>

二、wxss样式文件代码如下：

/**index.wxss**/

.page {
  background: #ccc;
}

.nav {
  background: #fff;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  font-size: 12px;
  color: #666;
}

.two {
  height: 300rpx;
}

.two .mm {
  width: 160rpx;
  height: 160rpx;
}

.lie {
  height: 50rpx;
  font-size: 30rpx;
  font-weight: 700;
  color: #000;
}

.sss {
  height: 60rpx;
  font-size: 23rpx;
  color: #ccc;
}

.nav image {
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 5px;
  border-radius: 15px;
}

.cont {
  width: 100%;
  background: white;
}

.cont navigator {
  margin-bottom: 10px;
  background: #fff;
  display: inline-block;
  width: 46%;
  border: 1px solid #ccc;
  margin-left: 18rpx;
}

.cont_image {
  width: 100%;
  height: 400rpx;
}

.cont .title {
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 20px;
  margin: 0;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 1% 5% 0 5%;
  font-weight: 700;
}

.cont .tit {
  font-size: 12px;
  color: #333;
  line-height: 20px;
  margin: 0;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 1% 5% 0 5%;
}

.gmxx {
  padding: 1% 5% 5% 5%;
  width: 100%;
  display: flex;
}

.df_1 {
  font-size: 24rpx;
  border-right: 1px solid #e6e6ea;
  padding: 12rpx 0;
}

.df_11 {
  font-size: 32rpx;
  flex: 1.7;
  color: #d9002f;
}

.df_2 {
  padding-top: 9rpx;
  color: #ccc;
  text-decoration: line-through;
  font-size: 25rpx;
}

.df_3 {
  padding-top: 5rpx;
  font-size: 26rpx;
  flex: 0.8;
}

.df_4 {
  padding-top: 5rpx;
  font-size: 26rpx;
}

.gmxx .xiaoliang {
  font-size: 11px;
  color: #ccc;
  /*padding-top: 10px; */
}

.gmxx button {
  border-radius: 0;
  background: #dd2727;
  text-align: center;
  color: #fff;
  font-size: 14px;
  width: 30%;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  font-family: '5FAE8F6F96C59ED1', arial, "5b8b4f53";
}

.name {
  padding: 10px;
  text-align: center;
  font-weight: 700;
  background: #fff;
  font-size: 38rpx;
}

.list {
  background: #fff;
  width: 100%;
}

.ban {
  width: 46%;
  padding: 10rpx;
  border: 2rpx solid #ccc;
  display: inline-block;
  margin-left: 6rpx;
}

.ban image {
  width: 100%;
}

.ellipsis text {
  font-size: 30rpx;
  font-weight: 700;
  margin-left: 10rpx;
}

/*搜索*/

.faf {
  width: 10%;
  height: 69rpx;
  padding-left: 9rpx;
}

.sousuo {
  display: inline-block;
  width: 88%;
}

.weui-search-bar {
  margin-top: 10rpx;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
}

.weui-search-bar__box {
  position: relative;
  padding-left: 7px;
  /*padding-right:30px;*/
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
  display: block;
  height: 68rpx;
  line-height: 68rpx;
}

.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  flex: auto;
  background: #fff;
  border: 1rpx solid #e6e6ea;
}

.weui-search-bar__input {
  height: 68rpx;
  line-height: 68rpx;
  font-size: 28rpx;
  width: 84%;
  border-right: 1px solid #ccc;
}

.weui-icon-search_in-box {
  position: absolute;
  right: 30rpx;
  top: 19rpx;
}

icon {
  vertical-align: middle;
}

.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09bb07;
  white-space: nowrap;
}

.suo {
  width: 100%;
  height: 89rpx;
  margin-top: 20rpx;
}

/*品牌*/

.gengduo {
  float: right;
  font-size: 15px;
}

/*滑动*/

.sc {
  white-space: nowrap;
  height: 400rpx;
  background: #fff;
}

.miu {
  width: 30%;
  height: 100%;
  display: inline-block;
  margin: 20rpx;
  margin-right: 0px;
}

.ie {
  width: 100%;
  height: 240rpx;
}

.mi {
  display: block;
  height: 10%;
  text-align: center;
  font-weight: 700;
  padding: 10rpx 0;
  font-size: 30rpx;
}

.ma {
  font-size: 32rpx;
  display: block;
  text-align: center;
  /*padding: 10rpx 0;*/
}

.mt10 {
  margin: 0 auto;
  text-align: center;
  height: 70rpx;
  width: 450rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  border: 1px solid #999;
  font-size: 30rpx;
  margin-top: 30rpx;
}

.xian {
  width: 100%;
  height: 9rpx;
  background: #ccc;
}

.vi {
  width: 100rpx;
  height: 100rpx;
  float: right;
  position: relative;
  overflow: initial;
  display: block;
}

.cont_image {
  overflow: initial;
  display: block;
}

三、js页面代码如下：

var app = getApp();

//index.js
Page({
  data: {
    productData: [],
    page: 1,
    // 滑动
    imgUrl: [
       '../../images/im.jpg',
        '../../images/im.jpg',
         '../../images/im.jpg',
           '../../images/im.jpg',
             '../../images/im.jpg',
               '../../images/im.jpg',
    ],
        img: [
      {
        'pg':'../../images/ii.jpg',
        'ming':'KEISF雪忆式',

        'zhuan':'美容院'
      }  ,
            {
        'pg':'../../images/im.jpg',
        'ming':'mrs.wens',

        'zhuan':'美容院'
      }  ,
            {
        'pg':'../../images/io.jpg',
        'ming':'mrs.wens',

        'zhuan':'美容院'
      }  ,
            {
        'pg':'../../images/iu.jpg',
        'ming':'mrs.wens',
        'zhuan':'美容院'
      }  ,

    ],
  'kbs':[
  {
 'imgs' : '../../images/shop.png',
'text':'挂件',
   } ,
    {
      'imgs' : '../../images/xs.png',
     'text':'手腕'
   } ,
       {
      'imgs' : '../../images/xs.png',
     'text':'饰品'
   }  ,   {
      'imgs' : '../../images/xs.png',
     'text':'蛋面裸石'
   } , {
      'imgs' : '../../images/xs.png',
     'text':'杂项'
   },
   ],
   "shopList": [
            {
                "shopAddr":"飞马牌服饰",
                "shopName":"PUMA Kids银泰西湖店",
                "shopLogo":"../../images/sp_slt01.png",
                "type":1, //
               "yuan":"￥100",
               "lun":"99",
                //标识该门店类型 1-热门店 2-购买过 3-关注店 4-附近店
            },   
          {
                "shopAddr":"飞马牌服饰",
                "shopName":"PUMA Kids银泰西湖店",
                "shopLogo":"../../images/sp_slt01.png",
                "type":1, //
               "yuan":"￥100",
               "lun":"99",
                //标识该门店类型 1-热门店 2-购买过 3-关注店 4-附近店
            }, 
                      {
                "shopAddr":"飞马牌服饰",
                "shopName":"PUMA Kids银泰西湖店",
                "shopLogo":"../../images/sp_slt01.png",
                "type":1, //
               "yuan":"￥100",
               "lun":"99",
                //标识该门店类型 1-热门店 2-购买过 3-关注店 4-附近店
            },  
        ],
  },
  dele: function (e) {
  console.log(e.currentTarget.dataset.text)
  var title =e.currentTarget.dataset.text
  console.log("index" + title);
   wx.navigateTo({
    url: '../list/list?title='+title
  });
}, 
qiang:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../listdetail/listdetail?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
 dangtian:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../ritual/ritual?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
 inpu: function (e) {
   console.log(e.currentTarget.dataset.title)
   wx.navigateTo({
     url: '../search/search?title=' + e.currentTarget.dataset.title,
     success: function (res) {
       // success
     },
     fail: function () {
       // fail
     },
     complete: function () {
       // complete
     }
   })
 },
   jj:function(e){
    console.log(e.currentTarget.dataset.ming)
    wx.navigateTo({
      url: '../meirongyuan/mei?ming='+e.currentTarget.dataset.ming,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
   listdetail:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../listdetail/listdetail?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  category:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../panic/panic?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  },
//  商品连接数据 
  initProductData: function (data){
    for(var i=0; i<data.length; i++){
      console.log(data[i]);
      var item = data[i];
      item.Price = item.Price/100;
      // item.Price = 100;
      item.ImgUrl = app.d.hostImg + item.ImgUrl;
      
    }
  },
  onLoad: function (options) {
    var that = this;
    wx.request({
      url: app.d.hostUrl + '/ztb/productZBT/GetTJProductList',
      method:'post',
      data: {
        pageindex: that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res)
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initProductData(data);
        that.setData({
          productData:data,
        });
        //endInitData
      },
    })
    // 定位
      // var that = this;  
    /* 获取定位地理位置 */  
    // 新建bmap对象   
    var BMap = new bmap.BMapWX({   
        ak: that.data.ak,
    });   
        console.log(BMap)    
    var fail = function(data) {   
        console.log(data);  
    };   
    var success = function(data) {   
        //返回数据内，已经包含经纬度  
        console.log(data);  
        //使用wxMarkerData获取数据  
        //  = data.wxMarkerData;  
wxMarkerData=data.originalData.result.addressComponent.city
        //把所有数据放在初始化data内  
        console.log(wxMarkerData)
        that.setData({   
            // markers: wxMarkerData,
            // latitude: wxMarkerData[0].latitude,  
            // longitude: wxMarkerData[0].longitude,  
            address: wxMarkerData 
        });  
    }   
    // 发起regeocoding检索请求   
    BMap.regeocoding({   
        fail: fail,   
        success: success  
    });      

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '微信小程序联盟',
      desc: '最具人气的小程序开发联盟!',
      path: '/page/user?id=123'
    }
  },


});

模板简介：该模板名称为【微信小程序企业版生活购物内容首页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。