OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

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

原作者: [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,
    })

  }

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