## 前言最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及踩过的一些坑，希望对您有所帮助。 ![006.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5680fe35def1458c89f669e4ec97f92d~tplv-k3u1fbpfcp-watermark.image) ## 开发准备 - 微信开发者工具 - VScode代码编辑器 - 得物APP微信小程序 - [有赞vant组件库](https://vant-contrib.gitee.io/vant-weapp/#/home) - [阿里巴巴矢量图标库](https://www.iconfont.cn/search/index?searchType=icon) - [markman](http://www.getmarkman.com/)（取色量距） ## 总体架构 - 该项目基于小程序云开发，使用的模板是[云开发快速启动模板](https://link.juejin.cn/?target=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Farticle%2F1345310 "https://cloud.tencent.com/developer/article/1345310")由于是个全栈项目，前端使用小程序所支持的wxml + wxss + js开发模式，命名采用[BEM](https://juejin.cn/post/6844903687031111693 "https://juejin.cn/post/6844903687031111693")命名规范。后台则是借助云数据库进行数据管理。项目中我负责的部分主要如下（一些数据为固定数据写在`config`中，js文件通过`module.exports`暴露，需要引用时在页面对应js头部引入，例`const {} = require('../../../../config/buys')`）。项目中我使用的较多`vant`组件，需要在构建`npm`包时引入`vant`，详情可见[有赞vant的npm安装](https://vant-contrib.gitee.io/vant-weapp/#/quickstart)。页面使用第三方组件时须在对应json文件中声明，为了不做重复工作可直接在`app.json`中声明。例：（`"usingComponents": "van-search": "@vant/weapp/search/index"}`） ```js |-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](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b563c7475a5c432e947456d6a49d2eb6~tplv-k3u1fbpfcp-watermark.image) ```js "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 首页索引 ``` ![0001.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/025c2d0c7b8d47fd901dcd7eb8fdabaf~tplv-k3u1fbpfcp-watermark.image) 建立数据集合后需修改数据权限才可正常访问。 ![0002.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99d218eb172f43bca45e926711481a1b~tplv-k3u1fbpfcp-watermark.image) 可对在数据库中进行这些操作，注意导入数据格式需要是`.csv`或`.json`文件，可先用excel表格建立数据集合如何转化成对应格式文件直接导入数据库。 ![0101.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f3098714a6649c698f0bfabd7d68135~tplv-k3u1fbpfcp-watermark.image) ```js const db = wx.cloud.database() //云数据库 const dewuCollection = db.collection('dewu') //在js文件中导入数据集合 ``` ## 项目解构以下是我主要实现的得物APP小程序界面 ![buy0.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/900b22e4489a46ca91b66366b6baf9ad~tplv-k3u1fbpfcp-watermark.image) ![buy11.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f2dbab3ea16437b9ecfadf713e21d71~tplv-k3u1fbpfcp-watermark.image) ![search1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8dc778ac7dc247a6b8a4d49a853d8ad8~tplv-k3u1fbpfcp-watermark.image) ![detail.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f08186526f954c9cbf9868b3c5750b53~tplv-k3u1fbpfcp-watermark.image) ![kind.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5db65fd33e049eba94312c12004e23d~tplv-k3u1fbpfcp-watermark.image) ![assem.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6def0c02edec4e32adcffc002221b5ee~tplv-k3u1fbpfcp-watermark.image) 接下来对每个页面的细节进行解构。 ## 购买首页 ![000.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/921424e3e718488f9b9e504a52701d32~tplv-k3u1fbpfcp-watermark.image) ### 购买首页样式 ![00.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/093be1aebe884c508a20567914654593~tplv-k3u1fbpfcp-watermark.image) ```js

正品保障

{{}}

``` 商品项`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`，注意这两个属性需一起使用才能生效。 ### 获取商品项 ```js 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 }) } ``` ### 绑定详情页 ```js gotoDetail(e) { // console.log(e); wx.navigateTo({ url: '/pages/buy_page/page/detail/detail?id='+e.currentTarget.dataset.id, }) }, ``` 利用商品`_id`属性唯一，当设定数据项`id`等于`_id`时跳转到详情页且展示对应数据。 ## 商品详情页 ![001.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfbb08981ea645e2ba65ceca0fc265a9~tplv-k3u1fbpfcp-watermark.image) ### 商品详情页样式 ![03.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db6495aa94af48a0baeb69827211ab3d~tplv-k3u1fbpfcp-watermark.image) ```js

{{img.digest}} ￥{{img.price}}

选择尺码请选择尺码

``` 整体分为`detail_hd`和`detail_bd`两部分。自定义`swiper`需设置`dot`对应展示图片并更改样式，`circular`属性设置是否启用滑块切换动画，这里使用三目运算符判断是否添加新的样式类名。在定义商品价格的样式的时候可以通过`first-letter`伪元素来定义￥符号样式。引用组件`van-goods-action`使得购买按钮吸底。 ![05.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/200dce1ad7414bd5aca021706ae1b7ad~tplv-k3u1fbpfcp-watermark.image) ```js

￥ -- {{item.price}} 请选择商品已选 {{item.size}}

{{item.size}} ￥{{item.price}}

``` 使用`van-popup`组件，给对应标签设置事件即可绑定弹出。例：``。三目运算符设置默认样式并且控制选中边框样式，设置`closeable`属性启用关闭按钮。`square`设置`van-grid-item`为方形，`gutter`设置格子间距。 ![06.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ecd494fc8164e3b9062e74beb5e27d8~tplv-k3u1fbpfcp-watermark.image) ```js 相关推荐 ``` 设置`detail_produce-hd`吸顶，给右侧关闭icon绑定`bind:close="onClose"`事件。 ### 获取商品详情 ```js 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 }) }) }, ``` ### 弹出层 ```js showPopup() { //显示弹出层 this.setData({ show: true, }); }, onClose() { //关闭弹出层 this.setData({ show: false, }); }, ``` ### 选择尺码 ```js 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`，使其变成选中状态。 ## 搜索页 ![002.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ec92b3e2f1e4c83ada6071b73f0e674~tplv-k3u1fbpfcp-watermark.image) ### 搜索页样式 ![01.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37b79dd181644ab2b7101dca342e83ac~tplv-k3u1fbpfcp-watermark.image) ```js

历史搜索 {{}} ``` 搜索页面主要分为头部搜索框和内容（搜索推荐，历史记录和搜索到的商品列表）两部分。这里用`van-sticky`包装搜索框使吸顶，内容部分则用`block`标签包装，利用`wx:if`这个控制属性来判断是否显示。 ### 搜索记录 ```js 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`中的该项。 ### 历史搜索 ```js 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`方法。 ### 清空控件 ```js 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 }) } }, ``` ### 清空搜索历史 ```js deleteSearchHistory() { wx.showModal({ content: '确认清空历史记录', success: (res) => { if(res.confirm) { this.setData({ historyList: [] }) } } }) wx.removeStorageSync('value') }, ``` 点击删除icon弹出对话框`wx.showModal`实现交互，用户点击确定则清空`historyList`并利用`wx.removeStorageSync`将本地存储的历史记录删除。 ## 品牌分类页 ![003.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d39de11c9464250bdbee8b843dc503c~tplv-k3u1fbpfcp-watermark.image) ### 分类页样式 ![07.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07ae2c2db8714a5e960dca595ef42d08~tplv-k3u1fbpfcp-watermark.image) ```js

{{}}

``` 分类页面主要是使用了`scroll-view`设置竖向滚动，点击左侧`scroll-view-left-item`时该项变为得物色（`#00cbcc`）并显示对应的品牌种类项`kindsItem`。整体采用`flex`布局，这里的坑是`scroll-view-left`应该把`font-size`设为0，在子元素`scroll-view-left-item`中设置`font`，避免块元素边距影响布局。 ### 初始化品类 ```js 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, }) }, ) }, ``` ### 选择分类 ```js 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, }) }, ``` ### 绑定筛选页 ```js gotoAssem(e) { // console.log(e); 利用kind属性值唯一（buy页面tabs的title） wx.navigateTo({ url: '/pages/buy_page/page/assem/assem?title='+e.currentTarget.dataset.title, }) }, ``` ## 筛选排序页 ![004.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ea9cee5ae4a49c8b4aa6da3a1d7a162~tplv-k3u1fbpfcp-watermark.image) ### 排序页样式 ![08.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8988d25ea91b4227a2d8393e7633e9db~tplv-k3u1fbpfcp-watermark.image) ```js

``` `tab`使用`flex`布局。`goods`部分布局参照`buy`页面的商品布局。 ![011.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb2a243bfbfe458a907bd5f3f356834e~tplv-k3u1fbpfcp-watermark.image) ```js

{{}}

``` 这里使用`van-collapse`组件做折叠面板时有个坑，不应该将`van-grid`内容部分放在`van-collapse-item`中，应与其同级，否则会在该单元格下形成留白且无法正常显示内容，多次尝试后还是放在外面方便实现效果。 ### 初始商品排序 ```js 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 }) }, ``` ### 基本排序 ```js 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`。 ### 筛选排序 ```js 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 }) } }, ``` ### 筛选重置 ```js replace() { // 点击重置按钮将所有筛选条件回复默认 this.setData({ flag1: -1, activeIndex1: -1, flag2: -1, activeIndex2: -1, flag3: -1, activeIndex3: -1, cd1: '', cd2: '', cd3: 0, cd4: 10000000, }) }, ``` 这里有一个坑是，不可在`data`中声明（`num：Infinity`），这里无穷大并不会生效，目前优化是声明为常量. ### 确认筛选 ```js 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 } }, ``` ## 难点排坑 ```js 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`的数据。 ```js {{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`双重控制是否选中。 ```js {{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`即可。 ```js deleteSearchHistory() { wx.showModal({ content: '确认清空历史记录', success: (res) => { if(res.confirm) { this.setData({ historyList: [] }) } } }) wx.removeStorageSync('value') }, ``` 清空历史记录时不仅将`historyList`设为空，且利用`wx.removeStorageSync`将本地存储的缓存清除。 ### 小建议在自己写项目时，多使用`console.log()`打印，跟进数据变化；多查看文档[w3cschool](https://www.w3cschool.cn/tutorial)，[微信开发文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)，[Vant-Weapp](https://vant-contrib.gitee.io/vant-weapp/#/notice-bar)。 ## 源码 [本项目源码](https://gitee.com/onepiece1205/dewu_weapp) ## 结语写项目的过程对我来说是一个挑战，毕竟第一次专注于合作做项目，项目中遇到的bug会烦人但是坚持写功能后是非常有成就感的，非常感谢在我写项目过程中帮助过我的老师和同学。如果你喜欢我的这篇文章或者看到这里对你有些许帮助，不妨点个赞吧😺！同时也非常希望看到文章的你能给我一些建议，期待与你一起讨论学习微信小程序！（点击👉[了解更多](https://juejin.cn/post/6998464365380927502)） ![005.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5f79b0d04cf4a97a1cb3751c38b00f9~tplv-k3u1fbpfcp-watermark.image)