刚开始接触小程序就被分配了一个小程序的前端项目，我只能一边学习一边做，做起来发现也就那么回事，如果只看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再逐个分析。

配置项

属性	类型	必填	描述	最低版本
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,})}

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

从实战学习微信小程序-电商首页前端（一）相关推荐

从实战学习微信小程序-电商星星评分功能（五）
现在,大多数电商系统都是通过五颗星星来进行商品评分的,所以我们要准备两种图片:实心星星和空心星星(如果你想要半星评价也可以加上一个半实星星,实现原理一样) 源码链接下载:https://downloa ...
微信小程序电商首页开发基本思路
小程序电商UI源码参考(开发至购物车)链接: https://pan.baidu.com/s/1gBFNVJigtWLCpn6ZJxQZfQ 密码: tge8 一.编写app.json文件编写页面 ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...
视频教程-微信小程序电商实战-PHP
微信小程序电商实战多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程序员学院AP ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...
微信小程序电商项目实战-前言
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...

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

配置项

swiper

从实战学习微信小程序-电商首页前端（一）相关推荐

最新文章

热门文章