微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 6-2 課件-商品列表頁面設計

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

data:

{

goodsList:[{

goodsImage:'/images/goods1.jpg',

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

goodsPrice:88,

}]}})

打開pages/goodsList/goodsList.js頁面，定義基礎數據，包括商品的圖片、標題和價格，讀者可以自行增加商品數據。商品列表頁的布局<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數據，渲染到視圖層。自定義組件的創(chuàng)建//my-component.jsComponent({properties:{

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

//組件的內部數據

},methods:{

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

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

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

text:{

type:String,

value:'defaulttext'}

},methods:{

changeText:function(){

//更新text屬性的值

this.data.text='newtext';

}}})

由于微信小程序中組件的作用域和頁面的作用域是不同的，因此在組件內部使用setData方法更新組件的數據時，不能直接使用this.setData，而是需要使用同步方式this.data綁定的屬性名來更新數據。自定義組件的常見問題在微信小程序中，可以使用event.currentTarget來獲取事件源。問題三：如何在自定義組件中獲取事件源？在自定義組件中，如果要使用外部樣式，需要在組件的wxml文件中使用標簽將外部樣式文件引入，然后使用class屬性綁定樣式名。問題一：如何在自定義組件中使用外部樣式？在微信小程序中，可以使用getApp方法獲取到全局的App實例。通過該實例可以訪問到所有全局變量和方法。問題二：如何在自定義組件中使用全局變量？0201常見問題0304在自定義組件中，可以直接使用template模板來實現組件的復用。問題四：如何在自定義組件中使用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中定義對外的屬性列表，用來接收外界傳遞到組件中的數據。rate定義評價分數，starsize定義評價星星的大小，fontsize定義評價分數的字體大小，fontcolor定義評價分數的字體顏色，istext用于判斷給出的評價分數是否為數字。自定義組件實例{

"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