最近正在學(xué)習(xí)微信小程序開發(fā)，也是與兩個同學(xué)一起合作著手仿做得物APP微信小程序。這里主要分享一下我的學(xué)習(xí)過程及踩過的一些坑，希望對您有所幫助。

開發(fā)準(zhǔn)備

• 微信開發(fā)者工具
• VScode代碼編輯器
• 得物APP微信小程序
• 有贊vant組件庫
• 阿里巴巴矢量圖標(biāo)庫
• markman（取色量距）

總體架構(gòu)

• 該項目基于小程序云開發(fā)，使用的模板是云開發(fā)快速啟動模板由于是個全棧項目，前端使用小程序所支持的wxml + wxss + js開發(fā)模式，命名采用BEM命名規(guī)范。后臺則是借助云數(shù)據(jù)庫進(jìn)行數(shù)據(jù)管理。【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

項目中我負(fù)責(zé)的部分主要如下（一些數(shù)據(jù)為固定數(shù)據(jù)寫在config中，js文件通過module.exports暴露，需要引用時在頁面對應(yīng)js頭部引入，例const {} = require('../../../../config/buys')）。項目中我使用的較多vant組件，需要在構(gòu)建npm包時引入vant，詳情可見有贊vant的npm安裝。頁面使用第三方組件時須在對應(yīng)json文件中聲明，為了不做重復(fù)工作可直接在app.json中聲明。例：（"usingComponents": "van-search": "@vant/weapp/search/index"}）

    |-config  對應(yīng)數(shù)據(jù)         |-assem.js            |-buys.js             |-detail.js           |-kind.js             |-search.js       |-pages         |-buy_page             |-page                 |-assem   篩選排序頁                 |-buy     購買首頁                 |-detail  商品詳情頁                 |-kinds   品牌分類頁                 |-produce 鑒別簡介頁                 |-search  搜索頁

項目規(guī)劃

• 在做該小程序之前，我先是分析每個頁面對應(yīng)功能，了解這款小程序的交互細(xì)節(jié)，清楚數(shù)據(jù)集合數(shù)據(jù)項。這樣大概可以分為分析頁面，創(chuàng)建數(shù)據(jù)集合，解構(gòu)頁面基本布局，數(shù)據(jù)綁定及跳轉(zhuǎn)四步來展開。

參照得物APP微信小程序，下面是我的小程序的tabBar。（有點(diǎn)糙，但是還能看）

  "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": "洗護(hù)",         "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"       }     ]   },

云數(shù)據(jù)庫

云數(shù)據(jù)庫是一種NoSQL數(shù)據(jù)庫。每一張表是一個集合。 對于我的項目部分，我主要建立了一個商品集合。

dewu_goods 商品表 用于存儲創(chuàng)商品的信息      - _id      - amway  是否為推薦     - brand  品牌     - buyer  已購買人數(shù)     - ctime  數(shù)據(jù)創(chuàng)建時間     - digest 詳情介紹     - img    詳情圖     - pic    商品展示圖     - kind   種類     - price  價格     - sex    適應(yīng)人群     - title  簡介     - type   首頁索引

建立數(shù)據(jù)集合后需修改數(shù)據(jù)權(quán)限才可正常訪問。

可對在數(shù)據(jù)庫中進(jìn)行這些操作，注意導(dǎo)入數(shù)據(jù)格式需要是.csv或.json文件，可先用excel表格建立數(shù)據(jù)集合如何轉(zhuǎn)化成對應(yīng)格式文件直接導(dǎo)入數(shù)據(jù)庫。

const db = wx.cloud.database() //云數(shù)據(jù)庫 const dewuCollection = db.collection('dewu') //在js文件中導(dǎo)入數(shù)據(jù)集合

項目解構(gòu)

以下是我主要實(shí)現(xiàn)的得物APP小程序界面

接下來對每個頁面的細(xì)節(jié)進(jìn)行解構(gòu)。

購買首頁

購買首頁樣式

<view class="page">   <!-- 使用van-sticky設(shè)置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實(shí)現(xiàn)購買頁導(dǎo)航及與內(nèi)容頁對應(yīng) -->   <van-tabs class="dewu-tabs">     <van-tab title="推薦">       <view class="dewu-tip">         <view class="dewu-tip-img-hd"><image src=""></image>         </view>         <!-- 使用van-grid布局設(shè)置邊框隱藏快速定位 -->         <van-grid>           <van-grid-item use-slot>             <image style="" src=""></image>             <text>正品保障</text>           </van-grid-item>         </van-grid>       </view>       <view class="van-items">         <van-grid class="van-grid-bd">         <!-- grid布局自定義van-grid-item樣式 -->           <van-grid-item use-slot>             <view class="item-img"><image src=""></image></view>             <view class="item-text">               <span>{{}}</span>             </view>           </van-grid-item>         </van-grid>       </view>     </van-tab>   </van-tabs> </view>

商品項van-grid-item中采用絕對定位。tips中將direction屬性設(shè)置為horizontal，可以讓宮格的內(nèi)容呈橫向排列。搜索框設(shè)置disabled屬性為禁用狀態(tài)解決單擊自動聚焦的問題。在使用van-grid布局時自定義每一項的屬性需設(shè)置use-slot屬性，否則不生效。

這個頁面布局并不復(fù)雜，不過我在寫這個布局時還是遇到了坑（感覺是自己跳進(jìn)去的 我太了）。在做dewu-hd吸頂時我是直接用van-sticky包起來實(shí)現(xiàn)，但是實(shí)際效果是tabs也需要固定在dewu-hd下面。這里不可以使用同上的方法，實(shí)際效果會使得整個van-tabs吸頂導(dǎo)致頁面無法滑動。其實(shí)在這里只需要給van-tabs添加一個sticky屬性并且設(shè)置offset-top，注意這兩個屬性需一起使用才能生效。

獲取商品項

  async onLoad() {      this.proData()   //獲取推薦數(shù)據(jù)項      this.shoeData()  //獲取鞋類數(shù)據(jù)項   },   proData() {      const {data} = await dewuCollection     .where({       amway: db.command.eq('TRUE')     })     .field({          //獲取指定數(shù)據(jù)項，提升性能       _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屬性唯一，當(dāng)設(shè)定數(shù)據(jù)項id等于_id時跳轉(zhuǎn)到詳情頁且展示對應(yīng)數(shù)據(jù)。

商品詳情頁

商品詳情頁樣式

<view class="page"> <!-- 頭部 滑塊及標(biāo)題 -->   <view class="detail_hd">     <swiper class="swiper__hd">         <swiper-item class="swiper_hd"></swiper-item>     </swiper>     <view class="dots1">         <view class="{{current==index?'active':''}}"></view>     </view>     <view class="detail_hd-title">{{img.digest}}</view>     <view class="detail_hd-price">       <text id="p2">￥{{img.price}}</text>     </view>   </view>   <van-cell class="size" bind:click="showPopup1">     <view class="size-l">選擇尺碼</view>     <view class="size-r">請選擇尺碼</view>     <image class="ricon" style="width:26rpx;height:26rpx;" src=""></image>   </van-cell>      <!-- flex布局 每一個swiper-item包含三項 -->   <view class="detail_bd">   <swiper></swiper></view>    <van-goods-action>     <button>立即購買</button>   </van-goods-action> </view>

整體分為detail_hd和detail_bd兩部分。自定義swiper需設(shè)置dot對應(yīng)展示圖片并更改樣式，circular屬性設(shè)置是否啟用滑塊切換動畫，這里使用三目運(yùn)算符判斷是否添加新的樣式類名。在定義商品價格的樣式的時候可以通過first-letter偽元素來定義￥符號樣式。引用組件van-goods-action使得購買按鈕吸底。

<van-popup closeable position="bottom" custom-style="height: 75%">     <view class="detail_size-hd">       <view class="detail_size-hd-img">         <image bindtap="previewImage" mode="aspectFit" src="{{img.pic}}">         </image>       </view>       <view class="detail_size-hd-price">         <text style="font-size:25rpx;">￥</text>         <text wx:if="{{activeSizeIndex==-1}}">--</text>         <text wx:if="{{activeSizeIndex==index}}">{{item.price}}</text>       </view>       <view>         <image src=""></image>         <text wx:if="{{activeSizeIndex==-1}}">請選擇商品</text>         <text wx:if="{{activeSizeIndex==index}}">已選 {{item.size}}</text>       </view>     </view>     <!-- 尺碼布局 -->     <view class="detail_size-bd">       <van-grid square gutter="10">         <van-grid-item>           <view class="size">             <text id="p3">{{item.size}}</text>             <text id="p4">￥{{item.price}}</text>           </view>         </van-grid-item>       </van-grid>     </view>     <view>       <button>{{}}</button>     </view>   </van-popup>

使用van-popup組件，給對應(yīng)標(biāo)簽設(shè)置事件即可綁定彈出。例：<van-cell bind:click="showPopup"></van-cell>。三目運(yùn)算符設(shè)置默認(rèn)樣式并且控制選中邊框樣式，設(shè)置closeable屬性啟用關(guān)閉按鈕。square設(shè)置van-grid-item為方形，gutter設(shè)置格子間距。

<van-sticky sticky offset-top="{{ 180 }}">       <view class="head">         <view class="detail_produce-hd">