微信小程序电商实战-首页(上)
嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:

好了,不啰嗦了 我们先看首页长什么样吧!

为了能够更好的表达出来,首页准备分成两次写完。
第一部分先实现如下的功能

划分模块
大家都知道电商平台一般分为首页、商品分类、购物车和个人中心4个核心模块,那么我们先在app.json的page里添加如下代码
"pages":[
"pages/home/home",
"pages/classify/classify",
"pages/cart/cart",
"pages/personal/personal"
]
一、设置头部
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Hi.World",
"navigationBarTextStyle":"black"
}
背景颜色为白色,名称是Hi.World
二、首页搜索
上面素材看到的搜索部分颜值并不高,是因为录屏工具的问题,实际效果看下图。

搜索用到了template 模板技术,创建wxSearch 模板目录,添加wxSearch.js、wxSearch.json、wxSearch.wxml、wxSearch.wxss
此处省略模板代码,可以直接到Git上现在源码:地址https://github.com/yundianzixun/wxSearch-master
将下载的模板包放到和pages 同级目录,如下图所示:

接下来我们把搜索模板放到首页,会用到 home.wxml和home.wxss
home.wxml
<!--导入wxSearch.wxml-->
<import src="/wxSearch/wxSearch.wxml"/>
<!--search start-->
<view class="wxSearch-section">
<view class="wxSearch-pancel">
<input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder='面膜'/>
<view class="placeholder">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
</view>
<view class='wxSearch-button'>
<text>商品分类</text>
</view>
</view>
</view>
<!--引入模板,注意 is="wxSearch" 和模板template name名称相对应-->
<template is="wxSearch" data="{{wxSearchData}}"/>
home.wxss
<!--引入搜索模板样式-->
@import "/wxSearch/wxSearch.wxss";
好啦,保存运行一下看看效果吧!
三、制作导航栏
先看我们要实现的效果图

这个导航栏不是小程序底部导航栏,所以要写在页面里,在你需要导航栏的地方加入如下代码就可以实现,这里以首页为例:
home.wxss
/*设置页面整体布局*/
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
font-size:14px;
}
/* 顶部导航字体颜色 */
.navbar .item.active{
color: #e1007e;
}
/* 顶部指示条属性 */
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5rpx;
background: #e1007e;
width: 70%;
margin: 0px auto;
}
home.wxml
<!--导航栏-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
在home.wxml我们使用bindtap进行点击事件监听,设置事件名称为“navbarTap”并且在home.js里设置这个事件对应的逻辑处理。我们在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,想要了解wx:for可以参考该资料:https://www.w3cschool.cn/weixinapp/weixinapp-list.html(强烈建议如果还不会用wx:for一定要看看,因为在做数据循环渲染的时候经常要用)
home.js
<!--导航栏-->
// pages/home/home.js
var app = getApp()
Page({
data: {
navbar: ['今日推荐', '时尚', '国际', '美妆', '母婴', '居家'],
currentTab: 0,
},
// 导航切换监听
navbarTap: function (e) {
console.debug(e);
this.setData({
currentTab: e.currentTarget.dataset.idx
})
},
})
备注:navbar 放置的是导航栏数据集合,currentTab:0 是位置坐标 第一次页面加载默认为0(第一个位置),currentTab: e.currentTarget.dataset.idx是把当前用户点击的Tab坐标传给currentTab。
四、首页轮播Banner
先看效果图

依然在home 模块,需要改动的页面有home.js、home.wxml、home.wxss
home.wxml
<!-- banner start-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>
<!-- banner end-->
swiper 是微信提供的滑块视图容器,直接可以拿来用,记住 <swiper> 里面一定要包含 <swiper-item>,自定义的 view 是无效的,控件的常用属性,
- indicator-dots 是否显示面板指示点
- autoplay 是否自动切换
- interval 自动切换时间间隔
- duration 滑动动画时长
想要了解多请查看微信官方swiper视图容器
关于wx:for 上面已经介绍过了,不啰嗦了~~~
home.wxss
/* 设置swiper属性 */
swiper {
height: 300rpx;
padding: 2px 10px;
}
/*设置图片属性*/
swiper-item image {
width: 100%;
height: 100%;
}
home.js
indicatorDots: true, //设置是否显示面板指示点
autoplay: true, //设置是否自动切换
interval: 3000, //设置自动切换时间间隔,3s
duration: 1000, // 设置滑动动画时长1s
imgUrls: [
'https://a4.vimage1.com/upload/flow/2017/10/20/117/15084947982974.jpg',
'https://a2.vimage1.com/upload/flow/2017/11/07/73/15100619325212.jpg',
'https://b.vimage1.com/upload/mst/2017/11/04/139/23b96f0e89abed2d9415e848fc3715ff_604x290_80.jpg'
]
具体swiper 属性设置看注释~~~
总结
我们的微信小程序电商实战-首页(上) 的内容已经讲完了,我们回顾一下 一共实现了3个功能,分别是:首页搜索、导航栏和轮播。如果有什么问题可以随时在下方留言哦,如果对大家有帮组请帮忙分享转发一下吧 ~~~
下期预告
下期会来完成小程序电商实战-首页的实时热销榜、福利专场和个人中心+购物车的浮动布局,上效果图:

作者:IT实战联盟Lin
链接:https://www.jianshu.com/p/f490c62643d3
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
微信小程序电商实战-首页(上)的更多相关文章
- 微信小程序电商实战-首页(下)
好了,上一期我们把首页搜索.导航栏和广告轮播给做完了,那么接下来会继续完成我们首页的剩余部分,先看我们要实现的效果吧! 本期实现效果图.gif 本期我们要实现首页的实时热销榜.福利专场和左下方个人 ...
- 微信小程序电商实战(-)商城首页
首先在app.json中配置页面和底部tabbar { "pages":[ "pages/index/index", "pages/kind/kind ...
- 微信小程序电商实战-商品详情(上)
先看一下今天要实现的小程序商品详情页吧! 商品详情.gif 本期我们要实现小程序商品详情页的头部标题.头部轮播.商品详情浮动按钮和商品内页布局. 一.设置头部标题 如上图所示,头部标题是商品详情 ...
- 微信小程序电商实战-入门篇
小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.h ...
- 微信小程序电商实战-商品列表流式布局
今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- 《微信小程序商城开发实战》唐磊,全网真实评价截图,不吹不黑,全部来自网友的真实评价
偶尔看了下网友的销量和评价,感觉还不错,因为市面上大多关于小程序的书籍可能写的不够全面,要么只是点到为止的大致罗列,要么就是只简单介绍一下小程序的 界面设计这块.这样很难给学习小程序开发的人一个完成的 ...
- 微信小程序支付接入实战
1. 微信小程序支付接入实战 1.1. 需求 最近接到一个小程序微信支付的需求,需要我写后台支持,本着能不自己写就不自己写的cv原则,在网上找到了些第三方程序,经过尝试后,最后决定了这不要脸作者的 ...
- 微信小程序-云开发实战教程
微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...
随机推荐
- LAMP之Mysql源码配置安装
MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...
- (Python OpenGL)【5】平移 PyOpenGL
(Python OpenGL) 原文:http://ogldev.atspace.co.uk/www/tutorial06/tutorial06.html (英文) 下面是我翻译过来的: 背景 在本 ...
- luogu2522 [HAOI2011]Problem b
luogu2522[HAOI2011]Problem b 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公 ...
- FFT字符串匹配
本文半原创 参考资料:其实就是照抄的什么参考啊 我们知道KMP可以用来在线性复杂度内进行制胡窜匹配 今天教您一种新方法:用FFT进行字符串匹配 您可能觉得这很玄学,FFT不是做多项式卷积的吗,怎么还可 ...
- CF708A Letters Cyclic Shift 模拟
You are given a non-empty string s consisting of lowercase English letters. You have to pick exactly ...
- opencv-视频分解图片
1.加载视频2. info信息 3. 解码,parse方法解析视频 4. imshow展示或者保存imread # 视频分解图片 # 1 load 2 info 3 parse 4 imshow im ...
- gradle 使用本地maven 仓库 和 提交代码到maven
/* * This build file was generated by the Gradle 'init' task. * * This generated file contains a sam ...
- git学习--更新本地仓库单独文件
命令: git checkout origin/dev .gitignore 从远端 dev 仓库,更新本地签出分支的 .gitignore 文件
- 剧本--ansible
剧本不喜欢, 1.1 编写剧本规范:(PYyaml语法格式文件) 剧本中有层级划分 每个层级都要用两个空格进行区分 第一级标题 第二级标题 第三级标题 强调注意:一定使用ansible软件配置剧本时, ...
- pl/sql declare loop if
-- 1.判断表是否存在,如果存在则drop表 -- 2.创建表 -- 3.插入1W条数据 -- 4.每1K条commit一次 declare v_table ):='STUDENT'; --表名 v ...