微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 項目6 產品項目模塊開發(fā)

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

cateList:[{

id:'goods1',

banner:'/images/ban1.jpg',

catename:"臘梅鮮花",

goods_list:[{

item_img:'/images/goods1.jpg',

item_title:'澳洲臘梅'

}]

}]

打開pages/goodsCate/goodsCate.js文件的data對象中定義基礎數(shù)據(jù)cateList，主要用于展示產品分類和產品信息。商品分類區(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>

打開pages/goodsCate/goodsCate.wxml文件，編輯左邊分類欄。商品分類區(qū)域商品分類頁面滑動切換分類點擊分類跳轉列表滑動效果

在實現(xiàn)商城小程序的商品分類頁面，可以是普通分類列表，也可以使用滾動列表效果，包括三種功能：列表滑動效果、滑動切換分類以及點擊分類跳轉到相應的分類位置。商品分類區(qū)域圖wx.getWindowInfo()參數(shù)屬性類別說明pixelRationumber設備像素比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可以滾動的窗口高度。商品分類區(qū)域 Page({

onLoad:function(options){

varthat=this

constwindowInfo=wx.getWindowInfo()

that.setData({

windowHeight:windowInfo.windowHeight

})

}

})

在本例中，使用windowHeight屬性獲取scroll-view可以滾動的窗口高度。商品分類展示區(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>

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

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

謝

觀

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

data:

{

goodsList:[{

goodsImage:'/images/goods1.jpg',

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

goodsPrice:88,

}]}})

打開pages/goodsList/goodsList.js頁面，定義基礎數(shù)據(jù)，包括商品的圖片、標題和價格，讀者可以自行增加商品數(shù)據(jù)。商品列表頁的布局<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>

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

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

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

},methods:{

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

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

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

text:{

type:String,

value:'defaulttext'}

},methods:{

changeText:function(){

//更新text屬性的值

this.data.text='newtext';

}}})

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

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

打開components/stars/stars.wxml，在json文件中進行自定義組件聲明component字段設為true。自定義組件實例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

}

}})

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

"usingComponents":

{

"stars":

"/components/stars/stars"

}}

打開pages/goodsList/goodsList.json頁面，引入星星組件。自定義組件實例<view

class="stars-cart">

<stars

rate="7"

starsize="24"

fontsize="35"></stars>

<image

class="cart"

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

打開pages/goodsList/goodsList.wxml頁面，在

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

謝

觀

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

'/images/goods2.jpg',

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

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

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

阿里巴巴提供了iconfont圖標庫?？梢栽诠俜骄W站上將需要的圖標放入購物車，然后iconfont會為你打包你購物車里的圖標，自動生成一種新的字體，然后可以選擇下載到本地，在小程序項目中引入這種字體，這樣即便沒有網絡的情況也可以使用圖標。使用iconfont圖標庫

下載字體圖標的css文件后，將css文件里的內容可以放入到小程序項目的公共樣式文件app.wxss中。具體操作如下圖所示。

picker組件的使用屬性類型默認值必填說明header-textstring

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

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

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

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

當range是一個ObjectArray時，通過range-key來指定Object中key的值作為選擇器顯示內容valuenumber0表示選擇了range中的第幾個（下標從0開始）bindchangeeventhandle

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

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

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

class="goods-detail">

<block>

<image

mode="widthFix"

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

</block></view>

商品詳情頁面的長度不宜過長，頁面長度過長會導致頁面加載速度變慢，特別是在手機端，會消耗大量的手機流量，也會讓用戶產生視覺疲勞。詳情頁切圖是指將制作好的一整張商品詳情頁使用工具進行切片，分割成一小張一小張