首页 > 小程序教程 > 微信小程序水果电商首页设计制作开发教程

微信小程序水果电商首页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序水果电商首页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->
<scroll-view class="container" scroll-y="true" scroll-into-view="{{toView}}"  scroll-top="{{scrollTop}}" bindscroll="scroll">

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-box" id="top">
  <block wx:for-items="{{banner_list[0].banner}}" wx:key="index">
    <swiper-item >
      <image class="slide-image" src="{{item.pic_url}}"/>
    </swiper-item>
  </block>
</swiper>




 <view>
  <view class='menueview' >
   <block wx:for-items="{{banner_list[1].banner}}" wx:key="index">
     <view  class="menue-1">
        <view class="menueimg">
            <image src="{{item.pic_url}}" class="menue-image" />
        </view>
        <view class="menuetext">{{item.title}}</view>
    </view>
   </block>
  </view>
 </view>
<view class='hg-container' id="new" >
  <text class="hg-title">新品推荐</text>
        <view class='gooditem'>
            <view class='imgview' wx:key="index"  wx:for="{{newgoods}}" wx:for-index="idx" wx:for-item="good">
              <image class='productimg' src='{{good.hg_pic}}'/>
            </view>
        </view>
</view>

<view class='hg-container'>
  <text class="hg-title">超值买</text>
        <view class='gooditem'>
            <view class='imgview' wx:key="index"  wx:for="{{newgoods}}" wx:for-index="idx" wx:for-item="good">
              <image class='productimg' src='{{good.hg_pic}}'/>
            </view>
        </view>
</view>

<view class='hot-container'>
  <view class="hot-title">食惠购</view>
        <view class='hot-gooditem'>
            <view class='hot-imgview' wx:key="index"  wx:for="{{hotgoods}}" wx:for-index="idx" wx:for-item="hot">
              <image class='hot-product' src='{{hot.more_pic}}'/>
            </view>
        </view>
</view>

<view class="footer" bindtap="tap">
  <view>
  <text>沪ICP备888888888号</text>
  <text>htmlk.cn</text>
  <text>微信商城有限公司</text>
  <text>北京市xxxxxxxxx</text>
  </view>
</view>


</scroll-view>
 
二、wxss样式文件代码如下:
/**index.wxss**/
page{
    height: 100%;
}
/*导航*/
.swiper-box {
    height:375rpx;
}
.slide-image{
    display: block;
    height: 375rpx;
    width:100%
}

/*四个菜单*/
.menueview{
    display:flex;
    background-color:#FFF;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}
.menue-1{
    flex: 1;
}
.menueimg{
    height: 60px;
    width: 60px;
    text-align: center;
    margin: 0 auto
}
.menue-image{
    height:45px;
    width: 45px;
    margin: 0 auto
}
.menuetext{
    font-size: 12px;
    color: #aaa;
    text-align: center
}
/*hg-*/
.hg-container{
   height:360rpx;
   margin-top: 20px;
}
.gooditem{
    width: 100%;
    box-sizing: border-box;
    display: flex;
}
.hg-title{
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    color: #008842;
}
.imgview{
    flex: 1;
    border: 1px solid #eee;
}
.imgview image{
    width: 100%;
    height: 300rpx;
}

.hot-container{
    background: #eee;
}
.hot-title{
    padding: 10px;
    font-size: 16px;
    color: #f55030;
    background: #fff;
}
.hot-imgview{
    margin-top: 10px;
}
.hot-imgview image{
    width: 100%;
    height: 280rpx;
}
/*footer*/
.footer{
   text-align: center;
    height: 200rpx;
}
.footer view{
    width: 700rpx;
   
}
.footer text{
    display:flex;
    justify-content:center;
    align-items:center;
    color: #aaaaaa;
    font-size: 12px;
}
三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()

Page({
  data: {
    toView: "",
    motto: 'MiHome_Store',
    userInfo: {},
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 100,
    newgoods: [
      {
        "hg_pic": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
      }, {
        "hg_pic": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg"
      }, {
        "hg_pic": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
      }
    ],
    hotgoods: [],
    banner_list: [
      {
        "banner": [
          {
            "pic_url": "http://img09.yiguoimg.com/e/ad/2016/160825/585749448986042649_800x400.jpg",
          },
          {
            "pic_url": "http://img11.yiguoimg.com/e/ad/2016/160927/585749449690947899_800x400.jpg",
          },
          {
            "pic_url": "http://img14.yiguoimg.com/e/ad/2016/160923/585749449636290871_800x400.jpg",
          },
          {
            "pic_url": "http://img13.yiguoimg.com/e/ad/2016/160914/585749449480315182_800x400.jpg",
          },
          {
            "pic_url": "http://img14.yiguoimg.com/e/ad/2016/161010/585749449889390922_800x400.jpg",
          }
        ]
      },
      {
        "banner": []
      }
    ]
  },
  onPullDownRefresh: function () {
    console.log('onPullDownRefresh')
  },
  scroll: function (e) {
    if (this.data.toView == "top") {
      this.setData({
        toView: ""
      })
    }
  },

  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  tap: function () {
    this.setData({
      toView: "top"
    })
  },
  onLoad: function () {

    //调用应用实例的方法获取全局数据
    var that = this;
   

    //通过原生调取数据
    wx.request({
      url: 'https://wxapi.hotapp.cn/api/get',
      data: {
        appkey: 'hotapp25781921',
        key: 'hot1'
      },
      method: "GET",
      header: {
        "content-type": "application/json"
      },
      success: function (a) {
        console.log(a)
        return "function" == typeof b && b(a.data)
      },
      fail: function (err) {
        console.log(err)
        return "function" == typeof b && b(!1)
      }
    })
    //fecth调用
    var fekchobj = {
      R_GET: function (url, params) {
        if (params) {
          let paramsArray = []
          Object.keys(params).forEach(key => paramsArray.push(key + '=' + encodeURIComponent(params[key])))
          if (url.search(/?/) === -1) {
            url += '?' + paramsArray.join('&')

          } else {
            url += '&' + paramsArray.join('&')
          }
        }

        return new Promise(function (resolve, reject) {
          fetch(url)
            .then((response) => {
              if (response.ok) {
                return response.json()

              } else {
                reject('服务器繁忙,请稍后再试;rnCode:' + response.status)
              }
            })
            .then((response) => {
              if (response && response.status) {
                resolve(response)//response.status 是与服务器端的约定,非0就是错误
              } else {
                reject(response)//response也是与服务器端的约定
              }
            })
            .catch((err) => {
              reject(_parseErrorMsg(err))
            })
        })
      }
    }
    //监测错误
    try{
     
    }catch(e){
      console.log(e)
    }
   console.log(fekchobj)
    


  }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,646次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-19
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
企业网站 微信图片 微信公众平台 html5 响应式 自适应 微信模板 微信素材 微信文章 单页式简历模板
您可能会喜欢的其他模板