电商小程序是很容易裂变和吸粉的，这也是很多商家开发电商小程序的主要原因。目前的电商小程序分为哪些类型，有什么裂变的方式呢？下面给大家总结一下小程序电商裂变的方法。 [图片] 电商类小程序目前主要分为3种： 第一种：内容电商变现 基于公众号资源开通小程序，围绕公众号用户进行商品销售变现。这一类商业模式在使用时会更直观的发现一些问题，作为能够打通微信公众号和小程序的用户行为分析产品，能够直观发现哪些公众号用户进入了小程序，并且能够定位到具体的人。 第二种：电商企业开展新渠道 本身在发展电商业务的企业开始尝试小程序渠道的销售效果，但难点在于缺少电商平台的引流机制，通过微信生态内的渠道推广流量比较贵，而且用户不精准。 第三种：线下门店发展线上通路 很多线下门店也开展了小程序，甚至包括餐饮项目，线下门店发展小程序渠道主要作用在于提供线上线下的流量枢纽，线下流量转到线上持续盈利，线上流量转到线下拓展客源。而无论哪种，对小程序运营者来说，流量都是当下需要解决的重要问题。公众号内容电商流量总有干涸的时候，电商小程序需要学会自我造血。 电商小程序的7种裂变方式： 1.拼团送福利 拼团的典型代表是拼多多，一人发起拼团邀请好友一起购买获得低价，很多社区团购在用这种思路做营销。而通过预售、抽奖、发起人免单等变化形式又衍生出抽奖团、预售团、分销团等不同形式； 2.砍价 砍价也是很常见的裂变方法，一人发起砍价，邀请好友帮忙降低价格； 3.分销 分销是利用用户的社交关系，让参与者不是享受到优惠，而是能够赚到佣金； 4.推荐有礼 比较典型的像瑞幸咖啡的邀请新用户可免费得一杯咖啡的活动形式，在设计活动时需要注意让推荐者与被推荐者都能获得福利； 5.拆红包 拆红包的活动套路是发给用户1个红包，需要有一定用户帮助他拆才能得到； 6.限时折扣 限时折扣裂变的意义在于用户在购买后生成一张抢购海报，邀请其他用户参与就可以得到佣金等其他福利； 7.分享发红包 类似于外卖平台的下单后发红包功能 以上，是我们总结的关于电商小程序裂变的7种常见玩法，在具体设计上，需要考虑奖品的诱惑力、用户付出的成本、用户参与环节等相关因素。 最后分享一下我收集的小程序： https://www.sucaihuo.com/source/0-0-266-0-0-0

使用的api及页面方法 api:wx.createSelectorQuery、wx.createIntersectionObserver 页面方法:onPageScroll 为什么使用以上方法？ wx.createSelectorQuery:主要解决页面渲染后保证所涉及的元素能百分百渲染到屏幕上，这里打包一个异步方法。 [代码]getElement(elm, component) { const _this = this; return new Promise((resolve, reject) => { let ss = setInterval(function() { let Qy = component ? _this.createSelectorQuery() : wx.createSelectorQuery(); let a = Qy.select(elm).boundingClientRect(function(res) { if (res) { clearInterval(ss) resolve(res) } }).exec(); }, 50); }); } [代码] wx.createIntersectionObserver与onPageScroll的作用： 单纯使用onPageScroll切换隐藏显示状态必然会高频率使用setData导致页面卡顿。如果只是在wx.createIntersectionObserver与onPageScroll中隐藏或者显示，即确保每个方法中只setData一次，那么卡顿的现象就不会出现。 以下wx.createIntersectionObserver仅作显示元素 [代码]onCreateIntersectionObserver(component,elm) { const _this = this; this.getElement(elm||".tr-fixed", component).then(res => { _this.setData({ fixed_top: res.top //记录一直显示的元素的top值 }); _this.IntersectionObserver = component ? _this.createIntersectionObserver() : wx.createIntersectionObserver() _this.IntersectionObserver.relativeTo(".top-transparent", { bottom: 2 }).observe(elm||'.tr-fixed', (res) => { //显示吸顶 const { fixed_show } = _this.data; if (fixed_show === false) { _this.setData({ fixed_show: true }); } //显示吸顶 }) }); } [代码] 上面代码中： .top-transparent是自定义参照区域。 .tr-fixed或elm为切换隐藏与显示的元素（事先写好顶部浮动，隐藏起来,这里并没有css仅作为监听对象） wxml基本代码： [代码]<view class="top-transparent">页面顶部透明参照元素</view> <view class="tr-fixed">一直显示的部分（滚动的scrollTop小于此元素的top值则隐藏，如果监测到与透明的参照元素交叉则显示）</view> <view class="fixed-view" wx:if="{{fixed_show}}">隐藏的部分（与一直显示的部分一模一样）</view> [代码] [代码].top-transparent{ position: fixed; top: 0; left: 0; right: 0; height: 20px; background: transparent;//透明 pointer-events: none; //保证此元素所有点击事件无效，即点击事件都穿透到比它层级低的元素上 } [代码] 以下onPageScroll仅作隐藏元素 [代码]onPageScroll(e) { const { fixed_top, fixed_show } = this.data // 隐藏吸顶头部 if (fixed_top != undefined && fixed_show) { if (e.scrollTop <= fixed_top) { this.setData({ fixed_show: false }) } } // 隐藏吸顶头部 }, [代码] 代码片段： https://developers.weixin.qq.com/s/oUhsfCmP76au

[代码]<template>[代码][代码]  [代码][代码]<div class=[代码][代码]"cp-image"[代码] [代码]:style=[代码][代码]"_boxStyle"[代码][代码]>[代码][代码]    [代码][代码]<img[代码][代码]      [代码][代码]class=[代码][代码]"image-main"[代码][代码]      [代码][代码]:src=[代码][代码]"_src"[代码][代码]      [代码][代码]:mode=[代码][代码]"mode"[代码][代码]      [代码][代码]:style=[代码][代码]"_boxStyle"[代码][代码]      [代码][代码]:lazy-load=[代码][代码]"lazy"[代码][代码]      [代码][代码]@click=[代码][代码]"handleClick"[代码][代码]      [代码][代码]@load=[代码][代码]"handleLoad"[代码][代码]      [代码][代码]@error=[代码][代码]"handleError"[代码][代码]    [代码][代码]/>[代码][代码]    [代码][代码]<div class=[代码][代码]"loading"[代码] [代码]v-[代码][代码]if[代码][代码]=[代码][代码]"loading"[代码][代码]>[代码][代码]      [代码][代码]<img src=[代码][代码]"/static/images/base/common/image_loading.png"[代码] [代码]class=[代码][代码]"img-loading"[代码] [代码]mode=[代码][代码]"aspectFit"[代码] [代码]/>[代码][代码]    [代码][代码]</div>[代码][代码]    [代码][代码]<div class=[代码][代码]"error"[代码] [代码]v-[代码][代码]if[代码][代码]=[代码][代码]"error"[代码][代码]>[代码][代码]      [代码][代码]<img src=[代码][代码]"/static/images/base/common/image_error.png"[代码] [代码]class=[代码][代码]"img-error"[代码] [代码]mode=[代码][代码]"aspectFit"[代码] [代码]/>[代码][代码]    [代码][代码]</div>[代码][代码]  [代码][代码]</div>[代码][代码]</template>[代码] [代码]<script>[代码][代码]export [代码][代码]default[代码] [代码]{[代码][代码]  [代码][代码]props: {[代码][代码]    [代码][代码]src: {[代码][代码]      [代码][代码]type: String,[代码][代码]      [代码][代码]required: [代码][代码]true[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]mode: {[代码][代码]      [代码][代码]type: String,[代码][代码]      [代码][代码]default[代码][代码]: [代码][代码]'aspectFill'[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]width: {[代码][代码]      [代码][代码]type: Number[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]height: {[代码][代码]      [代码][代码]type: Number[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]radius: {[代码][代码]      [代码][代码]type: Number[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]lazy: {[代码][代码]      [代码][代码]type: Boolean,[代码][代码]      [代码][代码]default[代码][代码]: [代码][代码]false[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]computed: {[代码] [代码]// 此方法是为了服务端压缩图片，只有我的项目里需要[代码] [代码]    [代码][代码]_src: [代码][代码]function[代码][代码]() {[代码][代码]      [代码][代码]let _src[代码][代码]      [代码][代码]let src = [代码][代码]this[代码][代码].src[代码][代码]      [代码][代码]// 微信临时图片和已处理图片，不处理[代码][代码]      [代码][代码]if[代码] [代码](!src || src.indexOf([代码][代码]'tmp/'[代码][代码]) > -1 || src.indexOf([代码][代码]'ashx'[代码][代码]) > -1 || src.indexOf([代码][代码]'tmp_'[代码][代码]) > -1) {[代码][代码]        [代码][代码]return[代码] [代码]src[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]let dpr = [代码][代码]this[代码][代码]._sv.Base.getSystemInfo().pixelRatio[代码][代码]      [代码][代码]let args = [代码][代码]'?format=jpg&mode=high&stretch=uniform&compress=60'[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].width) {[代码][代码]        [代码][代码]args += `&width=${Math.round(dpr * [代码][代码]this[代码][代码].width)}`[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]args += `&width=0`[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].height) {[代码][代码]        [代码][代码]args += `&height=${Math.round(dpr * [代码][代码]this[代码][代码].height)}`[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]args += `&height=0`[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码](!src) {[代码][代码]        [代码][代码]_src = [代码][代码]''[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](src.indexOf([代码][代码]'?'[代码][代码]) > -1) {[代码][代码]        [代码][代码]_src = src.split([代码][代码]'?'[代码][代码][0]) + args[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]_src = src + args[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]return[代码] [代码]_src[代码][代码]    [代码][代码]},[代码] [代码]// 计算盒子和图片的样式[代码] [代码]    [代码][代码]_boxStyle: [代码][代码]function[代码][代码]() {[代码][代码]      [代码][代码]let styles = {}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].width) {[代码][代码]        [代码][代码]styles.width = [代码][代码]this[代码][代码].width * 2 + [代码][代码]'rpx'[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].height) {[代码][代码]        [代码][代码]styles.height = [代码][代码]this[代码][代码].height * 2 + [代码][代码]'rpx'[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].radius) {[代码][代码]        [代码][代码]styles.borderRadius = [代码][代码]this[代码][代码].radius * 2 + [代码][代码]'rpx'[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]return[代码] [代码]this[代码][代码]._util.Base.styleObj2String(styles)[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]data() {[代码][代码]    [代码][代码]return[代码] [代码]{[代码] [代码]// 关键，loading需要先置为true[代码] [代码]      [代码][代码]loading: [代码][代码]true[代码][代码],[代码][代码]      [代码][代码]error: [代码][代码]false[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]onLoad() {[代码][代码]    [代码][代码]if[代码] [代码](![代码][代码]this[代码][代码].lazy) {[代码][代码]      [代码][代码]this[代码][代码].loading = [代码][代码]true[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]methods: {[代码][代码]    [代码][代码]handleClick(e) {[代码][代码]      [代码][代码]this[代码][代码].$emit([代码][代码]'click'[代码][代码], e)[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]handleLoad(e) {[代码][代码]      [代码][代码]this[代码][代码].loading = [代码][代码]false[代码][代码]      [代码][代码]this[代码][代码].error = [代码][代码]false[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]handleError() {[代码][代码]      [代码][代码]this[代码][代码].loading = [代码][代码]false[代码][代码]      [代码][代码]this[代码][代码].error = [代码][代码]true[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码]</script>[代码] [代码]<style lang=[代码][代码]'scss'[代码] [代码]scoped>[代码][代码].cp-image {[代码][代码]  [代码][代码]position: relative;[代码][代码]  [代码][代码]display: inline-block;[代码][代码]  [代码][代码]overflow: hidden;[代码][代码]}[代码][代码].loading,[代码][代码].error {[代码][代码]  [代码][代码]@include center();[代码][代码]  [代码][代码]position: absolute;[代码][代码]  [代码][代码]top: 0;[代码][代码]  [代码][代码]left: 0;[代码][代码]  [代码][代码]width: 100%;[代码][代码]  [代码][代码]height: 100%;[代码][代码]  [代码][代码]background: $color-bg-base;[代码][代码]  [代码][代码].img-loading,[代码][代码]  [代码][代码].img-error {[代码][代码]    [代码][代码]height: 32%;[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码]</style>[代码] // mpvue的页面内使用 import image from 'components/project/image components: { 'cp-image': image } <cp-image :src="src" :width="90" :height="60" :radius="4"></cp-image>