一周云开发，都来上“脚”国货之光小程序 前言最近鸿星尔克直接刷屏朋友圈，前阵子也学过一段时间的微信小程序开发，为了巩固所学的知识和提高实战经验，并且支持一波鸿星尔克，所以用微信小程序云开发来着手制作了一个简易版的仿鸿星尔克小程序。在此次开发过程中，着重于功能方面的实现，实现了网上购物的基础功能，并且在开发过程中碰到过学习中没有遇到过的坑，我也会在文章中分享我开发中小程序的痛点难点，并且分享我所遇到的坑给和我一样的初学小程序的人带来一些帮助。 项目部分展示： 开发工具准备 VScode 代码编辑器。微信开发者工具(fiddler 工具[1]) 抓取鸿星尔克小程序中的图片的 url@vant 组件下载(阿里巴巴矢量图标库[2]) 提供一些图标 icon 云数据库设计 在本次小程序开发中，我运用了云数据库来帮助我完成这次项目。本次使用了俩个数据库表，一个是存放所有商品的 products 的表，下面是 products 表的截图，并且简要介绍。 另外一个是 shopcar 购物车表，这个表一开始是为空的，用户在进入详情页后，点击加入购物车，便会在 shopcar 购物车表中添加一个数据，下面是 shopcar 表的截图，并附带简要介绍。 首页 page/home 的设计home.wxml 中大概代码框架如下： 有一个 hx__hd 设置为上面展示的一些导航信息，并且固定在这里，然后是一个 swiper 标签，里面有五个 swiper-item 分别代表着首页 / 推荐 / 商品 / 上新 / 促销的页面 这里运用了竖直方向的弹性布局，先设置整个页面高 100vh，然后设置首页导航的宽度，然后设置 view 标签中的 class=hx_swiper_list 为 1，运用弹性布局，将除首页导航的高度外，其余的高度都分配它。最后设置其子代高度为 100%, 来继承 hx_swiper_list 得来的高度。完成本次布局。 .hx_swiper_list{ flex: } .hx_swiper_list_swiper, .hx_swiper_list__item{ height:100%; } 复制代码 自定义 tabBar"tabBar":{ "selectedColor":"#fece00", "borderStyle":"white", "backgroundColor":"#ededed", "list":[ { "text":"首页", "pagePath":"pages/home/home", "iconPath":"assets/images/tabs/home.png", "selectedIconPath":"assets/images/tabs/home-active.png" }, { "text":"分类", "pagePath":"pages/sort/sort", "iconPath":"assets/images/tabs/sort.png", "selectedIconPath":"assets/images/tabs/sort-active.png" }, { "text":"购物车", "pagePath":"pages/shopcar/shopcar", "iconPath":"assets/images/tabs/shopcar.png", "selectedIconPath":"assets/images/tabs/shopcar-active.png" }, { "text":"我的", "pagePath":"pages/my/my", "iconPath":"assets/images/tabs/my.png", "selectedIconPath":"assets/images/tabs/my-active.png" } ] }, 复制代码 在 app.json 中定义 "tabBar": {} 来自定义导航栏，并且可以定义选中后的字体颜色，和选中后不同样式的图片。使得这个导航栏可以表示并体现出此时选中的到底是哪些导航标签。 完成点击首页 / 推荐 / 商品 / 上新 / 促销，与手指水平滑动切换数据联动data:{ activeSwiperIndex:0, activeTabIndex:0, } 复制代码 在 home.js 中的 data 数据中： view viewbindtap="switchTab"data-index="0" class="hd__tabs_item{{activeTabIndex==0?\"hd_tabs__item_on\":\"\"}}"首页/view viewbindtap="switchTab"data-index="1" class="hd__tabs_item{{activeTabIndex==1?\"hd_tabs__item_on\":\"\"}}"推荐/view viewbindtap="switchTabproduct"data-index="2" class="hd__tabs_item{{activeTabIndex==2?\"hd_tabs__item_on\":\"\"}}"商品/view viewbindtap="switchTabNew"data-index="3" class="hd__tabs_item{{activeTabIndex==3?\"hd_tabs__item_on\":\"\"}}"上新/view viewbindtap="switchTab"data-index="4" class="hd__tabs_item{{activeTabIndex==4?\"hd_tabs__item_on\":\"\"}}"促销/view /view 复制代码 然后在 home.wxml 中对这些按钮设置点击事件 switchTab, 并传入一个 index 值，并且设置一个三元运算符，如果现在点击的对应的额是 activeTabIndex 的值，便会在其下方加重下划线，表示选中的意思。 switchTab(e){ letindex=e.currentTarget.dataset.index; if(index==this.data.activeTabIndex){ return } this.setData({ activeTabIndex:index, }) }, 复制代码 现在是 switchTab 事件，让传入的 date-index 的值赋值给 index 的变量，随后进行判断，若 index 等于 activeTabIndex，直接返回，若不相等则将 index 的值赋给 activeTabIndex。 swiper current="{{activeTabIndex}}" bindchange="doListChange" 复制代码 随后在 swiper 标签中传入一个 current 值为 {{activeTabIndex}}，用 bindchange 事件来实现滑动与点击按钮联动。 doListChange(e){ letindex=e.detail.current; this.setData({ activeTabIndex:index, }) }, 复制代码 随后重新将传入的值赋给 activeTabIndex 的值，这样就实现了滑动与点击联动，只要点击一个，也会影响另外一个。 循环输出数据库中的 products 表单，并且能够根据 products 表单的属性来出现在指定的页面。预加载拿到初始最初显示数据constlimit= Page({ data:{ productlike:[], productRec:[], productNew:[], } asynconLoad(){ let{data}=awaitproductsCollection .limit(limit).get(); let{data:productnew}=awaitproductsCollection.where({ isNew:true }).limit(limit).get(); let{data:productlike}=awaitproductsCollection.where({ isTitle:true }).limit(limit).get() let{data:productrec}=awaitproductsCollection.where({ isRec:true }).limit(limit).get() let{total}=awaitproductsCollection.count() this.setData({ productlike:productlike, product:data, productRec:productrec, productNew:productnew, total:total, }) } )} 复制代码 首先在 home 页面进行初始化数据，其中 limit 是该小程序滑动到底部加载一次性加载多少个数组，因为我这里设置了 limit=10, 所以当滑动到该商品时候，若还有数据，则一次性加载 10 张出来。 坑点提示： 在小程序中，从数据库中取出的数据不设限制的话默认一次性拿去 20 条，这也是一次性拿到数据的最大值，所以我们设置 limit 值也只能在 1-20 条之间，超出也没有效果。 scroll-view 中的 bindscrolltoupper 事件来加载更多数据在文的坑点提示中说过，微信小程序从数据库取数据，最大值便为 20 条，倘若有 20 条以上的数据，那到底该如何加载更多的数据呢？这里就需要使用云数据库的. skip() 方法来跳到你想取得数据位置。接下来就由我来带领大家来体验一下。 首先需要在上文中提到的 swiper-item 后面添加一个 sroll-view 标签，具体代码如下： swiper-item scroll-viewscroll-y="true" bindscrolltolower="addMore_product" lower-threshold="100" 复制代码 这里代码指的是滑动到距离底部 100 的位置的时候，会自动触发 addMore_product 事件， 这个事件是加载所有商品的事件，加载上新的事件也差不多一样，只不过需要加. where 来限制筛选。接下来就由我来介绍一下 addMore_product 事件，其他差不多的加载上新的事件欢迎大家去 gitee 观看源码，在文章最后会给出链接。 data:{ page:1, product:[], } asyncaddMore(){ wx.showLoading({ title:'正在加载中....' }) let{data}=awaitproductsCollection .skip(this.data.page*limit) .limit(limit) .get(); wx.hideLoading(); this.setData({ product:[...this.data.product,...data], page:++this.data.page }) if(this.data.product.length=this.data.total){ wx.showToast({ title:'没有更多商品了....', }) return; } } 复制代码 首先，因为 onLoad 预加载了，所以 page 页要从 1 开始，然后当下滑到页面底部 150 距离的时候触发 addMore 事件，因为鸿星尔克 app 是为 10 个数据一加载，将 limit 限制为 10，随后运用 skip 跳转得到下一页的数据，随后将 page 自增 + 1，这样每次就能拿到不同的数据。但是如何将这些数据扩容加入到 js 中 data 里的 product 数据项呢？ 坑点提示：这里需要运用... 张开语法，将 this.data.product 和新增的 data 数据展开，然后一起放进一个新的数组，随后将数组数据给到 data 中的 product，从而实现将新数据放进 product 中，并且保存原来的 product 数据。 .orderby() 实现价格升序排序viewbindtap="switchProductTabprice"data-index="3" class="products_tabar__desc {{activeProductTabIndex==3?\"products_tabar__desc_on\":\"\"}}"/view 复制代码 在这里对点击价格设立个 switchProductTabprice 事件，在 js 中代码如下： asyncswitchProductTabprice(e){ letindex=e.currentTarget.dataset.index; if(index==this.data.activeProductTabIndex){ return } let{data}=awaitproductsCollection .orderBy("price","asc") .skip(0) .limit(limit) .get() this.setData({ activeProductTabIndex:index, pageprice:1, product:data }) }, } 复制代码 这里需要判断，若这里的 index 索引就是传入的索引，即在价格页面点击价格，就直接结束。如果不是的话就在数据库搜索，.orderBy("price","asc") 根据价格进行升序排序，搜索随后跟其他数据一样，进行 page 自增数组增加。 将在 js 中 data 里的数据，用 wx:for 循环展示：view wx:for="{{productlike}}"wx:key="index" bindtap="goToDetail"data-item="{{item}}" view imagesrc="{{item.pic}}"/image /view view{{item.title}}/view view￥{{item.price}}.00/view /view 复制代码 例如这里这里循环 productlike 数据，就将 products 数据库中 isTitle 为 true 的都选出来。其他的上新（isNew），推荐 (isRec) 都是同理，保存到 js 中的 data 数据中，并且 wx:for 循环出来就可以实现了。 进入详情页 JS效果展示： 进入详情页后： 此时的颜色选项是通过数据库查找得到的。下面是实现的操作。 在点击进入的页面传输 id 值viewwx:for="{{productlike}}" wx:key="index"bindtap="goToDetail"data-item="{{item}}" view imagesrc="{{item.pic}}"/ /view view{{item.title}}/view view￥{{item.price}}.00/view /view 复制代码 在每个 wx:for 循环的数据中加入一个进入详情页的点击事件，并且将循环的数据的值传给 goToDetail 的 js 中。 goToDetail(e){ if(e.currentTarget.dataset.item.isShoes){ wx.navigateTo({ url:`../detail/detail?id=${e.currentTarget.dataset.item.id}` }) } else{ wx.navigateTo({ url:`../detail2/detail2?id=${e.currentTarget.dataset.item.id}`, }) } }, 复制代码 这里设计了俩个 detail 和 detail2 页面，一个对应鞋子一个对应衣服，因为数据库数量较大，如果只设计一个 detail 的话，还得将详情页的尺码设计存入到一个数组中，跟颜色数组一样。但是因为数据太多，所以我就将尺码设计成固定尺寸，只设计俩个 detail 界面，通过传入的数据是否是鞋子来判断。并且通过字符串模板../detail2/detail2?id=${e.currentTarget.dataset.item.id}来将数据库中的数据项 id 跟着跳转一起传入到下个页面中。 在详情页中获取传入的 id 值并在 products 数据库查找拿到asynconLoad(options){ constid=parseInt(options.id); wx.setNavigationBarTitle({ title:'商品详情', }) let{total}=awaitproductsCollection.count() this.setData({ total:total, page:1, }) let{data}=awaitproductsCollection .where({ id:db.command.eq(id) }) .get(); this.setData({ productinfo:data }) }, 复制代码 在 detail 页面中的 onload 预加载时，拿到传入的 id 值。随后用 id 值进行查找，这里使用了 es6 新出的 async await 异步操作，能将异步操作变为同步操作。通过. where 搜索 products 数据库中满足 id 等于传入的 id 的值并取得。并用 this.setData 设置将取得的值传入 detail 界面 js 中的 data 中的 productinfo 中。 大坑提示：这里必须得注意，虽然我数据库 products 中设计的 id 值是 number 类型，但是通过字符串模板传入的永远都是字符串类型，如果拿着字符串类型的 id，用. where 查找会找不到，得到的 data 数据为空，所以得先用 parseInt 进行强制类型转化再进行比较。 最后通过得到的 data 中的 productinfo 数据，通过 wx:for 进行循环，虽然每个 productinfo 只有一个 products 数据库中的数据，但是能够实现数据与界面的分离，使得每个详情页都不相同。 总结本次代码只是程序的大致框架，在本周六周日，我会继续更新鸿星尔克微信小程序关于使用云数据库完成购物车的开发，能够从详情页中将商品添加进入购物车（虽然不知道手机预览没法添加，但是在电脑调试操作是成功的）。若本篇文章对您有帮助，请继续支持我。 下面是 gitee 源码：gitee.com/jhqaq/hon-x…[3] 。不过需要自行添加粘贴 app.json 和 project.config.json 并替换 appid 为自己的微信小程序 id。 app.json: { "pages":[ "pages/home/home", "pages/test/test", "pages/sort/sort", "pages/home1/home1", "pages/home2/home2", "pages/shopcar/shopcar", "pages/my/my", "pages/search/search", "pages/detail/detail", "pages/detail2/detail2" ], "window":{ "backgroundColor":"#F6F6F6", "backgroundTextStyle":"light", "navigationBarBackgroundColor":"#F6F6F6", "navigationBarTitleText":"鸿星尔克官方旗舰店", "navigationBarTextStyle":"black" }, "tabBar":{ "selectedColor":"#fece00", "borderStyle":"white", "backgroundColor":"#ededed", "list":[ { "text":"首页", "pagePath":"pages/home/home", "iconPath":"assets/images/tabs/home.png", "selectedIconPath":"assets/images/tabs/home-active.png" }, { "text":"分类", "pagePath":"pages/sort/sort", "iconPath":"assets/images/tabs/sort.png", "selectedIconPath":"assets/images/tabs/sort-active.png" }, { "text":"购物车", "pagePath":"pages/shopcar/shopcar", "iconPath":"assets/images/tabs/shopcar.png", "selectedIconPath":"assets/images/tabs/shopcar-active.png" }, { "text":"我的", "pagePath":"pages/my/my", "iconPath":"assets/images/tabs/my.png", "selectedIconPath":"assets/images/tabs/my-active.png" } ] }, "usingComponents":{ "van-search":"./miniprogram_npm/@vant/weapp/search/index", "van-cell":"@vant/weapp/cell/index", "van-cell-group":"@vant/weapp/cell-group/index", "van-grid":"@vant/weapp/grid/index", "van-grid-item":"@vant/weapp/grid-item/index" }, "sitemapLocation":"sitemap.json", "style":"v2" } 复制代码 project.config.json { "miniprogramRoot":"miniprogram/", "cloudfunctionRoot":"cloudfunctions/", "setting":{ "urlCheck":true, "es6":false, "enhance":true, "postcss":true, "preloadBackgroundData":false, "minified":true, "newFeature":false, "coverView":true, "nodeModules":true, "autoAudits":false, "showShadowRootInWxmlPanel":true, "scopeDataCheck":false, "uglifyFileName":false, "checkInvalidKey":true, "checkSiteMap":true, "uploadWithSourceMap":true, "compileHotReLoad":false, "lazyloadPlaceholderEnable":false, "useMultiFrameRuntime":true, "useApiHook":true, "useApiHostProcess":true, "babelSetting":{ "ignore":[], "disablePlugins":[], "outputPath":"" }, "enableEngineNative":false, "useIsolateContext":true, "userConfirmedBundleSwitch":false, "packNpmManually":false, "packNpmRelationList":[], "minifyWXSS":true, "showES6CompileOption":false }, "projectname":"weApp", "libVersion":"2.14.1", "cloudfunctionTemplateRoot":"cloudfunctionTemplate", "appid":"wxb4a42d4b7e97a817",//这里需要更换成自己的id "condition":{ "search":{ "list":[] }, "conversation":{ "list":[] }, "plugin":{ "list":[] }, "game":{ "list":[] }, "miniprogram":{ "list":[ { "id":-1, "name":"dbguide", "pathName":"pages/databaseGuide/databaseGuide" } ] } } } 复制代码 最后在云数据库中塞入一些数据就能看到效果了。 参考资料[1]https://www.cnblogs.com/temari/p/13418037.html [2]https://link.juejin.cn/?target=https%3A%2F%2Fwww.iconfont.cn [3]https://gitee.com/jhqaq/hon-xin-app 阅读原文