• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册

从实战学习微信小程序-电商首页（一）

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

    那么话不多说，先上效果图：

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

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:'￥2000',
        imgUrl:'../img/shop1.jpg',
        sale:'￥1999',
        evaluation:'23',
        sell: '333',
        abstract:'这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
      {
        id: 1,
        title: '人民司法案例',
        money: '￥2000',
        imgUrl: '../img/shop2.jpg',
        sale: '￥199',
        evaluation: '239',
        sell:'333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
      {
        id: 2,
        title: '人民司法公平',
        money: '￥2000',
        imgUrl: '../img/shop3.jpg',
        sale: '￥199',
        evaluation: '20',
        sell: '333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
      {
        id: 3,
        title: '人民司法公平',
        money: '￥2700',
        imgUrl: '../img/shop4.jpg',
        sale: '1929',
        evaluation: '23',
        sell: '333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
    ],
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;
    let arr = [
      {
        id: 0,
        title: '人民 司法公平',
        money: '￥2000',
        imgUrl: '../img/shop1.jpg',
        sale: '￥1999',
        evaluation: '23',
        sell: '333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
      {
        id: 1,
        title: '人民 司法案例',
        money: '￥2000',
        imgUrl: '../img/shop2.jpg',
        sale: '￥199',
        evaluation: '239',
        sell: '333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
      {
        id: 2,
        title: '人民 司法公平',
        money: '￥2000',
        imgUrl: '../img/shop3.jpg',
        sale: '￥199',
        evaluation: '20',
        sell: '333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
      {
        id: 3,
        title: '人民 司法公平',
        money: '￥2700',
        imgUrl: '../img/shop4.jpg',
        sale: '1929',
        evaluation: '23',
        sell: '333',
        abstract: '这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！这是一本描述人民司法公平的一本书,由xxx和XXX联合出品，敬请期待！'
      },
    ];
    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) {
    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,
    })

  }
})

解释几点基础知识：

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">
      <image class="function item img" src="../img/shop1.jpg" ></image>
      <view class="function item label">分类1</view>
    </navigator>
    <view class="function item">
      <image class="function item img" src="../img/shop2.jpg"></image>
      <text class="function item label">分类2</text>
    </view>
    <view class="function item">
      <image class="function item img" src="../img/shop3.jpg"></image>
      <text class="function item label">分类3</text>
    </view>
    <navigator class="function item">
      <image class="function item img" src="../img/shop4.jpg"></image>
      <text class="function item label">分类4</text>
    </navigator>
  </view>




  <view class='home-title'>
    <text style='font-weight:bold;color:#000'>推荐</text>
    <text>更多</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 {
  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;
}
.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再逐个分析。

配置项

属性 类型 必填 描述 最低版本
pages string[] 是 页面路径列表  
window Object 否 全局的默认窗口表现  
tabBar Object 否 底部 tab 栏的表现  
networkTimeout Object 否 网络超时时间  
debug boolean 否 是否开启 debug 模式，默认关闭  
functionalPages boolean 否 是否启用插件功能页，默认关闭 2.1.0
subpackages Object[] 否 分包结构配置 1.7.3
workers string 否 Worker 代码放置的目录 1.9.90
requiredBackgroundModes string[] 否 需要在后台使用的能力，如「音乐播放」  
plugins Object 否 使用到的插件 1.9.6
preloadRule Object 否 分包预下载规则 2.3.0
resizable boolean 否 iPad 小程序是否支持屏幕旋转，默认关闭 2.3.0
navigateToMiniProgramAppIdList string[] 否 需要跳转的小程序列表，详见wx.navigateToMiniProgram 2.4.0
usingComponents Object 否 全局自定义组件配置 开发者工具 1.02.1810190
permission Object 否 小程序接口权限相关设置 微信客户端 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-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
interval number 5000 否 自动切换时间间隔 1.0.0
duration number 500 否 滑动动画时长 1.0.0
circular boolean false 否 是否采用衔接滑动 1.0.0
vertical boolean false 否 滑动方向是否为纵向 1.0.0
previous-margin string "0px" 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0
next-margin string "0px" 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0
display-multiple-items number 1 否 同时显示的滑块数量 1.9.0
skip-hidden-item-layout boolean false 否 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 1.9.0
easing-function string "default" 否 指定 swiper 切换缓动动画类型 2.6.5
bindchange eventhandle   否 current 改变时会触发 change 事件，event.detail = {current, source} 1.0.0
bindtransition eventhandle   否 swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} 2.4.3
bindanimationfinish eventhandle   否 动画结束时会触发 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,
    })

  }

持续更新中，一边学习一边分享，有什么不足请指教。

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
小程序客服消息发布时间：2022-07-18
下一篇：
淘宝客5.44+代理2.68+京东客5.1教程-解密全开版-附带小程序模版-微赞模版 ...发布时间：2022-07-18
热门推荐
More+
    热门话题
    More+
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服（服务时间 9:00～18:00）

    在线QQ客服
    地址：深圳市南山区西丽大学城创智工业园
    电邮：jeky_zhao#qq.com
    移动电话：139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap