从实战学习微信小程序-电商首页前端(一)

      刚开始接触小程序就被分配了一个小程序的前端项目,我只能一边学习一边做,做起来发现也就那么回事,如果只看api不动手的话,那么多内容是记不住的,但不得不说微信小程序api封装了好多内容,简单好用,但微信小程序开发工具就各种出问题,不能控制台卡了就是不能复制粘贴了,我遇到这种事,只能重启软件或重启电脑,没办法,刚开始学习,很多不熟悉。

源码链接下载:https://download.csdn.net/download/qq_39404258/11141525 (积分是csdn默认设置的,我也没办法)

    那么话不多说,先上部分效果图:

   

    

    

 

 

先来分析首页:

代码:不一定所有内容都用到了,有的为了图方便,在网上拼的,命名可能不怎么规范

1.js路径:pages/home/home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swipers:[
      {
        id:0,
        imgUrl:'../img/swiper1.jpg'
      },
      {
        id: 1,
        imgUrl: '../img/swiper2.jpg'
      },
      {
        id: 2,
        imgUrl: '../img/swiper3.jpg'
      },
    ],
    indicatorDots:true,
    indicatorColor:"#000000",
    indicatorActiveColor:"#e91e56",
    autoplay:true,
    interval:3000,
    duration:500,
    circular:true,
    items:[
      {
        id:0,
        title:'红裙子',
        money:'¥200',
        imgUrl:'../img/shop1.jpg',
        sale:'¥199',
        evaluation:'23',
        sell: '33',
        abstract:'红裙子,物美价廉!'
      },
      {
        id: 1,
        title: '柠檬汁',
        money: '¥10',
        imgUrl: '../img/shop2.jpg',
        sale: '¥8',
        evaluation: '239',
        sell:'33334',
        abstract: '好喝的柠檬汁,还包邮哦亲'
      },
      {
        id: 2,
        title: '白衣服',
        money: '¥200',
        imgUrl: '../img/shop3.jpg',
        sale: '¥199',
        evaluation: '20',
        sell: '234',
        abstract: '这是一件白衣服,很普通的那种'
      },
      {
        id: 3,
        title: '抽纸',
        money: '¥27',
        imgUrl: '../img/shop4.jpg',
        sale: '¥19',
        evaluation: '2300',
        sell: '590',
        abstract: '买抽纸送抽盒了!买抽纸送抽盒了!买抽纸送抽盒了!买抽纸送抽盒了!买抽纸送抽盒了!'
      },
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  //监听页面滑动距离判断搜索栏的背景色
  onPageScroll: function (e) {
    this.setData({
      scrollTop: e.scrollTop
    })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;
    let arr =  [
      {
        id:0,
        title:'红裙子',
        money:'¥200',
        imgUrl:'../img/shop1.jpg',
        sale:'¥199',
        evaluation:'23',
        sell: '33',
        abstract:'红裙子,物美价廉!'
      },
      {
        id: 1,
        title: '柠檬汁',
        money: '¥10',
        imgUrl: '../img/shop2.jpg',
        sale: '¥8',
        evaluation: '239',
        sell:'33334',
        abstract: '好喝的柠檬汁,还包邮哦亲'
      },
      {
        id: 2,
        title: '白衣服',
        money: '¥200',
        imgUrl: '../img/shop3.jpg',
        sale: '¥199',
        evaluation: '20',
        sell: '234',
        abstract: '这是一件白衣服,很普通的那种'
      },
      {
        id: 3,
        title: '抽纸',
        money: '¥27',
        imgUrl: '../img/shop4.jpg',
        sale: '19',
        evaluation: '2300',
        sell: '590',
        abstract: '买抽纸送抽盒了!买抽纸送抽盒了!买抽纸送抽盒了!买抽纸送抽盒了!买抽纸送抽盒了!'
      },
    ];
    that.setData({
      items: that.data.items.concat(arr)
    })
    // console.log(that.data.items)
  },

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

  },
  /***
   * 点击进入详情页
   * ***/
  toDetail:function(e){
    console.log(e)
    wx.navigateTo({
      url: '../detail/detail',
    })
  },
  // 搜索栏input回调
  searchValue: function (res) {
    console.log(res.detail.value)
    this.setData({
      searchValue: res.detail.value
    })
  },
  // 搜索栏搜索图标
  search: function (res) {
    if (this.data.searchValue != null || this.data.searchValue !=''){
      var url = '../home/search/search';
    }
    else{
      var url = '../home/searchno/searchno';
    }
    wx.navigateTo({
      url: url,
    })

  }
 
})

解释几点基础知识:

1.图片路径    该页面和img同级,都在pages下面 ../img/shop1.png  (是两个点)

2.获取for循环的id
 var id = e.currentTarget.dataset.id; // 获得wxml的data-id的值 data-id与dataset.id对应
3.js中获得data数据 items = this.data.items;   //获得items数组  

items[id].id= xxx;

4.我们已经拿到参数,并且已经将变量更改,那么怎么赋值呢?

更新数据
let self = this;

 var id = e.currentTarget.dataset.id;

var items = this.data.items;

items[id].id= xxx;
self.setData({
      items : items     //第一个items指的data[]中的参数,第二个items指的是局部变量
    })

5. const全局变量修饰符,let局部变量修饰符(出来一个{}就失效了)var如js中的效果相同。

2.json路径:pages/home/home.js

{
  "usingComponents": {},
  "navigationBarTitleText": "良心商城",
  "enablePullDownRefresh": true
}

3.wxml路径:pages/home/home.wxml

<!--pages/home/home.wxml-->
<!-- 搜索栏 -->
<view class="searchView">
  <view class="search" style="background-color:{{scrollTop>=170 ? 'white' : ' rgba(255, 255, 255, 0)'}};padding-top:10rpx">
    <view class="search input" style="background-color:{{scrollTop>=170 ? '#E1E1E1' : ' rgba(255, 255, 255, 0.6)'}};">
      <input placeholder='请输入内容' bindinput="searchValue" bindconfirm="search" value='{{searchValue}}'></input>
      <view class="search click">
        <icon type="search" size='36rpx' catch:tap="search" style='margin-right:20rpx;'></icon>
      </view>
    </view>
    <!-- <view class="search click">
      <icon type="search" size='50rpx' catch:tap="search"></icon>
    </view> -->
  </view>
</view>
<view style='background:#EEE'>
 <!--滑块容器相关配置,以下为参数-->
  <swiper   
  indicator-dots="{{indicatorDots}}"
  indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  circular="{{circular}}"
>
 <!--滑块容器内只能有swiper-item组件,并且属性默认为item.属性名-->
  <block wx:for="{{swipers}}" >
    <swiper-item>
      <image src="{{item.imgUrl}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
<view class='home-content'>
<!--分类 -->
<view class="function">
    <navigator class="function item"  url='../kind/kind' open-type="switchTab" data-id="0">
      <image class="function item img" src="../img/shop1.jpg" ></image>
      <view class="function item label">裙子</view>
    </navigator>
    <navigator class="function item" url='../kind/kind' open-type="switchTab"  data-id="1">
      <image class="function item img" src="../img/shop2.jpg"></image>
      <text class="function item label">饮品</text>
    </navigator>
    <navigator class="function item" url='../kind/kind' open-type="switchTab"  data-id="2">
      <image class="function item img" src="../img/shop3.jpg"></image>
      <text class="function item label">服装</text>
    </navigator>
    <navigator class="function item" url='../kind/kind' open-type="switchTab"  data-id="3">
      <image class="function item img" src="../img/shop4.jpg"></image>
      <text class="function item label">纸巾</text>
    </navigator>
  </view>




  <view class='home-title'>
    <text style='font-weight:bold;color:#000;padding:10rpx'>推荐</text>
    <text style='font-size:16px;padding:10rpx'>更多</text>
  </view>
</view>
<view class='lists'>
 <!--bindtap绑定事件-->
  <view class='list' bindtap='toDetail' wx:for="{{items}}" wx:for-index="index" wx:for-item="item" data-obj='{{item}}'>
    <image class='list-left' src='{{item.imgUrl}}'></image>
    <view class='list-right'>
    <view class='column'>
      <view class='right-text'>{{item.title}}</view>
      <view class='sell'>销量:{{item.sell}}</view>
      </view>
     <view>
     <view class='column'>
      <view class='sale'>{{item.sale}}</view>
      <view class='money'>{{item.money}}</view>
     </view>
     <view class='evaluation'>{{item.evaluation}}人评价</view>
      <view class='abstract'>{{item.abstract}}</view>
     </view>
    </view>
  </view>
</view>
</view>

4.wxss路径:pages/home/home.wxss

/* pages/home/home.wxss */
.slide-image{
  width: 100%;
}

/* 搜索栏 */

.searchView {
  width: 100%;
  height: 80rpx;
  z-index: 1;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
}


.search {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search .input {
  display: flex;
  justify-content: center;
  width: 80%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50rpx;
}

.search .input input {
  width: 100%;
  height: 100%;
  font-size: 35rpx;
  /* text-align: center; *//* background-color: #e5dede; */
  padding: 0 50rpx;
  border-radius: 50rpx;
}

.search .click {
  width: 10%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* 四个功能区 */

.function {
  width: 100%;
  height: 190rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.function .item {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  flex-direction: column;
}

.function .item .img {
  width: 90rpx;
  height: 90rpx;
}

.function .item .label {
  width: 150rpx;
  height: 20rpx;
  font-size: 28rpx;
  color: rgb(90, 89, 89);
}

.home-content{
  box-sizing: border-box;
}
.home-title{
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  background: #FFF;
  box-sizing: border-box;
}
.home-title text{
  font-size: 20px;
  color: #808080;
}
.lists{
  box-sizing: border-box;
}
.list{
   padding: 30rpx 10rpx;
   background: #FFF;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
}
.column{
   background: #FFF;
   display: flex;
   flex-direction: row;
}
.list-left{
  width:28%;
  height:120px
}
.list-right{
  width:70%;
  height:100%;
  padding-left:36rpx;
  display: flex;
  flex-direction: column;
}
.right-text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-weight:bold;
  width: 100px;
}
.money{
  text-decoration:line-through;
  font-size:10px;
  padding-left:36rpx;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  color:#808080;
}
.sale{
  color:#e91e56;
  font-weight:bold;
  font-size:20px;
}
.sell{
  width:40%;
  margin-right: 0px;
  padding-right: 0px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 10px;
  color:#808080;
}
.evaluation{
  font-size: 10px;
  color:#808080;
}
.abstract{
   padding-top:30rpx;
  font-size: 10px;
  color:#808080;
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

解释几点:大部分用的弹性布局flex.

1.将文字靠右侧,垂直居中
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

2.两侧靠

display: flex;
justify-content: space-between;

分析一下,里面四块内容:轮播图,搜索框,主要内容区,底部选择区

1.底部选择区

底部选择区不需要在home文件夹里写,直接写在app.json下.

app.json下要注册home这个页面,先看一下app.json再逐个分析。

 

 

配置项

属性类型必填描述最低版本
pagesstring[]页面路径列表 
windowObject全局的默认窗口表现 
tabBarObject底部 tab 栏的表现 
networkTimeoutObject网络超时时间 
debugboolean是否开启 debug 模式,默认关闭 
functionalPagesboolean是否启用插件功能页,默认关闭2.1.0
subpackagesObject[]分包结构配置1.7.3
workersstringWorker 代码放置的目录1.9.90
requiredBackgroundModesstring[]需要在后台使用的能力,如「音乐播放」 
pluginsObject使用到的插件1.9.6
preloadRuleObject分包预下载规则2.3.0
resizablebooleaniPad 小程序是否支持屏幕旋转,默认关闭2.3.0
navigateToMiniProgramAppIdListstring[]需要跳转的小程序列表,详见wx.navigateToMiniProgram2.4.0
usingComponentsObject全局自定义组件配置开发者工具 1.02.1810190
permissionObject小程序接口权限相关设置微信客户端 7.0.0

 

代码:

{
  "pages": [
    "pages/home/home",    
    "pages/logs/logs"
   
    
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "法院报",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "borderStyle": "white",
    "selectedColor": "#e91e56",
    "color": "#808080",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "selectedIconPath": "pages/img/home_true.png",
        "iconPath": "pages/img/home_false.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "selectedIconPath": "pages/img/kind_true.png",
        "iconPath": "pages/img/kind_false.png"
      },
      {
        "pagePath": "pages/shopcat/shopcat",
        "text": "购物车",
        "selectedIconPath": "pages/img/shopcat_true.png",
        "iconPath": "pages/img/shopcat_false.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "selectedIconPath": "pages/img/person_true.png",
        "iconPath": "pages/img/person_false.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

page属性下注册首页的路径。

window属性下配置导航栏相关内容。

tabBar属性就和首页的内容有关了,我们配置了一个list数组,里面四个元素代表底部的四块内容,用来切换页面。

2.轮播图

swiper

基础库 1.0.0 开始支持,低版本需做兼容处理

滑块视图容器。其中只可放置<swiper-item>组件,否则会导致未定义的行为。

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
autoplaybooleanfalse是否自动切换1.0.0
currentnumber0当前所在滑块的 index1.0.0
intervalnumber5000自动切换时间间隔1.0.0
durationnumber500滑动动画时长1.0.0
circularbooleanfalse是否采用衔接滑动1.0.0
verticalbooleanfalse滑动方向是否为纵向1.0.0
previous-marginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0
next-marginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0
display-multiple-itemsnumber1同时显示的滑块数量1.9.0
skip-hidden-item-layoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息1.9.0
easing-functionstring"default"指定 swiper 切换缓动动画类型2.6.5
bindchangeeventhandle current 改变时会触发 change 事件,event.detail = {current, source}1.0.0
bindtransitioneventhandle swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle 动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

 

我们在js中有一个名为swipers的数组,里面的每个元素代表每个轮播图图片的信息。

在wxml中<swipers>中没加入样式,微信小程序已经把该有的轮播图样式给你分装好了,直接使用可以,只要wx:for="{{swipers}}"这个循环和js中的数组对应上,需要展示的参数对应上即可。以下代码从wxml中单独列了出来。

<!--滑块容器相关配置,以下为参数-->
  <swiper   
  indicator-dots="{{indicatorDots}}"
  indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  circular="{{circular}}"
>
 <!--滑块容器内只能有swiper-item组件,并且属性默认为item.属性名-->
  <block wx:for="{{swipers}}" >
    <swiper-item>
      <image src="{{item.imgUrl}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

 

3.搜索栏

bindinput属性为在你输入时,后台直接及时接收到当前输入框内的参数

bindconfirm 属性是点击小键盘上的搜索按钮就触发要执行的方法

bindtap 属性 事件绑定不会阻止冒泡事件向上冒泡

catchtap 属性 事件绑定可以阻止冒泡事件向上冒泡

<!-- 搜索栏 -->
<view class="searchView">
  <view class="search" style="background-color:{{scrollTop>=170 ? 'white' : ' rgba(255, 255, 255, 0)'}};padding-top:10rpx">
    <view class="search input" style="background-color:{{scrollTop>=170 ? '#E1E1E1' : ' rgba(255, 255, 255, 0.6)'}};">
      <input placeholder='请输入内容' bindinput="searchValue" bindconfirm="search" value='{{searchValue}}'></input>
      <view class="search click">
        <icon type="search" size='36rpx' catch:tap="search" style='margin-right:20rpx;'></icon>
      </view>
    </view>
    <!-- <view class="search click">
      <icon type="search" size='50rpx' catch:tap="search"></icon>
    </view> -->
  </view>
</view>

当我点击搜索 确认时,会触发catchtap事件,进入js中处理,wx.navigateTo为微信小程序封装好的,是进行页面跳转的。

 // 搜索栏搜索图标
  search: function (res) {
    console.log("搜索信息---" + this.data.searchValue)
    if (this.data.searchValue!=null){
      var url = '../home/search/search';
    }
    else{
      var url = '../home/searchno/searchno';
    }
    wx.navigateTo({
      url: url,
    })

  }

源码链接下载:https://download.csdn.net/download/qq_39404258/11141525 (积分是csdn默认设置的,我也没办法)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值