微信小程序开发项目实战（微课版）课件 项目6 产品项目模块开发

项目六产品项目模块开发任务一商品分类视图层设计Productclassificationviewlayerdesign在小程序开发中，商品模块一般包括商品分类列表、商品列表、商品详情、商品评价等，小程序提供了各类API和组件为实现商品模块提供了便利。掌握了这些API和组件的使用，即可完成商品模块功能的开发。本项目将通过“梅园-商品页面”，讲解商品分类的布局、组件的创建与使用、picker组件等各类商品页面所需要的功能。项目六产品项目模块开发任务描述定义基础数据

cateList:[{

id:'goods1',

banner:'/images/ban1.jpg',

catename:"腊梅鲜花",

goods_list:[{

item_img:'/images/goods1.jpg',

item_title:'澳洲腊梅'

}]

}]

打开pages/goodsCate/goodsCate.js文件的data对象中定义基础数据cateList，主要用于展示产品分类和产品信息。商品分类区域<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文件，编辑左边分类栏。商品分类区域商品分类页面滑动切换分类点击分类跳转列表滑动效果

在实现商城小程序的商品分类页面，可以是普通分类列表，也可以使用滚动列表效果，包括三种功能：列表滑动效果、滑动切换分类以及点击分类跳转到相应的分类位置。商品分类区域图wx.getWindowInfo()参数属性类别说明pixelRationumber设备像素比screenWidthnumber屏幕宽度，单位pxscreenHeightnumber屏幕高度，单位pxwindowWidthnumber可使用窗口宽度，单位pxwindowHeightnumber可使用窗口高度，单位pxstatusBarHeightnumber状态栏的高度，单位pxsafeAreaObject在竖屏正方向下的安全区域。left、right、top、bottom、width、heightscreenTopnumber窗口上边缘的y值

小程序提供了wx.getWindowInfo()和wx.getSystemInfo(Objectobject)接口可以获取系统信息。windowHeight属性可以获取可使用窗口高度，单位px。在本例中，使用windowHeight属性获取scroll-view可以滚动的窗口高度。商品分类区域 Page({

onLoad:function(options){

varthat=this

constwindowInfo=wx.getWindowInfo()

that.setData({

windowHeight:windowInfo.windowHeight

})

}

})

在本例中，使用windowHeight属性获取scroll-view可以滚动的窗口高度。商品分类展示区域<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文件，编辑右边商品区域。商品分类列表滚动constquery=wx.createSelectorQuery()query.select('#the-id').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res){res[0].top//#the-id节点的上边界坐标res[1].scrollTop//显示区域的竖直滚动位置})

在右侧商品区域，当滚动条滚动到其它分类的商品时，左边的分类名称仍然处于原来的名称。在小程序中，可以通过wx.createSelectorQuery()获取页面元素，返回一个SelectorQuery对象实例。boundingClientRect()添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。感

谢

观

看THANK项目六产品项目模块开发任务二商品列表页面设计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="/images/cart-active.png"></image></view>

打开pages/goodsList/goodsList.wxml页面，在

class="stars-cart"的视图里添加上星星组件。并传入分值为7，星星大小为24，分数字体大小为35的三个参数，测试星星组件的使用。代码如下所示。感

谢

观

看THANK项目六产品项目模块开发任务三商品详情页面设计Productdetailspagedesign商品详情页是对商品进行详细描述介绍的页面，详情页的设计极有可能会对用户的购买行为产生直接的影响。因此，商品详情页面的设计在美观实用的基础上，将表达的信息尽可能用直观的视角展现出来。项目六产品项目模块开发任务描述商品详情页轮播图Page({data:{swiperList:['/images/goods1.jpg',

'/images/goods2.jpg',

'/images/goods3.jpg'],indicatorDots:true,autoplay:true,interval:2000,duration:1000,currentIndex:0//定义轮播图当前的索引值}

商品详情页的轮播图用于播放商品的部分细节图片，可以获取商品轮播图的数量以及当前播放的图片索引值。实现轮播图切换时触发Change事件，获取当前轮播图的索引值。打开pages/goodsDetail/goodsDetail.js在data对象中定义轮播图所需要的基础数据。商品详情页标题信息

打开pages/goodsDetail/goodsDetail.wxml页面，实现商品详情页的标题信息可以分成两大容器，goodsinfo-top子容器包括了商品标题和转发图标。goods-sale子容器包括了价格和优惠标签两部分。使用iconfont图标库

阿里巴巴提供了iconfont图标库。可以在官方网站上将需要的图标放入购物车，然后iconfont会为你打包你购物车里的图标，自动生成一种新的字体，然后可以选择下载到本地，在小程序项目中引入这种字体，这样即便没有网络的情况也可以使用图标。使用iconfont图标库

下载字体图标的css文件后，将css文件里的内容可以放入到小程序项目的公共样式文件app.wxss中。具体操作如下图所示。

picker组件的使用属性类型默认值必填说明header-textstring

否选择器的标题，仅安卓可用modestringselector否选择器类型，包括五种类型。selector：普通选择器，multiSelector：多列选择器，time：时间选择器，date：日期选择器，region：省市区选择器。disabledbooleanfalse否是否禁用bindcanceleventhandle

否取消选择时触发表picker组件的属性

picker从底部弹起的滚动选择器。picker选择器分为五种普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。

picker组件的使用表mode属性值属性类型必填说明rangearray/objectarray[]mode为selector或multiSelector时，range有效range-keystring

当range是一个ObjectArray时，通过range-key来指定Object中key的值作为选择器显示内容valuenumber0表示选择了range中的第几个（下标从0开始）bindchangeeventhandle

value改变时触发change事件，event.detail={value}

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。普通选择器：mode=selector。picker组件的使用Page({data:{pickerIndex:0,array:['红色','黄色','粉色','白色'],arraycolor:['#FF0000','#FFFF00','#FFC0CB','#FFFFFF'],}})

接下来，使用picker组件，讲解普通选择器的使用方法与步骤。实现效果如下图所示。商品详情图的实现<view

class="goods-detail">

<block>

<image

mode="widthFix"

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

</block></view>

商品详情页面的长度不宜过长，页面长度过长会导致页面加载速度变慢，特别是在手机端，会消耗大量的手机流量，也会让用户产生视觉疲劳。详情页切图是指将制作好的一整张商品详情页使用工具进行切片，分割成一小张一小张