仿【得物】微信小程序实战全教程（动手就会）

前言

最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及踩过的一些坑，希望对您有所帮助。

“我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取）。

006.gif

开发准备

• 微信开发者工具

• VScode代码编辑器

• 得物APP微信小程序

• 有赞vant组件库[1]

• 阿里巴巴矢量图标库[2]

• markman[3]（取色量距）

总体架构

• 该项目基于小程序云开发，使用的模板是云开发快速启动模板[4]由于是个全栈项目，前端使用小程序所支持的wxml + wxss + js开发模式，命名采用BEM[5]命名规范。后台则是借助云数据库进行数据管理。

项目中我负责的部分主要如下（一些数据为固定数据写在config中，js文件通过module.exports暴露，需要引用时在页面对应js头部引入，例const {} = require('../../../../config/buys')）。项目中我使用的较多vant组件，需要在构建npm包时引入vant，详情可见有赞vant的npm安装[6]。页面使用第三方组件时须在对应json文件中声明，为了不做重复工作可直接在app.json中声明。例：（"usingComponents": "van-search": "@vant/weapp/search/index"}）

    |-config  对应数据
        |-assem.js   
        |-buys.js    
        |-detail.js  
        |-kind.js    
        |-search.js  
    |-pages
        |-buy_page
            |-page
                |-assem   筛选排序页
                |-buy     购买首页
                |-detail  商品详情页
                |-kinds   品牌分类页
                |-produce 鉴别简介页
                |-search  搜索页
复制代码

项目规划

• 在做该小程序之前，我先是分析每个页面对应功能，了解这款小程序的交互细节，清楚数据集合数据项。这样大概可以分为分析页面，创建数据集合，解构页面基本布局，数据绑定及跳转四步来展开。

参照得物APP微信小程序，下面是我的小程序的tabBar。（有点糙，但是还能看😶）

000.png

  "tabBar": {
    "selectedColor": "#000000",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "text": "购买",
        "pagePath": "pages/buy_page/page/buy/buy",
        "iconPath": "images/buy.png",
        "selectedIconPath": "images/buy_active.png"
      },
      {
        "text": "鉴别查询",
        "pagePath": "pages/disting/disting",
        "iconPath": "images/disting.png",
        "selectedIconPath": "images/disting_active.png"
      },
      {
        "text": "洗护",
        "pagePath": "pages/wash/wash",
        "iconPath": "images/wash.png",
        "selectedIconPath": "images/wash_active.png"
      },
      {
        "text": "我",
        "pagePath": "pages/my_page/my/my",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_active.png"
      }
    ]
  },
复制代码

云数据库

云数据库是一种NoSQL数据库。每一张表是一个集合。对于我的项目部分，我主要建立了一个商品集合。

dewu_goods 商品表 用于存储创商品的信息 
    - _id 
    - amway  是否为推荐
    - brand  品牌
    - buyer  已购买人数
    - ctime  数据创建时间
    - digest 详情介绍
    - img    详情图
    - pic    商品展示图
    - kind   种类
    - price  价格
    - sex    适应人群
    - title  简介
    - type   首页索引
复制代码

建立数据集合后需修改数据权限才可正常访问。

可对在数据库中进行这些操作，注意导入数据格式需要是.csv或.json文件，可先用excel表格建立数据集合如何转化成对应格式文件直接导入数据库。

0101.png

const db = wx.cloud.database() //云数据库
const dewuCollection = db.collection('dewu') //在js文件中导入数据集合
复制代码

项目解构

以下是我主要实现的得物APP小程序界面

接下来对每个页面的细节进行解构。

购买首页

000.gif

购买首页样式

00.png

<view class="page">
  <!-- 使用van-sticky设置dewu-hd吸顶 搜索栏-->
  <van-sticky>    
  <!-- dewu-hd使用flex布局 -->
    <view class="dewu-hd">
      <view class="dewu-hd-search" bindtap="gotoSearch">
        <van-search placeholder="搜索单号" disabled />
      </view>
      <view class="dewu-kinds" bindtap="kinds"><image src=""></image>
      </view>
    </view>
  </van-sticky>
  <!-- van-tabs实现购买页导航及与内容页对应 -->
  <van-tabs class="dewu-tabs">
    <van-tab title="推荐">
      <view class="dewu-tip">
        <view class="d