微信小程序开发项目实战（微课版）课件 6-2 课件-商品列表页面设计

项目六产品项目模块开发任务二商品列表页面设计Productlistpagedesign相信大家在进行商城商品列表设计的时候，会有关于商品列表的相关页面，本章节主要讲述商品列表页设计与开发，商品列表页的框架如何选择，如何设计。所谓商品列表，为固定列表项的样式后，根据分页数据显示的多少，使用列表渲染方式，按照固定样式依次展示的页面。项目六产品项目模块开发任务描述商品列表页的布局Page({

data:

{

goodsList:[{

goodsImage:'/images/goods1.jpg',

goodsTitle:'大花澳洲腊梅鲜花复古色云南昆明基地直发鲜花家用办公室水养',

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循环读取goodsList数据，渲染到视图层。自定义组件的创建//my-component.jsComponent({properties:{

//组件的属性},data:{

//组件的内部数据

},methods:{

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

在微信小程序中，自定义组件的基本结构包含两个文件：一个是js文件，用于管理组件的逻辑，一个是wxml文件，用于管理组件的视图。其中，js文件必须以Component函数定义一个组件，并将该函数暴露出去；wxml文件则需要使用标签包裹起来，并设置name属性作为组件名称。自定义组件的创建定义段类型必填描述propertiesObjectMap否组件的对外属性，是属性名到属性设置的映射表dataObject否组件的内部数据，和properties一同用于组件的模板渲染observersObject否组件数据字段监听器，用于监听properties和data的变化methodsObject否组件的方法，包括事件响应函数和任意的自定义方法behaviorsStringArray否类似于mixins和traits的组件间代码复用机制createdFunction否组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用setDataattachedFunction否组件生命周期函数-在组件实例进入页面节点树时执行)readyFunction否组件生命周期函数-在组件布局完成后执行)movedFunction否组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)detachedFunction否组件生命周期函数-在组件实例被从页面节点树移除时执行)relationsObject否组件间关系定义externalClassesStringArray否组件接受的外部样式类optionsObjectMap否一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）lifetimesObject否组件生命周期声明对象pageLifetimesObject否组件所在页面的生命周期声明对象definitionFilterFunction否定义段过滤器，用于自定义组件扩展

Component(Objectobject)创建自定义组件，接受一个Object类型的参数。自定义组件的创建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个文件组成。要编写一个自定义组件，使用右键创建componet文件夹，此文件夹可以放置项目的多个组件。新建stars文件夹用于星星组件，并创建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