微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）課件 項(xiàng)目6 產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)

項(xiàng)目六產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)任務(wù)一商品分類視圖層設(shè)計(jì)Productclassificationviewlayerdesign在小程序開(kāi)發(fā)中，商品模塊一般包括商品分類列表、商品列表、商品詳情、商品評(píng)價(jià)等，小程序提供了各類API和組件為實(shí)現(xiàn)商品模塊提供了便利。掌握了這些API和組件的使用，即可完成商品模塊功能的開(kāi)發(fā)。本項(xiàng)目將通過(guò)“梅園-商品頁(yè)面”，講解商品分類的布局、組件的創(chuàng)建與使用、picker組件等各類商品頁(yè)面所需要的功能。項(xiàng)目六產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)任務(wù)描述定義基礎(chǔ)數(shù)據(jù)

cateList:[{

id:'goods1',

banner:'/images/ban1.jpg',

catename:"臘梅鮮花",

goods_list:[{

item_img:'/images/goods1.jpg',

item_title:'澳洲臘梅'

}]

}]

打開(kāi)pages/goodsCate/goodsCate.js文件的data對(duì)象中定義基礎(chǔ)數(shù)據(jù)cateList，主要用于展示產(chǎn)品分類和產(chǎn)品信息。商品分類區(qū)域<scroll-viewclass="left"scroll-with-animation="true"scroll-y

style="height:{{windowHeight}}px;">

<viewwx:for="{{cateList}}"wx:key="id"bindtap="handleCategory"

data-index="{{index}}">

<textclass="cate-name{{leftIndex==index?'active':''}}">{{item.catename}}</text></view></scroll-view>

打開(kāi)pages/goodsCate/goodsCate.wxml文件，編輯左邊分類欄。商品分類區(qū)域商品分類頁(yè)面滑動(dòng)切換分類點(diǎn)擊分類跳轉(zhuǎn)列表滑動(dòng)效果

在實(shí)現(xiàn)商城小程序的商品分類頁(yè)面，可以是普通分類列表，也可以使用滾動(dòng)列表效果，包括三種功能：列表滑動(dòng)效果、滑動(dòng)切換分類以及點(diǎn)擊分類跳轉(zhuǎn)到相應(yīng)的分類位置。商品分類區(qū)域圖wx.getWindowInfo()參數(shù)屬性類別說(shuō)明pixelRationumber設(shè)備像素比screenWidthnumber屏幕寬度，單位pxscreenHeightnumber屏幕高度，單位pxwindowWidthnumber可使用窗口寬度，單位pxwindowHeightnumber可使用窗口高度，單位pxstatusBarHeightnumber狀態(tài)欄的高度，單位pxsafeAreaObject在豎屏正方向下的安全區(qū)域。left、right、top、bottom、width、heightscreenTopnumber窗口上邊緣的y值

小程序提供了wx.getWindowInfo()和wx.getSystemInfo(Objectobject)接口可以獲取系統(tǒng)信息。windowHeight屬性可以獲取可使用窗口高度，單位px。在本例中，使用windowHeight屬性獲取scroll-view可以滾動(dòng)的窗口高度。商品分類區(qū)域 Page({

onLoad:function(options){

varthat=this

constwindowInfo=wx.getWindowInfo()

that.setData({

windowHeight:windowInfo.windowHeight

})

}

})

在本例中，使用windowHeight屬性獲取scroll-view可以滾動(dòng)的窗口高度。商品分類展示區(qū)域<scroll-viewclass="right"bindscroll="rightScroll"scroll-with-animation="true"scroll-into-view="{{rightView}}"scroll-ystyle="height:{{windowHeight}}px;"><viewclass="content"wx:for="{{cateList}}"wx:key="id"id="{{item.id}}"><viewclass="content-image"><imagesrc="{{item.banner}}"></image></view><viewclass="cate-list"><viewclass="cate-title">{{item.catename}}</view><viewclass="goods-list"><viewclass="goods-list-item"wx:for="{{item.cate_list}}"wx:key="id"><imagesrc="{{item.item_img}}"></image><text>{{item.item_title}}</text></view></view></view></view></scroll-view>

打開(kāi)pages/goodsCate/goodsCate.wxml文件，編輯右邊商品區(qū)域。商品分類列表滾動(dòng)constquery=wx.createSelectorQuery()query.select('#the-id').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res){res[0].top//#the-id節(jié)點(diǎn)的上邊界坐標(biāo)res[1].scrollTop//顯示區(qū)域的豎直滾動(dòng)位置})

在右側(cè)商品區(qū)域，當(dāng)滾動(dòng)條滾動(dòng)到其它分類的商品時(shí)，左邊的分類名稱仍然處于原來(lái)的名稱。在小程序中，可以通過(guò)wx.createSelectorQuery()獲取頁(yè)面元素，返回一個(gè)SelectorQuery對(duì)象實(shí)例。boundingClientRect()添加節(jié)點(diǎn)的布局位置的查詢請(qǐng)求，相對(duì)于顯示區(qū)域，以像素為單位。感

謝

觀

看THANK項(xiàng)目六產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)任務(wù)二商品列表頁(yè)面設(shè)計(jì)Productlistpagedesign相信大家在進(jìn)行商城商品列表設(shè)計(jì)的時(shí)候，會(huì)有關(guān)于商品列表的相關(guān)頁(yè)面，本章節(jié)主要講述商品列表頁(yè)設(shè)計(jì)與開(kāi)發(fā)，商品列表頁(yè)的框架如何選擇，如何設(shè)計(jì)。所謂商品列表，為固定列表項(xiàng)的樣式后，根據(jù)分頁(yè)數(shù)據(jù)顯示的多少，使用列表渲染方式，按照固定樣式依次展示的頁(yè)面。項(xiàng)目六產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)任務(wù)描述商品列表頁(yè)的布局Page({

data:

{

goodsList:[{

goodsImage:'/images/goods1.jpg',

goodsTitle:'大花澳洲臘梅鮮花復(fù)古色云南昆明基地直發(fā)鮮花家用辦公室水養(yǎng)',

goodsPrice:88,

}]}})

打開(kāi)pages/goodsList/goodsList.js頁(yè)面，定義基礎(chǔ)數(shù)據(jù)，包括商品的圖片、標(biāo)題和價(jià)格，讀者可以自行增加商品數(shù)據(jù)。商品列表頁(yè)的布局<navigatorurl="/pages/goodsDetail/goodsDetail"><view

class='goods-item'

wx:for="{{goodsList}}"

wx:key="id">

<image

class='goods-img'

src='{{item.goodsImage}}'></image><view

class='goods-info'>

<text

class='goods-title'>{{item.goodsTitle}}</text>

<text

class='goods-price'>￥{{item.goodsPrice}}</text>

<view

class="stars-cart">

<image

class="cart"

src="/images/cart-active.png"></image></view></view></view></navigator>

打開(kāi)pages/goodsList/goodsList.wxml頁(yè)面，作為商品列表頁(yè)，使用wx:for循環(huán)讀取goodsList數(shù)據(jù)，渲染到視圖層。自定義組件的創(chuàng)建//my-component.jsComponent({properties:{

//組件的屬性},data:{

//組件的內(nèi)部數(shù)據(jù)

},methods:{

//組件的方法}})//my-component.wxml

在微信小程序中，自定義組件的基本結(jié)構(gòu)包含兩個(gè)文件：一個(gè)是js文件，用于管理組件的邏輯，一個(gè)是wxml文件，用于管理組件的視圖。其中，js文件必須以Component函數(shù)定義一個(gè)組件，并將該函數(shù)暴露出去；wxml文件則需要使用標(biāo)簽包裹起來(lái)，并設(shè)置name屬性作為組件名稱。自定義組件的創(chuàng)建定義段類型必填描述propertiesObjectMap否組件的對(duì)外屬性，是屬性名到屬性設(shè)置的映射表dataObject否組件的內(nèi)部數(shù)據(jù)，和properties一同用于組件的模板渲染observersObject否組件數(shù)據(jù)字段監(jiān)聽(tīng)器，用于監(jiān)聽(tīng)properties和data的變化methodsObject否組件的方法，包括事件響應(yīng)函數(shù)和任意的自定義方法behaviorsStringArray否類似于mixins和traits的組件間代碼復(fù)用機(jī)制createdFunction否組件生命周期函數(shù)-在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行，注意此時(shí)不能調(diào)用setDataattachedFunction否組件生命周期函數(shù)-在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行)readyFunction否組件生命周期函數(shù)-在組件布局完成后執(zhí)行)movedFunction否組件生命周期函數(shù)-在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹(shù)另一個(gè)位置時(shí)執(zhí)行)detachedFunction否組件生命周期函數(shù)-在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行)relationsObject否組件間關(guān)系定義externalClassesStringArray否組件接受的外部樣式類optionsObjectMap否一些選項(xiàng)（文檔中介紹相關(guān)特性時(shí)會(huì)涉及具體的選項(xiàng)設(shè)置，這里暫不列舉）lifetimesObject否組件生命周期聲明對(duì)象pageLifetimesObject否組件所在頁(yè)面的生命周期聲明對(duì)象definitionFilterFunction否定義段過(guò)濾器，用于自定義組件擴(kuò)展

Component(Objectobject)創(chuàng)建自定義組件，接受一個(gè)Object類型的參數(shù)。自定義組件的創(chuàng)建Component({properties:{

text:{

type:String,

value:'defaulttext'}

},methods:{

changeText:function(){

//更新text屬性的值

this.data.text='newtext';

}}})

由于微信小程序中組件的作用域和頁(yè)面的作用域是不同的，因此在組件內(nèi)部使用setData方法更新組件的數(shù)據(jù)時(shí)，不能直接使用this.setData，而是需要使用同步方式this.data綁定的屬性名來(lái)更新數(shù)據(jù)。自定義組件的常見(jiàn)問(wèn)題在微信小程序中，可以使用event.currentTarget來(lái)獲取事件源。問(wèn)題三：如何在自定義組件中獲取事件源？在自定義組件中，如果要使用外部樣式，需要在組件的wxml文件中使用標(biāo)簽將外部樣式文件引入，然后使用class屬性綁定樣式名。問(wèn)題一：如何在自定義組件中使用外部樣式？在微信小程序中，可以使用getApp方法獲取到全局的App實(shí)例。通過(guò)該實(shí)例可以訪問(wèn)到所有全局變量和方法。問(wèn)題二：如何在自定義組件中使用全局變量？0201常見(jiàn)問(wèn)題0304在自定義組件中，可以直接使用template模板來(lái)實(shí)現(xiàn)組件的復(fù)用。問(wèn)題四：如何在自定義組件中使用template模板？自定義組件實(shí)例

類似于頁(yè)面，一個(gè)自定義組件由json、wxml、wxss和js4個(gè)文件組成。要編寫(xiě)一個(gè)自定義組件，使用右鍵創(chuàng)建componet文件夾，此文件夾可以放置項(xiàng)目的多個(gè)組件。新建stars文件夾用于星星組件，并創(chuàng)建json、wxml、wxss、js這4個(gè)文件。如圖所示。

打開(kāi)components/stars/stars.wxml，在json文件中進(jìn)行自定義組件聲明component字段設(shè)為true。自定義組件實(shí)例Component({

properties:

{

rate:{

type:Number,

value:0

},

starsize:{

type:Number,value:20

},

fontsize:{

type:Number,

value:20

},

fontcolor:{

type:String,

value:"#ccc"

},

istext:{type:Boolean,

value:true

}

}})

打開(kāi)components/stars/stars.js，在properties中定義對(duì)外的屬性列表，用來(lái)接收外界傳遞到組件中的數(shù)據(jù)。rate定義評(píng)價(jià)分?jǐn)?shù)，starsize定義評(píng)價(jià)星星的大小，fontsize定義評(píng)價(jià)分?jǐn)?shù)的字體大小，fontcolor定義評(píng)價(jià)分?jǐn)?shù)的字體顏色，istext用于判斷給出的評(píng)價(jià)分?jǐn)?shù)是否為數(shù)字。自定義組件實(shí)例{

"usingComponents":

{

"stars":

"/components/stars/stars"

}}

打開(kāi)pages/goodsList/goodsList.json頁(yè)面，引入星星組件。自定義組件實(shí)例<view

class="stars-cart">

<stars

rate="7"

starsize="24"

fontsize="35"></stars>

<image

class="cart"

src="/images/cart-active.png"></image></view>

打開(kāi)pages/goodsList/goodsList.wxml頁(yè)面，在

class="stars-cart"的視圖里添加上星星組件。并傳入分值為7，星星大小為24，分?jǐn)?shù)字體大小為35的三個(gè)參數(shù)，測(cè)試星星組件的使用。代碼如下所示。感

謝

觀

看THANK項(xiàng)目六產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)任務(wù)三商品詳情頁(yè)面設(shè)計(jì)Productdetailspagedesign商品詳情頁(yè)是對(duì)商品進(jìn)行詳細(xì)描述介紹的頁(yè)面，詳情頁(yè)的設(shè)計(jì)極有可能會(huì)對(duì)用戶的購(gòu)買行為產(chǎn)生直接的影響。因此，商品詳情頁(yè)面的設(shè)計(jì)在美觀實(shí)用的基礎(chǔ)上，將表達(dá)的信息盡可能用直觀的視角展現(xiàn)出來(lái)。項(xiàng)目六產(chǎn)品項(xiàng)目模塊開(kāi)發(fā)任務(wù)描述商品詳情頁(yè)輪播圖Page({data:{swiperList:['/images/goods1.jpg',

'/images/goods2.jpg',

'/images/goods3.jpg'],indicatorDots:true,autoplay:true,interval:2000,duration:1000,currentIndex:0//定義輪播圖當(dāng)前的索引值}

商品詳情頁(yè)的輪播圖用于播放商品的部分細(xì)節(jié)圖片，可以獲取商品輪播圖的數(shù)量以及當(dāng)前播放的圖片索引值。實(shí)現(xiàn)輪播圖切換時(shí)觸發(fā)Change事件，獲取當(dāng)前輪播圖的索引值。打開(kāi)pages/goodsDetail/goodsDetail.js在data對(duì)象中定義輪播圖所需要的基礎(chǔ)數(shù)據(jù)。商品詳情頁(yè)標(biāo)題信息

打開(kāi)pages/goodsDetail/goodsDetail.wxml頁(yè)面，實(shí)現(xiàn)商品詳情頁(yè)的標(biāo)題信息可以分成兩大容器，goodsinfo-top子容器包括了商品標(biāo)題和轉(zhuǎn)發(fā)圖標(biāo)。goods-sale子容器包括了價(jià)格和優(yōu)惠標(biāo)簽兩部分。使用iconfont圖標(biāo)庫(kù)

阿里巴巴提供了iconfont圖標(biāo)庫(kù)?？梢栽诠俜骄W(wǎng)站上將需要的圖標(biāo)放入購(gòu)物車，然后iconfont會(huì)為你打包你購(gòu)物車?yán)锏膱D標(biāo)，自動(dòng)生成一種新的字體，然后可以選擇下載到本地，在小程序項(xiàng)目中引入這種字體，這樣即便沒(méi)有網(wǎng)絡(luò)的情況也可以使用圖標(biāo)。使用iconfont圖標(biāo)庫(kù)

下載字體圖標(biāo)的css文件后，將css文件里的內(nèi)容可以放入到小程序項(xiàng)目的公共樣式文件app.wxss中。具體操作如下圖所示。

picker組件的使用屬性類型默認(rèn)值必填說(shuō)明header-textstring

否選擇器的標(biāo)題，僅安卓可用modestringselector否選擇器類型，包括五種類型。selector：普通選擇器，multiSelector：多列選擇器，time：時(shí)間選擇器，date：日期選擇器，region：省市區(qū)選擇器。disabledbooleanfalse否是否禁用bindcanceleventhandle

否取消選擇時(shí)觸發(fā)表picker組件的屬性

picker從底部彈起的滾動(dòng)選擇器。picker選擇器分為五種普通選擇器、多列選擇器、時(shí)間選擇器、日期選擇器和省市區(qū)選擇器。

picker組件的使用表mode屬性值屬性類型必填說(shuō)明rangearray/objectarray[]mode為selector或multiSelector時(shí)，range有效range-keystring

當(dāng)range是一個(gè)ObjectArray時(shí)，通過(guò)range-key來(lái)指定Object中key的值作為選擇器顯示內(nèi)容valuenumber0表示選擇了range中的第幾個(gè)（下標(biāo)從0開(kāi)始）bindchangeeventhandle

value改變時(shí)觸發(fā)change事件，event.detail={value}

除了上述通用的屬性，對(duì)于不同的mode，picker擁有不同的屬性。普通選擇器：mode=selector。picker組件的使用Page({data:{pickerIndex:0,array:['紅色','黃色','粉色','白色'],arraycolor:['#FF0000','#FFFF00','#FFC0CB','#FFFFFF'],}})

接下來(lái)，使用picker組件，講解普通選擇器的使用方法與步驟。實(shí)現(xiàn)效果如下圖所示。商品詳情圖的實(shí)現(xiàn)<view

class="goods-detail">

<block>

<image

mode="widthFix"

src="/images/goodsDetail.jpg"></image>

</block></view>

商品詳情頁(yè)面的長(zhǎng)度不宜過(guò)長(zhǎng)，頁(yè)面長(zhǎng)度過(guò)長(zhǎng)會(huì)導(dǎo)致頁(yè)面加載速度變慢，特別是在手機(jī)端，會(huì)消耗大量的手機(jī)流量，也會(huì)讓用戶產(chǎn)生視覺(jué)疲勞。詳情頁(yè)切圖是指將制作好的一整張商品詳情頁(yè)使用工具進(jìn)行切片，分割成一小張一小張