得物 APP 微信小程序的仿制方法教程

项目规划

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

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

云数据库

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

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

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

项目解构

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

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

购买首页

购买首页样式

商品项van-grid-item中采用绝对定位。tips中将direction属性设置为horizontal，可以让宫格的内容呈横向排列。搜索框设置disabled属性为禁用状态解决单击自动聚焦的问题。在使用van-grid布局时自定义每一项的属性需设置use-slot属性，否则不生效。

这个页面布局并不复杂，不过我在写这个布局时还是遇到了坑（感觉是自己跳进去的 我太了）。在做dewu-hd吸顶时我是直接用van-sticky包起来实现，但是实际效果是tabs也需要固定在dewu-hd下面。这里不可以使用同上的方法，实际效果会使得整个van-tabs吸顶导致页面无法滑动。其实在这里只需要给van-tabs添加一个sticky属性并且设置offset-top，注意这两个属性需一起使用才能生效。

获取商品项

绑定详情页

利用商品_id属性唯一，当设定数据项id等于_id时跳转到详情页且展示对应数据。

商品详情页

商品详情页样式

整体分为detail_hd和detail_bd两部分。自定义swiper需设置dot对应展示图片并更改样式，circular属性设置是否启用滑块切换动画，这里使用三目运算符判断是否添加新的样式类名。在定义商品价格的样式的时候可以通过first-letter伪元素来定义￥符号样式。引用组件van-goods-action使得购买按钮吸底。

使用van-popup组件，给对应标签设置事件即可绑定弹出。例：。三目运算符设置默认样式并且控制选中边框样式，设置closeable属性启用关闭按钮。square设置van-grid-item为方形，gutter设置格子间距。

设置detail_produce-hd吸顶，给右侧关闭icon绑定bind:close="onClose"事件。

获取商品详情

弹出层

选择尺码

点击尺码，flag==index即为选中状态，再次点击时或者点击其他尺码时设置为非选中状态，否则使flag等于index，使其变成选中状态。

搜索页

搜索页样式

搜索页面主要分为头部搜索框和内容（搜索推荐，历史记录和搜索到的商品列表）两部分。这里用van-sticky包装搜索框使吸顶，内容部分则用block标签包装，利用wx:if这个控制属性来判断是否显示。

搜索记录

页面加载时从本地storage中获取历史搜索记录，在确定搜索onSearch时判断value是否为空，将合法value插入historyList中，这里使用的时unshift方法，这样可以保证最近的搜索记录展示在前面，利用正则表达式模糊查询数据库中符合的项存入数组results中，当results.length > 0时显示商品列表。利用wx.setStorageSync将value存入缓存，wx.getStorageSync获取打印出来。通过indexOf方法判断value是否已经存在，是则删除historyList中的该项。

历史搜索

点击历史搜索项时setData使对应值改变，再调用onSearch方法。

清空控件

清空搜索历史

点击删除icon弹出对话框wx.showModal实现交互，用户点击确定则清空historyList并利用wx.removeStorageSync将本地存储的历史记录删除。

品牌分类页

分类页样式

分类页面主要是使用了scroll-view设置竖向滚动，点击左侧scroll-view-left-item时该项变为得物色（#00cbcc）并显示对应的品牌种类项kindsItem。整体采用flex布局，这里的坑是scroll-view-left应该把font-size设为0，在子元素scroll-view-left-item中设置font，避免块元素边距影响布局。

初始化品类

选择分类

绑定筛选页

筛选排序页

排序页样式

tab使用flex布局。goods部分布局参照buy页面的商品布局。

这里使用van-collapse组件做折叠面板时有个坑，不应该将van-grid内容部分放在van-collapse-item中，应与其同级，否则会在该单元格下形成留白且无法正常显示内容，多次尝试后还是放在外面方便实现效果。

初始商品排序

基本排序

async changeItem(e) {  
    // console.log(e);
    let index = e.currentTarget.dataset.index  //index对应排序方式
    this.setData({
      activeTabIndex: index
    })
    // console.log(index);
    if(index == 1) {                        //销量排序
    await dewuCollection
    .where({
      kind: this.data.titles
    })
    .orderBy('buyer', 'desc')
    .get()
    .then(res => {
      this.setData({
        goods: res.data,
        index: index
      })
      // console.log(this.data.index);
    })
    }
    if(index == 0) {                        //综合排序
      await dewuCollection
      .where({
        kind: this.data.titles
      })
      .get()
      .then(res => {
        this.setData({
          goods: res.data
        })
      })
    }
    if(index == 2 && this.data.flag == -1) {  //价格降序排序
      await dewuCollection
      .where({
        kind: this.data.titles
      })
      .orderBy('price', 'desc')
      .get()
      .then(res => {
        this.setData({
          goods: res.data,
          flag: 1
        })
      })
      return
    }
    if(index == 3) {                         //创建时间排序
      await dewuCollection
      .where({
        kind: this.data.titles
      })
      .orderBy('ctime', 'desc')
      .get()
      .then(res => {
        this.setData({
          goods: res.data
        })
      })
    }
    if(index == 4) {                         //弹出筛选层
      this.setData({
        show: true,
      })
    }
    else if(index == 2 && this.data.flag == 1) {    //价格升序排序
      await dewuCollection
      .where({
        kind: this.data.titles
      })
      .orderBy('price', 'asc')
      .get()
      .then(res => {
        this.setData({
          goods: res.data,
          flag: -1
        })
      })
    }
  },

设置一个flag属性默认值为-1，flag==-1时点击价格降序排序并设置flag==1，flag==1时点击价格升序排序并设置flag==-1。

筛选排序

筛选重置

这里有一个坑是，不可在data中声明（num：Infinity），这里无穷大并不会生效，目前优化是声明为常量.

确认筛选

难点排坑

gotoDetail(e) {
    // console.log(e);
    wx.navigateTo({
      url: '/pages/buy_page/page/detail/detail?id='+e.currentTarget.dataset.id,
    })
  },

跳转到详情页且保留对应数据项。这里利用_id唯一，将每一项的_id赋给data-id,当id相等时才能跳转并接受对应_id的数据。

点击尺码时选中并更改text，再次点击该项则重置样式，若点击其他项则取消选中，选中被点击项。这里通过多设一个flag，结合index双重控制是否选中。

绑定type和kind.camptype，当点击项改变时，将当前项index赋给activeNavIndex，用kindall存储所有数据项，使用foreach循环遍历kindall，将满足条件kind.camptype==type的数据存入一个数组中kinds，再将setData即可。

清空历史记录时不仅将historyList设为空，且利用wx.removeStorageSync将本地存储的缓存清除。

小建议

在自己写项目时，多使用console.log()打印，跟进数据变化；多查看文档w3cschool，微信开发文档，Vant-Weapp。

源码

本项目源码：https://gitee.com/onepiece1205/dewu_weapp

结语

写项目的过程对我来说是一个挑战，毕竟第一次专注于合作做项目，项目中遇到的bug会烦人但是坚持写功能后是非常有成就感的，非常感谢在我写项目过程中帮助过我的老师和同学。如果你喜欢我的这篇文章或者看到这里对你有些许帮助，不妨点个赞吧！同时也非常希望看到文章的你能给我一些建议，期待与你一起讨论学习微信小程序！

以上就是得物 APP 微信小程序的仿制方法教程的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。