Web前端最全微信小程序实战（仿小米商城）(1)，web前端开发项目_前端开发商城类小程序

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

├── computer 电脑频道

├── cart 购物车

├── mine 个人信息页

├── goods 商品详情页

├── selectGoods 商品属性选择页

├── search 商品搜索页

├── addr 收货地址页

├── template 使用到的模版文件

├── slide 轮播图模版

├── goods_list 商品展示模版

├── cover 商品展示模版

├── util 使用到的工具类

├── mock.js 项目中使用到的一些数据

├── app.js 项目逻辑

├── app.wxss 项目公共样式表

└── app.json 项目公共设置

功能的展示与实现

---

一、商城首页

页面结构分析：

• 顶部搜索条

这里看上去是一个搜索框，但其实，它要实现的仅仅是个页面跳转功能，只要把它的disabled设置为true就可以了，另外要想让它placeholder占位符居中显示的话，微信小程序提供了一个placeholder-class的属性，通过它可以改变placeholder的样式。

• 轮播图区域

这里微信小程序给我们提供了swiper组件，直接用就可以了。但是轮播图在各个页面都可能存在，只是其中所显示的图片不一样而已，所以使用组件化思想，把它写成一个模版，哪里要使用，就引入这个模版即可。

使用时，这样引入

• 商城导航区、活动区

这里只是个简单的布局，就不赘述了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局

• 首页商品展示区

这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用wx:for遍历出来。

wxml：

{{product.header}}

{{product.description}}

{{product.meta}}

{{product.discount}}

这里有个细节，每个版块里的商品会分成“新品”、“立减”（即有折扣）、“无折扣”三种，着该怎么去做呢？这里我用了一个巧妙的方法：给每个商品的class里绑定布尔值is_new和on_sale通过三元运算符判断是否给该商品挂载一个类名，再使用伪元素给该商品打上“新品”或“立减”的标签如下：

wxml：

wxss

.goods-img.new:before{ /新品标签样式/

position: absolute;

left: 0;

top: 0;

width: 100rpx;

height: 40rpx;

line-height: 40rpx;

content: “新品”;

color: #fff;

font-size: 9pt;

text-align: center;

background: #8CC64A;

}

.goods-img.on-sale:before{ /立减标签样式/

position: absolute;

left: 0;

top: 0;

width: 100rpx;

height: 40rpx;

line-height: 40rpx;

content: “立减”;

font-size: 9pt;

color: #fff;

text-align: center;

background: #ec6055;

}

逻辑分析：

首页只是些商品，所以逻辑层只要根据每个商品的id来跳到对应商品的详情页即可，很显然这个方法在多个页面都要使用的，所以使用模块化思想，创建一个modules文件夹，把方法写在单独的js文件里，并向外输出

const showDetail=(e)=>{

const id=e.currentTarget.dataset.pid; //获取每个商品的id

wx.navigateTo({

url: /pages/goods/show?id=${id}

})

};

export default showDetail;

哪里要使用，就用import引入

import showDetail from “…/…/modules/showDetail”;

二、商品分类页

页面结构分析：

商品分类页分为左侧的商品分类菜单和右边的商品分类展示区，

用两个scroll-view就可以了，左右两边都设置scroll-y让它们垂直方向滚动，此外，scroll-view还有一个scroll-into-view属性能让我们实现类似a标签的锚点功能，scroll-into-view的值是某个子元素的id，但是此处有一个小坑，这个id不能以数字开头

当时查了一下文档就开做了，于是乎给左侧菜单取了些数字id，现在想起来当时我太自以为然了 ，此外如果内容太多，是会产生滚动条的，如图：

这样看起来也太丑了。。

**解决办法：给全局样式加入下面的样式

//隐藏滚动条

::-webkit-scrollbar{

height: 0;

width: 0;

color: transparent;

}

嗯，beautiful ！！

商品分类功能

逻辑分析：给页面注册个curIndex(当前选中菜单的下标)，如果当前下标和选中的菜单下标相同，则处于激活状态

部分代码：

wxml：

<view class=“cate-nav-list” wx:for=“{{cate_nav_list}}” wx:key=“{{item.id}}” data-id=“{{item.id}}” data-index=“{{index}}”

bindtap=“switchCategory”>

{{item.name}}

{{item.cate_name}}

{{cateList.item_name}}

js:

const app=getApp();

Page({

/**

• 页面的初始数据

*/

data: {

cate_nav_list:[

{name:“新品”,id:“new”},

{name:“手机”,id:“phone”},

{name:“电视”,id:“tv”},

{name:“电脑”,id:“laptop”},

{name:“家电”,id:“appliance”},

{name:“路由”,id:“router”},

{name:“智能”,id:“smart”},

{name:“儿童”,id:“kids”},

{name:“灯具”,id:“lignts”},

{name:“电源”,id:“adapter”},

{name:“耳机”,id:“headset”},

{name:“音箱”,id:“voicebox”},

{name:“生活”,id:“life”},

{name:“服务”,id:“service”},

{name:“米粉卡”,id:“card”}

],

curIndex:0, //初始化当前下标为0

toView:“new”, //默认显示“新品展示”

detail:[]

},

switchCategory(e){

const curIndex=e.currentTarget.dataset.index?e.currentTarget.dataset.index:0; //获取每个菜单的id

//更新数据

this.setData({

toView:e.currentTarget.dataset.id,

curIndex

});

},

onLoad: function (options) {

const detail=app.globalData.category; //获取分类展示数据

this.setData({

detail

});

}

})

三、发现页

页面结构分析：

里面展示了一些商品宣传视频（当时还是不太想切太多的页面声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】