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

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

---

 

前言

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

准备工作

• 前端开发利器：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: #ec605