如何开发电商类小程序 Vol.3：数据加载和图文排版

zhichi_admin

如何开发电商类小程序 Vol.3：数据加载和图文排版
这里是「电商类小程序实战教程」的第 3 篇文章。今天，我们将先完成上一期「加载更多列表」的功能，再来谈一谈如何在商品详情页中，将商品描述从富文本数据转换成 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（即从第几条获取数据）。以我们的需求为例：

• 第一次获取 20 条：limit=20 & offset=0
• 第二次再新增 10 条：limit=10 & offset=20
• 第三次再新增 10 条：limit=10 & offset=30
  
  

当然，根据各自不同的分页实现，limit 和 offset 的命名也不相同，我们只要了解原理即可。根据以上逻辑，当用户点击「查看更多」按钮后，小程序在不同情况下应该给出相应的反应：

• 按钮文字变为「正在加载...」，页面弹出「加载中...」的 loading 提示框，设置 offset + 10 并发起请求
• 有新数据加载时，按钮文字变回「查看更多」，关闭 loading 提示框，保存当前 offset
• 无新数据加载时，按钮文字变为「没有更多啦」，关闭 loading 提示框
• 请求失败时，按钮文字变为「查看更多」，关闭 loading 提示框
  
  

先在 list.wxml 中设置按钮，并绑定点击事件 loadMore;。
根据上面的流程，我们来封装一下 _getProductList 和 loadMore 方法。
至此，我们已经完整实现了商品列表页的开发，接下来进入商品详情页。商品详情图文排版在商品详情页中，我们主要来说一说图文排版的实现。
目前商品详情的图文介绍，一般都是通过后台的富文本编辑器来排版创建的，数据都是以 HTML 代码的形式保存下来，然后在页面上直接渲染出来。但是对于小程序来说，这种 HTML 形式的数据不能直接拿来使用，因为小程序根本不能解析 HTML 代码。此时，我们需要处理由富文本编辑器所创建的数据，将其转换为 JSON 格式的数据，以便于在小程序里使用。我们有两种思路去解决这个问题：

• 由前端去解析 HTML 格式的数据，用正则匹配 HTML 标签，然后转换成 JSON 数据；
• 交由后端去解析，同时新增一个专用的 API，返回解析过的 JSON 数据。
  
  

我们选用的是第二种方案，获取到的 JSON 数据格式如下:
我们只要将获取的数据用 wx:for 渲染出来，渲染时判断 type 选择对应的 text 或 image组件即可。
来看效果图：
仔细观察一下，我们可以发现，每一张图片的宽高都发生了不同程度的裁剪、拉伸或压缩。这是由于 image 组件的默认宽高导致的，我们在第一期说过，要特别留意小程序内置组件的默认样式，它们很可能会引起各种各样的问题。我们的期望是，图片能够按照原有的宽高比例进行显示，并且每一张图片的宽度都能撑满整个内容区域。这应该如何处理呢？这里就需要用到 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 组件如下：
完成的效果图如下：
本期内容总结本期的「电商类小程序实战教程」就到这里了。最后，来总结一下本期内容的重点：Toast 提示：

• Toast 提示可以使用 wx.showToast() 来调用，使用 wx.hideToast() 隐藏。
• 开发者可以自定义 Toast 展示时间、展示文案等。
• Toast 最长展示时间不能超过 10000 毫秒，开发者需要做好超时处理工作。
  
  

图文排版：

• 如果服务器中的数据是 HTML 数据，需要转换为 JSON，小程序才能解析。
• 直接将图片进行排版，图片宽高会出现问题。开发者需要处理好图片的宽高问题。
  
  

苏格拉底的爱

请问前两篇在哪呢

我靠了

我只是路过打酱油的

jerry369

专注于与个人游戏开发者合作，有产品的朋友联系微信号jim20180688，详聊

ecuniphi.se

jerry369 ??? 2020-4-11 16:57
?????????????,???????????jim20180688,??

Hi there, just became alert to your blog through Google, and found that it is truly informative. I am gonna watch out for brussels. I will appreciate if you continue this in future. Many people will be benefited from your writing. Cheers! ecuniphi.se/decorations/lindt-chokladask-pris.php lindt chokladask pris

jack369

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊