微信小程序，让你一见倾心

前言

小程序发布以来，凭借无需安装、用完即走、触手可及、无需注册、无需登录、以及社交裂变等多个优势，一路高歌，变得愈来愈火爆，它革命性的降低了移动应用的开发成本，也正好迎合了用户的使用应用的习惯。小程序魅力如此之大，作为一枚程序猿，我想怎么不自己做一个呢？话不多说，咱撸起袖子就是干

准备工作

前端开发利器：VSCode
调试：微信开发者工具
自己Mock的一些数据
微信开发文档

项目目录结构

├── assets                   用到的一些图标文件
├── lib├── weui.wxss            引用了weui
├── modules                    ├── showDetail.js        跳转展示商品详情的公共js文件  ├── showcDetail.js
├── pages                    项目的各个页面├── index                商城首页├── categories           商品分类页├── discovery            发现页├── channel              商品频道目录├── phone            手机频道├── tv               电视频道├── 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组件，直接用就可以了。但是轮播图在各个页面都可能存在，只是其中所显示的图片不一样而已，所以使用组件化思想，把它写成一个模版，哪里要使用，就引入这个模版即可。

<template name="slide"><view class="section section-swiper"><swiper class="slide" indicator-dots="{{true}}" autoplay="{{true}}" interval="2000" duration="1000"><block wx:for="{{slides}}" wx:key="{{index}}"><swiper-item><image src="{{item.slide_url}}" mode="widthFix" class="slide-image" data-id="{{item.id}}" /></swiper-item></block></swiper></view>
</template>

使用时，这样引入

<import src="../../../templates/slide/slide.wxml" />
<view class="container"><template is="slide" data="{{slides}}"></template>
</view>

商城导航区、活动区
这里只是个简单的布局，就不赘述了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局
首页商品展示区
这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用wx:for遍历出来。
wxml：

<!-- 首页商品版块 --><view class="section block"><block wx:for="{{index_block}}" wx:key="{{item.id}}"><view class="section cover"><image class="cover-img" src="{{item.img_url}}" data-cid="{{item.id}}" bindtap="showcDetail"/></view><view class="section goods-list"><block wx:for="{{item.section}}" wx:key="index" wx:for-item="product"><view class="goods-item"><image class="goods-img {{product.is_new?'new':''}} {{product.on_sale?'on-sale':''}}" src="{{product.goods_cover}}" data-pid="{{product.id}}" mode="aspectFill" bindtap="showDetail"/><text class="title">{{product.header}}</text><text class="desp">{{product.description}}</text><text class="meta">{{product.meta}}</text><text class="discount">{{product.discount}}</text></view></block></view></block></view><!-- end-section block -->

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

wxml：

<image class="goods-img {{product.is_new?'new':''}} {{product.on_sale?'on-sale':''}}" src="{{product.goods_cover}}" data-pid="{{product.id}}" mode="aspectFill" bindtap="showDetail"/>

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; //获取每个商品的idwx.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="main"><scroll-view scroll-y class="category-left"><view class="cate-nav-list" wx:for="{{cate_nav_list}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}"bindtap="switchCategory"><text class="cate-name {{curIndex===index?'on':''}}">{{item.name}}</text></view></scroll-view><scroll-view class="category-right" scroll-y="{{true}}" scroll-into-view="{{toView}}" scroll-with-animation="true"><view class="cate-content"><view class="cate-list-content" wx:for="{{detail}}" wx:key="{{item.id}}" id="{{item.id}}"><view class="banner"><image src="{{item.banner}}"/></view><view class="header">{{item.cate_name}}</view><view class="cate-list"><view class="cate-item"  wx:for="{{item.cate_list}}" wx:key="{{index}}" wx:for-item="cateList"><image src="{{cateList.item_img}}" /><text>{{cateList.item_name}}</text></view></view></view></view></scroll-view>
</view>

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,  //初始化当前下标为0toView:"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});}
})

三、发现页

页面结构分析：

里面展示了一些商品宣传视频（当时还是不太想切太多的页面

微信小程序实战（仿小米商城）相关推荐

微信小程序实战-仿盒马鲜生
盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分项目功能 * 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面小程序设计过程 ...
微信小程序实战--仿知识星球(一)
发现一款好好看的app 名字叫做知识星球 (虽然整款app除了绿色就还是绿色但是还是好看啊) 不多扯我开始说我的项目吧项目地址: AndIMissU/Stars 项目视频: 项目环境和资源需求网 ...
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文微信小程 ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
21小时精通微信小程序开发(仿猫眼电影App、微信小程序问答)
21小时精通微信小程序开发(仿猫眼电影App.微信小程序问答) 网盘地址:https://pan.baidu.com/s/1GTpPX4A1U-w_3i6k7lLztQ 密码: 5pcz 备用地址(腾 ...
axure 小程序网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程课程简介我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b

微信小程序实战（仿小米商城）