1.背景 如今信息流业务是各大互联网公司争先抢占的一个大面包，为了提高用户的后续消费，产品想出了各种各样的方法，例如在微视中，用户可以无限上拉出下一条视频；在知乎中，也可以无限上拉出下一条回答。这样的操作方式用户体验更好，后续消费也更多。最近几年的时间，微信小程序已经从一颗小小的萌芽成长为参天大树，形成了较大规模的生态，小程序也拥有了一个很大的流量入口。 2.demo体验 那如何才能在小程序中实现类原生APP效果的下一条无限刷体验？ 这篇文章详细记录了下一条无限刷效果的实现原理，以及细节和体验优化，并将相关代码抽象成一个微信小程序代码片段，有需要的同学可查看demo源码。 线上效果请用微信扫码体验： [图片] 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a 3.实现原理 出于性能和兼容性考虑，我们尽量采用小程序官方提供的原生组件来实现下一条无限刷效果。我们发现，可以将无限上拉下一篇的文章看作一个竖向滚动的轮播图，又由于每一篇文章的内容长度高于一屏幕高度，所以需要实现文章内部可滚动，以及文章之间可以上拉和下拉切换的功能。 在多次尝试后，我们最终采用了在[代码]<swiper>[代码]组件内部嵌套一个[代码]<scroll-view>[代码]组件的方式实现，利用[代码]<swiper>[代码]组件来实现文章之间上拉和下拉切换的功能，利用[代码]<scroll-view>[代码]来实现一篇文章内部可上下滚动的功能。 所以页面的dom结构如下所示： [代码]<swiper class='scroll-swiper' circular="{{false}}" vertical="{{true}}" bindchange="bindChange" skip-hidden-item-layout="{{true}}" duration="{{500}}" easing-function="easeInCubic" > <block wx:for="{{articleData}}"> <swiper-item> <scroll-view scroll-top="0" scroll-with-animation="{{false}}" scroll-y > content </scroll-view> </swiper-item> </block> </swiper> [代码] 4.性能优化 我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用。例如减少代码包体积，使用分包，渲染性能优化等。下面主要讲一下渲染性能优化。 4.1 dom优化 由于页面需要无限上拉刷新，所以要在[代码]<swiper>[代码]组件中不断的增加[代码]<swiper-item>[代码]，这样必然会导致页面的dom节点成倍数的增加，最后非常卡顿。 为了优化页面的dom节点，我们利用[代码]<swiper>[代码]的[代码]current[代码]和[代码]<swiper-item>[代码]的[代码]index[代码]来做优化，控制是否渲染dom节点。首先，仅当[代码]index <= current + 1[代码]时渲染[代码]<swiper-item>[代码]，也就是页面中最多预先加载出下一条，而不是将接口返回的所有后续数据都渲染出来；其次，对于用户已经消费过的之前的[代码]<swiper-item>[代码]，不能直接销毁dom节点，否则会导致[代码]<swiper>[代码]的[代码]current[代码]值出现错乱，但是我们可以控制是否渲染[代码]<swiper-item>[代码]内部的子节点，我们设置了仅当[代码]current <= index + 1 && index -1 <= current[代码]时才会渲染[代码]<swiper-item>[代码]中的内容，也就是仅渲染当先文章，及上一篇和下一篇的文章内容，其他文章的dom节点都被销毁了。 这样，无论用户上拉刷新了多少次，页面中最多只会渲染3篇文章的内容，避免了因为上拉次数太多导致的页面卡顿。 4.2 分页时setData的优化 setData工作原理 [图片] 小程序的视图层目前使用[代码]WebView[代码]作为渲染载体，而逻辑层是由独立的 [代码]JavascriptCore[代码] 作为运行环境。在架构上，[代码]WebView[代码] 和 [代码]JavascriptCore[代码] 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 [代码]evaluateJavascript[代码] 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 [代码]JS[代码] 脚本，再通过执行 [代码]JS[代码] 脚本的形式传递到两边独立环境。 而 [代码]evaluateJavascript[代码] 的执行会受很多方面的影响，数据到达视图层并不是实时的。 每次 [代码]setData[代码] 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关。 [代码]setData[代码] 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。 [代码]setData[代码] 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。 避免不当使用setData [代码]data[代码] 应仅包括与页面渲染相关的数据，其他数据可绑定在this上。使用 [代码]data[代码] 在方法间共享数据，会增加 setData 传输的数据量，。 使用 [代码]setData[代码] 传输大量数据，通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据，使用 [代码]setData[代码] 的特殊 [代码]key[代码] 实现局部更新。 避免不必要的 [代码]setData[代码]，避免短时间内频繁调用 [代码]setData[代码]，对连续的setData调用进行合并。不然会导致操作卡顿，交互延迟，阻塞通信，页面渲染延迟。 避免在后台页面进行 [代码]setData[代码]，这样会抢占前台页面的渲染资源。可将页面切入后台后的[代码]setData[代码]调用延迟到页面重新展示时执行。 优化示例 无限上拉刷新的数据会采用分页接口的形式，分多次请求回来。在使用分页接口拉取到下一刷的数据后，我们需要调用[代码]setData[代码]将数据写进[代码]data[代码]的[代码]articleData[代码]中，这个[代码]articleData[代码]是一个数组，里面存放着所有的文章数据，数据量十分庞大，如果直接[代码]setData[代码]会增加通讯耗时和页面更新开销，导致操作卡顿，交互延迟。 为了避免这个问题，我们将[代码]articleData[代码]改进为一个二维数组，每一次[代码]setData[代码]通过分页的 [代码]cachedCount[代码]标识来实现局部更新，具体代码如下： [代码]this.setData({ [`articleData[${cachedCount}]`]: [...data], cachedCount: cachedCount + 1, }) [代码] [代码]articleData[代码]的结构如下： [图片] 4.3 体验优化 解决了操作卡顿，交互延迟等问题，我们还需要对动画和交互的体验进行优化，以达到类原生APP效果的体验。 在文章间上拉切换时，我们使用了[代码]<swiper>[代码]组件自带的动画效果，并通过设置[代码]duration[代码]和[代码]easing-function[代码]来优化滚动细节和动画。 当用户阅读文章到底部时，会提示下一篇文章的标题等信息，而在页面上拉时，由于下一篇文章的内容已经加载出来了，这样在滑动过程中会出现两个重复的标题。为了避免这种情况出现，我们通过一个占满屏幕宽高的空白[代码]<view>[代码]来将下一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]hidden="{{index !== current && index !== current + 1}}"[代码]来隐藏这个空白[代码]<view>[代码]，并对这个空白[代码]<view>[代码]的高度变化增加动画，来实现下一篇文章从屏幕底部滚动到屏幕顶部的效果： [代码].fake-scroll { height: 100%; width: 100%; transition: height 0.3s cubic-bezier(0.167,0.167,0.4,1); } [代码] [图片] 而当用户想要上拉查看之前阅读过的文章时，我们需要给用户一个“下滑查看上一条”提示，所以也可以采用同上的方式，通过一个占满屏幕宽高的提示语[代码]<view>[代码]来将上一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]wx:if="{{index + 1 === current}}"[代码]来隐藏这个提示语[代码]<view>[代码]，并对这个提示语[代码]<view>[代码]的透明度变化增加动画，来实现下拉时提示“下滑查看上一条”的效果： [代码].fake-previous { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease-in; } .fake-previous.show-fake-previous { opacity: 1; } [代码] 至此，这个类原生APP效果的下一条无限刷体验的需求的所有要点和细节都已实现。 记录在此，欢迎交流和讨论。 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a

话不多说先上图： [图片] wxml页面代码： <view class="color">   <view class="linear-gradient color1">1</view>   <view class="linear-gradient color2">2</view>   <view class="linear-gradient color3">3</view>   <view class="linear-gradient color4">4</view>   <view class="linear-gradient color5">5</view>   <view class="linear-gradient color6">6</view>   <view class="linear-gradient color7">7</view>   <view class="linear-gradient color8">8</view>   <view class="linear-gradient color9">9</view>   <view class="linear-gradient color10">10</view> </view> wxss模块代码： .color{   display: flex;   flex-wrap: wrap;   justify-content: space-around;   padding: 5rpx;   color: white;   text-align: center;   font-weight: bold; } .linear-gradient{   height: 200rpx;  } .color1{    width: 48%;   background-image: linear-gradient(45deg, #29bdd9 0%, #276ace 100%); } .color2{    width: 48%;   background-image: linear-gradient(45deg, #ff9569 0%, #e92758 100%); } .color3{    margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #FF416C 0%, #FF4B2B 100%); } .color4{   margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #8A2387 0%, #E94057 50%, #F27121 100%); } .color5{    margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #ec008c 0%, #fc6767 100%); } .color6{    margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #2980B9 0%, #6DD5FA 50%, #FFFFFF 100%); } .color7{    margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #f12711 0%, #f5af19 100%); } .color8{   margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #C6FFDD 0%, #FBD786 50%, #f7797d 100%); } .color9{    margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%); } .color10{    margin-top: 10rpx;   width: 48%;   background-image: linear-gradient(45deg, #12c2e9 0%, #c471ed 50%, #f7797d 100%); }

扫码购、小程序会员、小程序结算等服务在超市/便利店行业不仅仅是提升门店效率的工具，同时也是帮助商家将线下流量转化为线上流量的方式。通过附近的小程序、门店物料、线上优惠券等工具的配套使用，可以更有效的盘活小程序的流量。 01 行业痛点与趋势 通过小程序将线下流量及消费场景转化至线上可解决传统商超便利店经营环节内缺乏门店引流能力，到店顾客交易效率不可控，品牌合作场景单一的问题。 [图片] 02 解决方案概述 通过微信各项产品能力组合，结合零售商家的线下运营，小程序可为用户提供到店前/到店中/离店后的全流程服务。 1）顾客到店前 商家可通过公众号将优惠信息或新品信息展示给顾客，或通过附近的小程序、广告等能力，直接引导顾客通过小程序领取优惠券或进行预约。 [图片] 2）顾客到店时 商家可通过小程序，向顾客提供会员注册、扫码领券等服务，并通过扫码购、商品导航等，帮助顾客实现便捷购物体验。通过小程序与支付系统、会员系统的打通，商家可以更多维度的收集用户信息，实现对顾客更精准的营销。 [图片] 3）顾客离店后 通过提供到家服务、配置线上体验优惠券提升顾客的复购率。同时，通过用户画像积累，可实现用户在离店交易场景的个性化推荐，促进用户线上交易。 [图片] 那么，零售行业的商户如何通过上述丰富多样的能力组合，搭建更好用的小程序，为用户提供有价值的服务呢？以下是我们的建议。 03 分场景介绍 场景1：会员 会员注册及运营是线下超市、便利店常见的营销策略，有效的会员运营策略可提升顾客对品牌的粘性。通过小程序开卡组件等工具，商家可在小程序内实现扫码即会员、支付即会员，结合线下物料将为顾客提供快速注册会员的能力。 在线下场景常见的会员类型如下： 1）积分会员： 注册会员无门槛，顾客在店内完成消费后可获得积分。积分达到一定额度后可兑换奖品，或在消费过程中抵现。 2）等级会员： 注册会员无门槛，顾客在店内消费后可获得积分。积分用于兑换会员等级，会员达到一定等级后可享受消费折扣。 3）付费会员： 顾客需要为成为会员支付一定的费用，付费会员可分为不同等级，如年度会员，季度会员，月度会员。付费会员权益通常会结合积分会员或等级会员一同提供，不同等级的付费会员可享受不同等级的积分或折扣权益。 [图片] 场景2：优惠券 优惠券是零售场景内常用的营销工具，在不同场景下灵活运用优惠券，可达到不同的效果。常见优惠券使用场景如下： 1）引流到店： 在顾客离店状态下通过一些渠道向用户下发优惠券可实现线上向线下门店引流的效果。常见的引流优惠券包括：微信支付面对面优惠券、朋友圈优惠券。 另外，商家还可以通过配置支付完成后打开小程序，公众号图文发券、线下传单物料发券等能力进行优惠券下发实现引流到店。 2）提升门店购买效率： 在顾客到店状态下，通过引导用户领取优惠券可提升顾客在店内消费转化效率。 [图片] 场景3：扫码购 扫码购作为门店获取线下流量的重要方式，不仅可提升门店内的收银效率，而且可帮助门店通过小程序积累线下的流量及数据。 在超市/便利店内，扫码购可以作为顾客购物期间的营销工具。通过识别顾客的购物习惯，可在顾客使用扫码购期间，对其进行优惠券、满减或会员活动等类型的营销。 [图片] 场景4：到家 线上商城是超市/便利店行业流量变现的常见工具。通过线上商城，商家可以为未到店的顾客提供丰 富商品和服务，在时间及空间上拓展门店的经营能力。 到家场景配合充分的用户引导，合理的优惠促销方案，可有效增强用户从访问到交易的转化。 [图片] 04 常用入口 搭建完善的运营体系，用好小程序 为帮助商家通过小程序更好为用户提供服务，微信提供了多入口引流小程序；通过与公众号、微信群、线下物料宣传结合，商家可在宣传、推广等运营活动中，以小程序作为落地载体为用户提供后续服务，并通过有效的用户运营让用户保持活跃。 多入口引流 小程序在微信体系内具备丰富的访问渠道，如附近的小程序、线下扫码，线上长按二维码，公众号，会话，支付完成页等等。 1）附近的小程序 附近的小程序可以作为商家重要的小程序引流工具，通过在附近的小程序进行配置可让更多附近的潜在顾客了解门店的服务，并通过小程序实现预约、点单外卖等多项服务落地。 [图片] 2）线下物料 为提升小程序本身的留存，线下物料仍然是不可缺少的一部分。商家在为顾客提供商品服务的同时，也可以通过商品包装，商品小票，商品附赠传单的方式为顾客提供回流渠道，使顾客在离店状态下也可以使用小程序进行消费。 线下扫码引流场景可包括： ① 线下传单，购物小票 [图片] ② 门店堆头物料及店内引导： [图片] 3）线上长按二维码 小程序支持生成带有小程序码（二维码）的图片供用户进行线上传播。 常见场景：订单分享，商品分享 [图片] [图片] 4）公众号（图文消息）打开小程序 公众号可作为顾客了解商家动态，获取商家信息的重要渠道。商家在日常运营公众号的过程中，可通过公众号文章插入小程序、公众号菜单栏配置等多种方式，将有购买意向的顾客引入小程序，并快速转化。 [图片] [图片] 5）会话 在微信生态内，社交流量是最直接的流量来源。商家可通过扫码添加店长微信等方式，积累官方顾客群，并在群内定期更新优惠信息，用户可通过小程序直接购买或预约自提，提升核心顾客的购买频次。 [图片] [图片] 6）支付凭证 对于线下零售场景而言，支付是高频且必现的场景，有效利用支付完成后完成页，可实现小程序用户回流。 常见常见：支付完成页关联小程序订单页面，支付完成页关联小程序优惠券页面。 [图片]