小程序制作电商项目（首页制作）

我的小程序里引用了 weui 实现的一些功能。如果你没有用可能会不显示或者报错哦
这里我们先把react 项目告一段落。 写一个自己的小程序。
首先 应该打开微信开发者工具。
创建好自己的页面
在app.json 中写 tabBar 直接生成tabbar

{
  "pages": [
    "pages/home/home",
    "pages/mall/mall",
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/detail/details",
    "utils/ajax.js"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#d4237a",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "utils/icons/home.png",
        "selectedIconPath": "utils/icons/lhome.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/mall/mall",
        "iconPath": "utils/icons/mall.png",
        "selectedIconPath": "utils/icons/lmall.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "utils/icons/cart.png",
        "selectedIconPath": "utils/icons/lcart.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "utils/icons/mine.png",
        "selectedIconPath": "utils/icons/lmine.png",
        "text": "我的卷皮"
      }
    ]
  }
}

这时我们的tabbar 就已经生成了
主页的话可以通过swiper 来构建轮播图 可以查看官方的api 文档来实现
这里是wxml 的 代码

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

我们需要 在js 中写 data

data: {
    imgUrls: [
      'https://goods5.juancdn.com/jas/181203/9/f/5c04edebb6f8ea5e5f0fbb83_1080x418.jpg',
      'https://goods6.juancdn.com/jas/181203/b/5/5c04d14733b08943237571f8_1080x418.jpg',
      'https://goods1.juancdn.com/jas/181203/1/c/5c04cfd9b6f8ea6bda13e716_1080x418.jpg',
      'https://goods6.juancdn.com/jas/181203/b/5/5c04d14733b08943237571f8_1080x418.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
}

现在我们可以通过请求数据来实现数据渲染
home.wxml 页面通过请求数据来渲染数据并实现滚动加载

<!--pages/home/home.wxml-->
<!-- 这里是首页轮播图 -->
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key = "{{item}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>

<!-- 顶部链接 -->
<view class='top'>
  <image  class = "lbtn" src='https://goods4.juancdn.com/jas/181119/7/6/5bf2524bb6f8ea534d206f83_270x241.png?imageMogr2/quality/85!/format/png'></image>
  <image class = "lbtn" src='https://goods8.juancdn.com/jas/180530/f/e/5b0e68b4b6f8ea11b8424b37_270x241.png?imageMogr2/quality/85!/format/png'></image>
  <image class = "lbtn" src='https://goods2.juancdn.com/jas/180201/3/d/5a727415a9fcf8280d24465a_270x241.png?imageMogr2/quality/85!/format/png'></image>
  <image class = "lbtn" src='https://goods4.juancdn.com/jas/180917/6/5/5b9f175033b08945a870ad21_270x241.png?imageMogr2/quality/85!/format/png'></image>
</view>

<!-- 中部图片 -->
<view class='middle'>
  <view class='mleft'>
    <image class='mlbtn' src='https://s2.juancdn.com/jas/181203/7/a/5c0487bc33b08923ea7145c1_540x656.gif'></image>
  </view>
  <view class='mright'> 
  <view class='mtright'>
  <image class = 'mrbtn' src='https://goods6.juancdn.com/jas/181130/a/6/5c0108c0b6f8ea3dc119d1e8_540x328.png?imageMogr2/quality/85!/format/png'></image></view>
  <view class='mbright'>
  <image class = 'mrbtn' src='https://goods6.juancdn.com/jas/180831/a/4/5b889492b6f8ea1e2105263c_540x328.png?imageMogr2/quality/85!/format/png'></image></view>
  </view>
</view>

<!-- 选项卡 -->
<scroll-view class="page">
    <view class="page__bd">
        <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for="{{tabs}}" wx:key="*this">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick" >
                        <view class="weui-navbar__title" >{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">

                <scroll-view 
                scroll-y
                class="weui-tab__content" 
                hidden="{{activeIndex != 0}}"
                bindscrolltolower = "loadmore"
                bindscrolltoupper = "refresh"
                >
                <view wx:for = "{{list}}" wx:key = "{{item.id}}" data-id='{{item.goods_id}}' catchtap='todetail' class='wrapbox'>
                <image src='{{item.pic_url}}'></image>
                <view class='ttipe'>{{item.coupon_tips}}</view>
                <text class='ttitle'>{{item.title}}</text>
                </view>
                </scroll-view>


                <scroll-view 
                scroll-y
                bindscrolltolower = "loadmoregoods"
                bindscrolltoupper = "refreshgoods"
                class="weui-tab__content"
                hidden="{{activeIndex != 1}}">
                <view wx:for = "{{goodsList}}" wx:key = "{{item.id}}" class='wrapbox' data-id='{{item.goods_id}}' catchtap='todetail'>
                <image src='{{item.pic_url}}'></image>
                <view class='ttipe'>{{item.cprice}} <text class='over'>{{item.cprice *2}}</text></view>
                <text class='ttitle'>{{item.title}}</text>
                </view>
                </scroll-view >
                
            </view>
        </view>
    </view>
</scroll-view>

这里是 home.js

// pages/home/home.js
import ajax from '../../utils/ajax.js'
var sliderWidth = 96;
Page({
  pageSize: 20,
  currentPage: 1,
  refresh(){
    this.currentPage = 1;
    this.calcShowList(true);
  },
  loadmore(){
    this.calcShowList(false)
  },
 
  calcShowList(isRefresh) {
    if(this.currentPage >= 30){
      wx.showToast({
        title: '已经到头了哦亲',
        icon: 'warn',
        duration: 3000
      });
      return
    }
    if(isRefresh){
      this.currentPage = 1
    }else{
      this.currentPage += 1
    }
    console.log(this.currentPage)
    var _html = `https://webservice.juanpi.com/api/getGoods?page=${this.currentPage}&zy_ids=p8_c4_l4&app_name=zhe&catname=tab_hpzc&flag=tab_hpzc`
    
    ajax.get(_html)
      .then(res => {
        this.setData({
          list: this.data.list.concat(res.data.data.goods)
        })
      })
  },
  currentGoodsPage: 1,
  loadmoregoods() {
    this.twoShowList(false)
  },
  refreshgoods() {
    this.currentGoodsPage = 1;
    this.twoShowList(true);
  },
  twoShowList(isRefresh) {
    if (this.currentGoodsPage >= 30) {
      wx.showToast({
        title: '已经到头了哦亲',
        icon: 'warn',
        duration: 3000
      });
      return
    }
    if (isRefresh) {
      this.currentGoodsPage = 1
    } else {
      this.currentGoodsPage += 1
    }
    console.log(this.currentGoodsPage)
    var html = `https://webservice.juanpi.com/api/getGoods?page=${this.currentGoodsPage}&zy_ids=p8_c4_l4&app_name=zhe&catname=tab_hpdp&flag=tab_hpdp`

    ajax.get(html)
      .then(res => {
        this.setData({
          goodsList: this.data.goodsList.concat(res.data.data.goods)
        })
      })
  },
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://goods5.juancdn.com/jas/181203/9/f/5c04edebb6f8ea5e5f0fbb83_1080x418.jpg',
      'https://goods6.juancdn.com/jas/181203/b/5/5c04d14733b08943237571f8_1080x418.jpg',
      'https://goods1.juancdn.com/jas/181203/1/c/5c04cfd9b6f8ea6bda13e716_1080x418.jpg',
      'https://goods6.juancdn.com/jas/181203/b/5/5c04d14733b08943237571f8_1080x418.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    tabs: ["精选专场", "精选单品"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    list:[],
    goodsList:[]
    

  },
   // 需要设置slider的宽度，用于计算中间位置

  /**
   * 生命周期函数--监听页面加载
   */

  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  this.calcShowList(true)
   this.twoShowList(true)
  },
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

home.wxss

/* pages/home/home.wxss */
.slide-image{
  width: 750rpx;
  height: 290rpx;
}
.top{
  width: 750rpx;
  display: flex;
}
.top .lbtn{
  width: 187rpx;
  height: 167rpx;
}
.middle{
  display: flex;
}
.middle .mleft .mlbtn{
  width: 375rpx;
  height: 455rpx;
}
.middle .mright{
  display: flex;
  flex-direction: column;
}
.middle .mright .mrbtn{
  width: 375rpx;
  height: 227rpx;
}
.middle .mright .mbright{
  position: relative;
  top: -7rpx;
}

weui-navbar__title{
  width: 
}
.weui-tab__content{
  height: 1020rpx;
  width: 750rpx;
 

}
 .wrapbox {
  width: 373rpx;
  height: 487rpx;
  float: left;
  margin-right: 1px;
}
.wrapbox image{
  width: 373rpx;
  height: 373rpx;
}
.weui-tab__content .wrapbox .ttipe{
  color: #f20;
  height: 42rpx;
  font-size: 38rpx;
  line-height: 42rpx;
}
.weui-tab__content .wrapbox .ttitle{
  font-size: 30rpx;
  color: #3b3b3b;
}
.weui-tab__content .wrapbox .over{
  text-decoration: line-through;
  color: #666666;
  font-size: 30rpx;
}

还没有完善 点击效果