这里是「电商类小程序实战教程」的第 3 篇文章。
上一期,知晓程序(微信号 zxcx0101)以爱范儿旗下的玩物志小程序为 Demo,介绍了商品列表的实现方法。
今天,我们将先完成上一期「加载更多列表」的功能,再来谈一谈如何在商品详情页中,将商品描述从富文本数据转换成 JSON 数据后,并进行图文排版。
「查看更多」功能
我们还是先来看一下效果图:
1. 调用 Toast 提示
通过调用 wx.showToast()
,可以实现上图中部的 Toast 提示(加载中)。
微信提供的 Toast 组件有 success
和 loading
两种状态(旧版本的 loading
组件已经被废弃)。
需要注意的是,当 showToast
执行时,整个页面是不可点击的。所以,不用考虑用户意外触发多次「查看更多」的问题。
调用 wx.hideToast()
即可隐藏 Toast 提示框。
现在,我们来思考一个问题。上面说到 wx.showToast
的 duration
最大值为 10000 毫秒,也就意味着当请求时间大于 10 秒,若没有返回数据时,loading 提示框会自动消失。
这会带来一些问题:
如何解决这个问题呢?其实很简单。
我们先给 loading
设置 10000 毫秒延迟时间,超过 10000 毫秒后,即使请求成功,也不保存任何数据。
同时,将按钮文字改回「查看更多」即可。
我们初始化一个 timeoutFlag
的对象,使用 timer = setTimeout()
设置 9800 毫秒延时。9800 毫秒后,以 timer
为 key
设置一个对象 { isTimeout: true }
,每次发起请求时都会有一个 timer
作为标识。
若请求成功时 timeoutFlag.timer
的值为 { isTimeout: true }
,则不处理请求成功后的数据。
为什么要设置 9800 毫秒而不是 10000 毫秒呢?
那是因为 setTimeout
的计时并不准确,我们给出 200
毫秒的提前量,以防止代码出错。
我们来封装一个 _setTimeoutFlag
方法:
2. 构建与实现 loadMore
函数
我们需要一个 loadMore
函数,来做到数据的分页查询。
一般来说,我们都是通过设置两个查询参数来控制,分别是每次请求条数 limit
和每次请求起始数 offset
(即从第几条获取数据)。
以我们的需求为例:
limit=20
& offset=0
limit=10
& offset=20
limit=10
& offset=30
当然,根据各自不同的分页实现,limit
和 offset
的命名也不相同,我们只要了解原理即可。
根据以上逻辑,当用户点击「查看更多」按钮后,小程序在不同情况下应该给出相应的反应:
offset + 10
并发起请求offset
先在 list.wxml
中设置按钮,并绑定点击事件 loadMore;
。
根据上面的流程,我们来封装一下 _getProductList
和 loadMore
方法。
至此,我们已经完整实现了商品列表页的开发,接下来进入商品详情页。
商品详情图文排版
在商品详情页中,我们主要来说一说图文排版的实现。
目前商品详情的图文介绍,一般都是通过后台的富文本编辑器来排版创建的,数据都是以 HTML 代码的形式保存下来,然后在页面上直接渲染出来。
但是对于小程序来说,这种 HTML 形式的数据不能直接拿来使用,因为小程序根本不能解析 HTML 代码。
此时,我们需要处理由富文本编辑器所创建的数据,将其转换为 JSON 格式的数据,以便于在小程序里使用。
我们有两种思路去解决这个问题:
我们选用的是第二种方案,获取到的 JSON 数据格式如下:
我们只要将获取的数据用 wx:for
渲染出来,渲染时判断 type
选择对应的 text
或 image
组件即可。
来看效果图:
仔细观察一下,我们可以发现,每一张图片的宽高都发生了不同程度的裁剪、拉伸或压缩。
这是由于 image
组件的默认宽高导致的,我们在第一期说过,要特别留意小程序内置组件的默认样式,它们很可能会引起各种各样的问题。
关注知晓程序(微信号 zxcx0101),回复「电商」,获取电商类小程序实战教程的往期文章。
我们的期望是,图片能够按照原有的宽高比例进行显示,并且每一张图片的宽度都能撑满整个内容区域。这应该如何处理呢?
这里就需要用到 image
组件的 load
事件,使用 bindload
属性将事件绑定在 image
组件中。
我们可以用 event.detail = {height:'图片高度px', width:'图片宽度px'}
的方式调整图片宽高尺寸。
我们定义一个 imageLoad
函数,作为 image
组件的 load
事件的处理函数,用 data-index
保存当前 wx:for
的 index
值作当前图片的索引值。
detail.wxml
改写 image
组件如下:
detail.js
定义 imageLoad
函数如下:
此时,我们就可以在 image
组件中获取到 images[index].width
和 images[index].height
,并通过设置行内的 style
给每一个图片设置宽高了。
detail.wxml
改写 image
组件如下:
完成的效果图如下:
本期内容总结
本期的「电商类小程序实战教程」就到这里了。
想跟本文作者在线交流小程序开发,关注微信号 zxcx0101,点击下方菜单栏「加群交流」即可。
最后,知晓程序(微信号 zxcx0101)来总结一下本期内容的重点:
Toast 提示:
wx.showToast()
来调用,使用 wx.hideToast()
隐藏。图文排版:
在下一期中,我们会结合 nav tab 和 tab bar 组件,来谈一谈自定义组件的实现方式,请大家继续关注知晓程序。