站長(zhǎng)資訊網(wǎng)
最近正在學(xué)習(xí)微信小程序開發(fā)，也是與兩個(gè)同學(xué)一起合作著手仿做得物APP微信小程序。這里主要分享一下我的學(xué)習(xí)過(guò)程及踩過(guò)的一些坑，希望對(duì)您有所幫助。
開發(fā)準(zhǔn)備
- 微信開發(fā)者工具
- VScode代碼編輯器
- 得物APP微信小程序
- 有贊vant組件庫(kù)
- 阿里巴巴矢量圖標(biāo)庫(kù)
- markman（取色量距）
總體架構(gòu)
- 該項(xiàng)目基于小程序云開發(fā)，使用的模板是云開發(fā)快速啟動(dòng)模板由于是個(gè)全棧項(xiàng)目，前端使用小程序所支持的wxml + wxss + js開發(fā)模式，命名采用BEM命名規(guī)范。后臺(tái)則是借助云數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)管理。【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】
項(xiàng)目中我負(fù)責(zé)的部分主要如下（一些數(shù)據(jù)為固定數(shù)據(jù)寫在config中，js文件通過(guò)module.exports暴露，需要引用時(shí)在頁(yè)面對(duì)應(yīng)js頭部引入，例const {} = require('../../../../config/buys')）。項(xiàng)目中我使用的較多vant組件，需要在構(gòu)建npm包時(shí)引入vant，詳情可見有贊vant的npm安裝。頁(yè)面使用第三方組件時(shí)須在對(duì)應(yīng)json文件中聲明，為了不做重復(fù)工作可直接在app.json中聲明。例：（"usingComponents": "van-search": "@vant/weapp/search/index"}）
|-config 對(duì)應(yīng)數(shù)據(jù) |-assem.js |-buys.js |-detail.js |-kind.js |-search.js |-pages |-buy_page |-page |-assem 篩選排序頁(yè) |-buy 購(gòu)買首頁(yè) |-detail 商品詳情頁(yè) |-kinds 品牌分類頁(yè) |-produce 鑒別簡(jiǎn)介頁(yè) |-search 搜索頁(yè)
項(xiàng)目規(guī)劃
- 在做該小程序之前，我先是分析每個(gè)頁(yè)面對(duì)應(yīng)功能，了解這款小程序的交互細(xì)節(jié)，清楚數(shù)據(jù)集合數(shù)據(jù)項(xiàng)。這樣大概可以分為分析頁(yè)面，創(chuàng)建數(shù)據(jù)集合，解構(gòu)頁(yè)面基本布局，數(shù)據(jù)綁定及跳轉(zhuǎn)四步來(lái)展開。
參照得物APP微信小程序，下面是我的小程序的tabBar。（有點(diǎn)糙，但是還能看）
"tabBar": { "selectedColor": "#000000", "borderStyle": "white", "backgroundColor": "#fff", "list": [ { "text": "購(gòu)買", "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ù)庫(kù)
云數(shù)據(jù)庫(kù)是一種NoSQL數(shù)據(jù)庫(kù)。每一張表是一個(gè)集合。 對(duì)于我的項(xiàng)目部分，我主要建立了一個(gè)商品集合。
dewu_goods 商品表 用于存儲(chǔ)創(chuàng)商品的信息 - _id - amway 是否為推薦 - brand 品牌 - buyer 已購(gòu)買人數(shù) - ctime 數(shù)據(jù)創(chuàng)建時(shí)間 - digest 詳情介紹 - img 詳情圖 - pic 商品展示圖 - kind 種類 - price 價(jià)格 - sex 適應(yīng)人群 - title 簡(jiǎn)介 - type 首頁(yè)索引
建立數(shù)據(jù)集合后需修改數(shù)據(jù)權(quán)限才可正常訪問(wèn)。
可對(duì)在數(shù)據(jù)庫(kù)中進(jìn)行這些操作，注意導(dǎo)入數(shù)據(jù)格式需要是.csv或.json文件，可先用excel表格建立數(shù)據(jù)集合如何轉(zhuǎn)化成對(duì)應(yīng)格式文件直接導(dǎo)入數(shù)據(jù)庫(kù)。
const db = wx.cloud.database() //云數(shù)據(jù)庫(kù) const dewuCollection = db.collection('dewu') //在js文件中導(dǎo)入數(shù)據(jù)集合
項(xiàng)目解構(gòu)
以下是我主要實(shí)現(xiàn)的得物APP小程序界面
接下來(lái)對(duì)每個(gè)頁(yè)面的細(xì)節(jié)進(jìn)行解構(gòu)。
購(gòu)買首頁(yè)
購(gòu)買首頁(yè)樣式
<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="搜索單號(hào)" disabled /> </view> <view class="dewu-kinds" bindtap="kinds"><image src=""></image> </view> </view> </van-sticky> <!-- van-tabs實(shí)現(xiàn)購(gòu)買頁(yè)導(dǎo)航及與內(nèi)容頁(yè)對(duì)應(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>
商品項(xiàng)van-grid-item中采用絕對(duì)定位。tips中將direction屬性設(shè)置為horizontal，可以讓宮格的內(nèi)容呈橫向排列。搜索框設(shè)置disabled屬性為禁用狀態(tài)解決單擊自動(dòng)聚焦的問(wèn)題。在使用van-grid布局時(shí)自定義每一項(xiàng)的屬性需設(shè)置use-slot屬性，否則不生效。
這個(gè)頁(yè)面布局并不復(fù)雜，不過(guò)我在寫這個(gè)布局時(shí)還是遇到了坑（感覺是自己跳進(jìn)去的 我太了）。在做dewu-hd吸頂時(shí)我是直接用van-sticky包起來(lái)實(shí)現(xiàn)，但是實(shí)際效果是tabs也需要固定在dewu-hd下面。這里不可以使用同上的方法，實(shí)際效果會(huì)使得整個(gè)van-tabs吸頂導(dǎo)致頁(yè)面無(wú)法滑動(dòng)。其實(shí)在這里只需要給van-tabs添加一個(gè)sticky屬性并且設(shè)置offset-top，注意這兩個(gè)屬性需一起使用才能生效。
獲取商品項(xiàng)
async onLoad() { this.proData() //獲取推薦數(shù)據(jù)項(xiàng) this.shoeData() //獲取鞋類數(shù)據(jù)項(xiàng) }, proData() { const {data} = await dewuCollection .where({ amway: db.command.eq('TRUE') }) .field({ //獲取指定數(shù)據(jù)項(xiàng)，提升性能 _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 }) }
綁定詳情頁(yè)
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ù)項(xiàng)id等于_id時(shí)跳轉(zhuǎn)到詳情頁(yè)且展示對(duì)應(yīng)數(shù)據(jù)。
商品詳情頁(yè)
商品詳情頁(yè)樣式
<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">請(qǐng)選擇尺碼</view> <image class="ricon" style="width:26rpx;height:26rpx;" src=""></image> </van-cell> <!-- flex布局 每一個(gè)swiper-item包含三項(xiàng) --> <view class="detail_bd"> <swiper></swiper></view> <van-goods-action> <button>立即購(gòu)買</button> </van-goods-action> </view>
整體分為detail_hd和detail_bd兩部分。自定義swiper需設(shè)置dot對(duì)應(yīng)展示圖片并更改樣式，circular屬性設(shè)置是否啟用滑塊切換動(dòng)畫，這里使用三目運(yùn)算符判斷是否添加新的樣式類名。在定義商品價(jià)格的樣式的時(shí)候可以通過(guò)first-letter偽元素來(lái)定義￥符號(hào)樣式。引用組件van-goods-action使得購(gòu)買按鈕吸底。
<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}}">請(qǐng)選擇商品</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組件，給對(duì)應(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">
