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

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

---

 

前言

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

准备工作

• 前端开发利器：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组件，直接用就可以了。但是轮播图在各个页面都可能存在，只是其中所显示的图片不一样而已，所以使用组件化思想，把它写成一个模版，哪里要使用，就引入这个模版即可。

使用时，这样引入

• 商城导航区、活动区
  这里只是个简单的布局，就不赘述了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局
• 首页商品展示区
  这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用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;
}

逻辑分析&#x