微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）課件 6-2 課件-商品列表頁(yè)面設(shè)計(jì)

項(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