### [教你怎么仿做得物APP微信小程序](https://www.prosaas.cn/article/16386)
**Published:** 2021-08-23T03:06:18
**Author:** 5201314
**Excerpt:** 最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及…
最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及踩过的一些坑，希望对您有所帮助。
## **开发准备**
- 微信开发者工具
- VScode代码编辑器
- 得物APP微信小程序
- 有赞vant组件库
- 阿里巴巴矢量图标库
- markman（取色量距）
## **总体架构**
- 该项目基于小程序云开发，使用的模板是云开发快速启动模板由于是个全栈项目，前端使用小程序所支持的wxml + wxss + js开发模式，命名采用BEM命名规范。后台则是借助云数据库进行数据管理。【相关学习推荐：小程序开发教程】
项目中我负责的部分主要如下（一些数据为固定数据写在`config`中，js文件通过`module.exports`暴露，需要引用时在页面对应js头部引入，例`const {} = require('../../../../config/buys')`）。项目中我使用的较多`vant`组件，需要在构建`npm`包时引入`vant`，详情可见有赞vant的npm安装。页面使用第三方组件时须在对应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。（有点糙，但是还能看）
"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表格建立数据集合如何转化成对应格式文件直接导入数据库。
const db = wx.cloud.database() //云数据库
const dewuCollection = db.collection('dewu') //在js文件中导入数据集合
## **项目解构**
以下是我主要实现的得物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`，注意这两个属性需一起使用才能生效。
### **获取商品项**
async onLoad() {
this.proData() //获取推荐数据项
this.shoeData() //获取鞋类数据项
},
proData() {
const {data} = await dewuCollection
.where({
amway: db.command.eq('TRUE')
})
.field({ //获取指定数据项，提升性能
\_id:true,
pic:true,
title:true,
buyer:true,
price:true
})
.get()
// console.log(data);
this.setData({
produces: data,
})
}
shoeData() {
let data1 = await dewuCollection
.where({
type: 1
})
.get()
// console.log(data1.data);
this.setData({
shoes: data1.data
})
}
### **绑定详情页**
gotoDetail(e) {
// console.log(e);
wx.navigateTo({
url: '/pages/buy\_page/page/detail/detail?id='+e.currentTarget.dataset.id,
})
},
利用商品`_id`属性唯一，当设定数据项`id`等于`_id`时跳转到详情页且展示对应数据。
## **商品详情页**
### **商品详情页样式**
{{img.digest}}
￥{{img.price}}
选择尺码
请选择尺码
整体分为`detail_hd`和`detail_bd`两部分。自定义`swiper`需设置`dot`对应展示图片并更改样式，`circular`属性设置是否启用滑块切换动画，这里使用三目运算符判断是否添加新的样式类名。在定义商品价格的样式的时候可以通过`first-letter`伪元素来定义￥符号样式。引用组件`van-goods-action`使得购买按钮吸底。
￥
--
{{item.price}}
请选择商品
已选 {{item.size}}
{{item.size}}
￥{{item.price}}
使用`van-popup`组件，给对应标签设置事件即可绑定弹出。例：``。三目运算符设置默认样式并且控制选中边框样式，设置`closeable`属性启用关闭按钮。`square`设置`van-grid-item`为方形，`gutter`设置格子间距。
相关推荐
设置`detail_produce-hd`吸顶，给右侧关闭icon绑定`bind:close="onClose"`事件。
### **获取商品详情**
async onLoad(options) { //获取对应\_id的商品数据
console.log(options);
let id = options.id
console.log(id);
wx.cloud.database().collection('dewu')
.doc(id)
.get()
.then(res => {
console.log(res);
this.setData({
img :res.data
})
})
},
### **弹出层**
showPopup() { //显示弹出层
this.setData({
show: true,
});
},
onClose() { //关闭弹出层
this.setData({
show: false,
});
},
### **选择尺码**
pickSize(e) {
let flag = e.currentTarget.dataset.flag
let index = e.currentTarget.dataset.index
if(flag==index) {
this.setData({
activeSizeIndex: -1,
flag: -1
})
}
else {
this.setData({
activeSizeIndex: index,
flag: index
})
}
},
点击尺码，`flag==index`即为选中状态，再次点击时或者点击其他尺码时设置为非选中状态，否则使`flag`等于`index`，使其变成选中状态。
## **搜索页**
### **搜索页样式**
历史搜索
{{}}
搜索页面主要分为头部搜索框和内容（搜索推荐，历史记录和搜索到的商品列表）两部分。这里用`van-sticky`包装搜索框使吸顶，内容部分则用`block`标签包装，利用`wx:if`这个控制属性来判断是否显示。
### **搜索记录**
async onSearch(e) {
// console.log(e);
if (!e.detail.trim()) {
wx.showToast({
title: '请输入商品名',
})
return
}
let {value, historyList} = this.data
if(historyList.indexOf(value) !== -1) {
historyList.splice(historyList.indexOf(value), 1)
}
historyList.unshift(value)
this.setData({
historyList
})
wx.setStorageSync('value', historyList)
let keyword = e.detail.trim()
let results = await dewuCollection
.where({
title: db.RegExp({
regexp: keyword,
options: 'i'
})
})
.get()
if (results.data.length == 0 || keyword == '') {
wx.showToast({
title: '不存在'+keyword,
})
}
else {
await dewuCollection
.where({
title: db.RegExp({
regexp: keyword,
options: 'i'
})
})
.orderBy('hot', 'desc')
.get()
.then(res => {
console.log(res);
this.setData({
results: res.data
})
})
}
},
onLoad() {
this.getSearchHistory() //获取历史搜索
},
getSearchHistory() {
let historyList = wx.getStorageSync('value')
if(historyList) {
this.setData({
historyList
})
}
},
页面加载时从本地`storage`中获取历史搜索记录，在确定搜索onSearch时判断value是否为空，将合法`value`插入`historyList`中，这里使用的时`unshift`方法，这样可以保证最近的搜索记录展示在前面，利用正则表达式模糊查询数据库中符合的项存入数组`results`中，当`results.length > 0`时显示商品列表。利用`wx.setStorageSync`将`value`存入缓存，`wx.getStorageSync`获取打印出来。通过`indexOf`方法判断`value`是否已经存在，是则删除`historyList`中的该项。
### **历史搜索**
async historySearch(e) {
// console.log(e);
let historyList = this.data.historyList
let value = historyList\[e.currentTarget.dataset.index\]
this.setData({
value, //修改value
showHotList: false, //隐藏热门搜索
showHistory: false, //隐藏历史搜索
results: \[\] //清空商品列表
})
},
点击历史搜索项时`setData`使对应值改变，再调用`onSearch`方法。
### **清空控件**
onClear() {
this.setData({
results: \[\],
value: '',
showHotList: true,
showHistory: true
});
},
onChange(e) { //search框输入改变时实时修改数据
// console.log(e.detail);
this.setData({
value: e.detail,
showHotList: false,
showHistory: false,
results: \[\]
})
// console.log(this.data.showHotList);
if (this.data.value=='') {
this.setData({
showHotList: true,
showHistory: true
})
}
},
### **清空搜索历史**
deleteSearchHistory() {
wx.showModal({
content: '确认清空历史记录',
success: (res) => {
if(res.confirm) {
this.setData({
historyList: \[\]
})
}
}
})
wx.removeStorageSync('value')
},
点击删除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`，避免块元素边距影响布局。
### **初始化品类**
onLoad: function (options) {
this.setData({
kindNav: kindNav,
kindall: kindItem,
// console.log(this.data.kindall);
let kinds=\[\];
// console.log(this.data.kindall)
this.data.kindall.forEach(kind => { //循环从所有品类中获取对应kindNav的并存入数组中
if(kind.camptype == 0) {
kinds.push(kind)
}
})
this.setData({
kindItem: kinds,
})
}, )
},
### **选择分类**
changeKinds(e) {
console.log(e);
let {index, type} = e.currentTarget.dataset;
console.log(index, type);//index与推荐品牌的索引有关。type与kind.js的camptype有关
this.setData({
activeNavIndex: index,
})
let title=\[\]
this.data.kindTitles.forEach(kindTitle => {
if(index == kindTitle.titletype) {
title.push(kindTitle)
}
})
this.setData({
kindItem: kinds,
})
},
### **绑定筛选页**
gotoAssem(e) {
// console.log(e); 利用kind属性值唯一（buy页面tabs的title）
wx.navigateTo({
url: '/pages/buy\_page/page/assem/assem?title='+e.currentTarget.dataset.title,
})
},
## **筛选排序页**
### **排序页样式**
{{item.title}}
`tab`使用`flex`布局。`goods`部分布局参照`buy`页面的商品布局。
{{}}
这里使用`van-collapse`组件做折叠面板时有个坑，不应该将`van-grid`内容部分放在`van-collapse-item`中，应与其同级，否则会在该单元格下形成留白且无法正常显示内容，多次尝试后还是放在外面方便实现效果。
### **初始商品排序**
async onLoad(options) {
// console.log(options);
let title = options.title
let data1 = await dewuCollection
.where({
kind: title //绑定跳转时（kind唯一）获取对应数据
})
.get()
// console.log(data1);
this.setData({
goods: data1.data,
titles: title
})
},
### **基本排序**
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`。
### **筛选排序**
pick(e) {
let flag = e.currentTarget.dataset.flag
let index = e.currentTarget.dataset.index
let cd = this.data.human\[index\].kind
if(flag==index) {
this.setData({
activeIndex1: -1,
flag1: -1,
cd1: ''
})
}
else {
this.setData({
activeIndex1: index,
flag1: index,
cd1: cd
})
}
},
### **筛选重置**
replace() { // 点击重置按钮将所有筛选条件回复默认
this.setData({
flag1: -1,
activeIndex1: -1,
flag2: -1,
activeIndex2: -1,
flag3: -1,
activeIndex3: -1,
cd1: '',
cd2: '',
cd3: 0,
cd4: 10000000,
})
},
这里有一个坑是，不可在`data`中声明（`num：Infinity`），这里无穷大并不会生效，目前优化是声明为常量.
### **确认筛选**
async ischeck() { //点击确定按钮进行筛选显示结果
let cd3 = Number(this.data.cd3)
let cd4 = Number(this.data.cd4)==0?1000000:Number(this.data.cd4)
let index = Number(this.data.index)
if(this.data.cd1!='' && this.data.cd2!=''){
await dewuCollection
.where({
kind: this.data.titles,
sex: this.data.cd1,
brand: this.data.cd2,
price: \_.gt(cd3).and(\_.lt(cd4)),
})
.get()
.then(res => {
this.setData({
goods: res.data,
show: false,
})
})
return
}
},
## **难点排坑**
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`的数据。
{{item.size}}
￥{{item.price}}
pickSize(e) {
let flag = e.currentTarget.dataset.flag
let index = e.currentTarget.dataset.index
if(flag==index) {
this.setData({
activeSizeIndex: -1,
flag: -1
})
}
else {
this.setData({
activeSizeIndex: index,
flag: index
})
}
},
点击尺码时选中并更改`text`，再次点击该项则重置样式，若点击其他项则取消选中，选中被点击项。这里通过多设一个`flag`，结合`index`双重控制是否选中。
{{item.text}}
changeKinds(e) {
console.log(e);
let {index, type} = e.currentTarget.dataset;
console.log(index, type);//index与推荐品牌的索引有关。type与kind.js的camptype
this.setData({
activeNavIndex: index,
})
let kinds = \[\]
this.data.kindall.forEach(kind => {
if(kind.camptype == type) {
kinds.push(kind)
}
})
this.setData({
kindItem: kinds,
})
}
绑定`type`和`kind.camptype`，当点击项改变时，将当前项`index`赋给`activeNavIndex`，用`kindall`存储所有数据项，使用`foreach`循环遍历`kindall`，将满足条件`kind.camptype==type`的数据存入一个数组中`kinds`，再将`setData`即可。
deleteSearchHistory() {
wx.showModal({
content: '确认清空历史记录',
success: (res) => {
if(res.confirm) {
this.setData({
historyList: \[\]
})
}
}
})
wx.removeStorageSync('value')
},
清空历史记录时不仅将`historyList`设为空，且利用`wx.removeStorageSync`将本地存储的缓存清除。
### **小建议**
在自己写项目时，多使用`console.log()`打印，跟进数据变化；多查看文档w3cschool，微信开发文档，Vant-Weapp。
## **源码**
> 本项目源码：https://gitee.com/onepiece1205/dewu\_weapp
## **结语**
写项目的过程对我来说是一个挑战，毕竟第一次专注于合作做项目，项目中遇到的bug会烦人但是坚持写功能后是非常有成就感的，非常感谢在我写项目过程中帮助过我的老师和同学。如果你喜欢我的这篇文章或者看到这里对你有些许帮助，不妨点个赞吧！同时也非常希望看到文章的你能给我一些建议，期待与你一起讨论学习微信小程序！
更多编程相关知识，请访问：编程入门！！
以上就是教你怎么仿做得物APP微信小程序的详细内容，更多请关注知企PROSAAS其它相关文章！
**Categories:** 后端开发
---