为什么会开发这个小程序？

说来话长，回到 2013 年，那时候我正在做 SAP 自由顾问，朋友介绍注册了淘宝开放平台，因为之前做过多年的软件开发，一直对互联网感兴趣，所以就在工作间隙开发了一些小产品放到平台上面做尝试。一次偶然机会，我做了一个大转盘抽奖的产品放到淘宝服务市场给商家用，不到 2 天，就有很多用户来咨询，我感受到了一丝兴奋，于是快马加鞭的迭代开发，也有很多朋友的帮助，每天编程到午夜 2 点。随之而来的大量用户，我确定了方向，电商平台需要有个性化的营销工具，抽奖就是最简单最清晰的首选工具。一周后我的新产品抽奖靠手上线了，主要提供帮助商家设置抽奖营销，商家可以服务他们的用户。在 2013 年双 11，通过这个小产品，我挣到了 6 万元。

趁热打铁，我开始创业专注做互联网 SaaS 产品。

产品迭代中的创新

Logo 的变化

大家可以从我们 Logo 变化看出什么嘛！

早期的 LOGO

现在的 LOGO

历史踪迹

这里我重点说下我们产品的迭代历程和其中的有趣创意点，如下所示：

2012 年，早期版本 V1.0，不想说什么！现在来看，一个字很菜！

2013 年，只是电脑端，可配置抽奖背景，布局，奖品，规则，只有大转盘游戏。在那个淘宝商家蛮荒的时代，商家对我们工具是爱不释手，玩的不亦乐乎，甚至带火了一些商家。

（我也应该去卖货，呜呜）

2014 年，抽奖规则和奖品玩法更丰富，DIY 背景更多样，逐步增加手机端抽奖。

2015 年，订购人数到几千人的规模。注重迭代规则种类，奖品种类，游戏多样化。

2016 年，电脑，手机端标准游戏和模板的扩充，如大转盘，九宫格，砸金蛋，老虎机等等。

2017 年，抽奖整体布局可以拖拽化，定制功能更强大，手机端抽奖已成为核心。

2018 年，京东，口碑等平台扩展。

2019 年，产品 UI 体验整体更新，创建抽奖活动从模板角度出发。

2020 年，淘宝手机 APP 第三方 H5 页面统一升级为小程序。

2021 年，商家 PC 千牛端改造，千牛后台类似电脑端小程序。

2022 年，风云变幻，品牌定制多样化。

未来我们产品的关键词：Serverless，小而美，多平台，Web3。

创新创意

在产品发展迭代中，有一些创新让我意犹未尽，回忆满满，给大家唠一下。

• 黑科技的创新：2014 年双 11，我们创新研究出了加购抽奖的模式（现在淘宝已经禁止加购抽奖），一时间订购人数从 1000 人增长到 7000 人。风口上的创新让我们尝到了甜头，同时带来的访问压力也让我们苦不堪言。

• 加速过渡中的创新，在产品初期我们没有能力快速开发大转盘指针动态停靠的功能，于是我们把无指针的创意加入到产品中（无指针是通过弹层展示中奖信息），不仅让商家使用配置更方便，也加快了我们产品迭代的速度，做到了抢占用户的先机。

• 用户体验的创新：在淘宝商家工具中，可拖拽式布局的创新，也让商家一致好评，增加了用户的体验。用户可以轻松布局抽奖规则，奖品列表，抽奖区等等，当然现在这样的玩法已经随处可见，但在当时的淘宝服务市场，我们绝对属于先行者。

• 业务层面的创新，我们在抽奖规则和奖品规则中整合了多种玩法，自己创新了一些规则玩法，同时也借鉴了同行的玩法，然后我们整合起来，区分使用等级，不仅满足了更多维度的客户，也让我们的产品有足够的深度。

为了让大家深度了解下中奖的创意，这里重点阐述一下，已经烦躁的用户跳过此处。

奖品维度：通常大家理解的抽奖是从奖品的维度来延伸，比如有 4 个奖品，分成每个奖品中奖率 25%，4 个合计中奖率为 100%，如果只有 3 个奖品，哪其中 25%就无法中奖，这种很容易理解，但是这种情况在电商平台，对于复杂抽奖规则面前有时候不是太适用。

规则维度：人类是会不断迭代解决问题的，所以我们又加入了更多创新，从规则维度来延伸。比如一个商家想抽奖活动，有 2 个规则一个购买了商品可以中大奖，一个免费签到可以中小奖，这个时候单从奖品维度就不太合适了，于是我们加入了指定规则模式，就是可以在这个奖品中指定前面的规则中此奖品的概率（此处晕了吗 lol)，这样就很好的解决了，我上面说的大小奖发送的需求了。如图所示：

综合维度：这个时候又有商家说我想合起来用，有些奖品我直接玩概率不考虑规则，有些奖品我要做规则的调整。好吧，用户是上帝。我们在奖品中结合了指定规则的选项，你想用就配置，很好满足了不同商家用户的需求。目前我们的这个创新在全网公开产品中我还没有看到类似的（能看到这里，并且看懂的你是赚到了），当然有些产品能实现我说的 2 个维度，但从体验来说，我们应该是独一份，希望能看懂的朋友评论留言给一些建议。

下面我来举例说明下综合维度的玩法，能看到这里并且把下面还看完的，你来私信我，我给你发红包！

场景举例描述

奖品设置有：一等奖（中奖率 50%），没有设置指定规则；

二等奖（中奖率 20%），设置指定规则（交易额规则 20%，签到规则 30%）；

三等奖（中奖率 20%），没有设置指定规则

1、二等奖不勾选独立计算此奖品规则

小红使用指定的规则：交易额规则，去抽奖，小红的中奖率是

50%+20%*20%+20%=74%

一等奖中奖率 +二等奖中奖率+三等奖中奖率=本次抽奖中奖率

小红使用指定的规则：签到规则，去抽奖，小红的中奖率是

50%+20%*30%+20%=76%

一等奖中奖率 +二等奖中奖率+三等奖中奖率=本次抽奖中奖率

小红使用不指定规则去抽奖：无门槛抽奖，小红的中奖率是

50%+0%+20%=70%

一等奖中奖率+二等奖中奖率+三等奖中奖率=本次抽奖中奖率

2、二等奖勾选了独立计算此奖品规则，

小红使用指定的规则：交易额规则去抽奖，（按奖品的设置顺序进行判断）

小红使用指定的规则：签到规则去抽奖，小红的中奖率是

小红使用未指定的规则：无门槛规则去抽奖，小红的中奖率是

其实很多创新，通常会被对手很快速度借鉴，但是记得放平心态，不断迭代创新，你的产品一定会更好。

我们曾经在 2016 年做过一次数据分析，感兴趣朋友可以点击看一下。点击查看抽奖分析数据

详解前端开发技术

技术演变

先说一下我们开发产品技术的一路变革，淘宝平台是互联网技术的领路者，我们也从变革追随中不断的学习。

架构设计

前端技术

历经迭代，我们产品目前前端技术主要采用手淘小程序的消费者端，千牛小程序的商家电脑活动配置端，VUE 开发的 Web 管理员端。

手淘小程序

下图为开发手淘小程序的 IDE 工具，左侧是目录，右侧是预览器，中间是代码区，跟微信等小程序开发的 IDE 工具都相似，不多赘述。

重点讲解下我们组件式设计的模式，其实这里的设计跟 React，VUE 等语言一些思维模式相同，都是强调组件式，通过组件组合成大控件，或者大页面呈现，方便业务需求的使用。

在 components 中，包含了 base 基础组件如 image,title 等，也有游戏类型的组件，可以看到我们有多种游戏和互动模式，甚至还开发了基于白鹭引擎的高级游戏效果。通过这些互动组件，商家用户可以通过拖拽简单配置，组合成他们需要的店铺营销工具，比如游戏抽奖，关注领券，拉人领奖等等。

用一个砸金蛋的游戏来详细看下代码。下图是砸金蛋的商家配置页面。

砸金蛋代码 axml 代码如下。

<view  class="egg" style="position:absolute;width:{{width}}rpx;height:{{height}}rpx;top:{{top}}rpx;left:{{left}}rpx;z-index:{{zindex}};">    <view a:for="{{eggLuckyGame}}" a:for-index="idx" key="idx" a:for-item="item" style="position:relative;width:33%;height:100%;float:left;animation:{{item.eggShake}};" onTap="startGame" data-index="{{idx}}">      <image src="{{item.eggConfig.url}}" style="display:{{!item.showBrokenEgg?'block':'none'}};width:100%;height:100%;" ></image>      <image src="{{item.openConfig.url}}" style="display:{{item.showBrokenEgg?'block':'none'}};width:100%;height:100%;"></image>      <image a:if="{{item.hammerShake}}" src="{{item.hammerConfig.url}}" style="animation:{{item.hammerShake}};position:absolute;left:60%;top:-10%;width:50%;height:50%;"></image>    </view></view>

js 代码如下，因为代码篇幅较长，只做部分代码截图粘贴，代码逻辑也很简单 ，包括了游戏效果和后台抽奖 API 做信息交互。

我们再看下页面调用这个砸金蛋游戏组件的详细代码。其中结合了一些公共互动的奖品展示组件，其他游戏和互动模板都是类似的形式。看到这里，有的朋友觉得其实也没有什么太高明的创新和创意吧，我们这里重点是给大家展示在淘宝京东这种电商平台上的 SaaS 工具怎样运作的方式，包括一些电商业务的小程序的操作形式。

<view style="height:{{layoutHeight}}rpx;background-image:url({{bgImage}});background-size:100%;background-repeat:no-repeat;background-color:{{bgColor}}">  <!-- 组件遍历&渲染 -->  <view a:for="{{currentConfig}}" a:for-index="idx" key="idx" a:for-item="item">    <egg-bg a:if="{{item.name=='gameEggLuckyArea'}}" gameRunning="{{ gameRunning }}" onHandleRoundRun="setGameData" item="{{ item }}"></egg-bg>  </view>  <huodong-componsecommon awardImg="{{awardImg}}" awardRollInfo="{{awardRollInfo}}" currentConfig="{{ currentConfig }}"></huodong-componsecommon>  <!-- 公共组件 -->  <huodong-common actInfo="{{ actInfo }}" showLose="{{showLose}}" awardBackSrc="{{awardBackSrc}}" ruleAlertList="{{ruleAlertList}}"     showShadow="{{showShadow}}" showWin="{{showWin}}" expend="{{expend}}" luckyAward="{{luckyAward}}" drawNoLuckyMsg="{{drawNoLuckyMsg}}" onHandleRoundRun="setGameData">  </huodong-common></view>

utils 中放置了游戏的 js 执行效果代码。这些代码其实很常见，感兴趣的可以网上搜下，一堆一堆的实现效果。

最后再看下开发淘宝小程序怎样调用官方 SDK 的接口。其中的 my.authorize 就是用户授权的接口，授权后我们可以拿到手淘用户的唯一 ID 等信息，就可以继续后面的操作了。

 getUserInfoSimple() {    return new Promise((resolve, reject) => {      if (Object.keys(this.userInfo).length > 0) {        resolve(this.userInfo);      } else {        my.authorize({          scopes: 'scope.userInfo',          success: authcode => {            my.getAuthUserInfo({              success: res => {                this.userInfo = res;                resolve(this.userInfo);              },              fail: (e) => {                this.funcExcept(e, false)                reject(e);              },            })          },          fail: (e) => {            this.funcExcept(e, false)            reject(e);          }        });      }    });  }

淘宝小程序怎样调用云应用，怎样和后台交互，因为是电商平台，所以对数据的加密和安全要求十分严格，这里调用的云应用 API 都是专有的服务器容器，并且加业务白名单才能调用。其中 cloudAppId 是官方分配的云编号。

  //云应用请求  async luckyHttp(pathurl, method = 'GET', data = {}, resolve) {    try {      const result = await cloud.application.httpRequest({        'path': `${this.fetchLuckyData}${pathurl}`,        'method': method,        'headers': {},        'params': data,        'body': data,        'exts': { "cloudAppId": this.cloudAppId, "timeout": this.timeout }      });      resolve(result);    } catch (e) {      });    }  }

当用户在抽奖中奖后，小程序会调用官方的营销 API 接口，给用户发送优惠券，红包等权益，我们可以从下面接口中看到。你是否参与过手淘中领劵或者抽奖的功能，大部分都是下面类似代码实现的。

async sendTBAward(awardCode) {  console.log('user', this.userInfo)  console.log('awardCode', awardCode)  try {    const issueResult = await cloud.topApi.invoke({      api: 'alibaba.latour.strategy.issue',      data: {        channel: 'lafite_mt_common_isv_draw',        strategy_code: 'xxx',        selected_benefit_code: awardCode,      },      authScope: 'scope.userInfo'    });  }  catch (e) {    console.log(e.message)  }  }

总结一下，我们通过详解一个砸金蛋的游戏，明白了淘宝小程序的实现过程，了解了我们产品的整体前端实现逻辑，核心点就是游戏组件化，模板组件化。同时也学习到了在淘宝小程序中怎样获取用户授权信息，怎样调用发券的权益接口。

通过这 2 点的学习，你应该也能实现自己的淘宝小程序产品了吧，加油少年！

千牛小程序

上面介绍了手淘用户参与抽奖的开发过程和代码详细，接下来我们快速看下淘宝商家使用的页面和千牛小程序的代码。

这个是商家使用的正式后台页面。图中展示了商家配置活动的奖品明细。

下面是开发的 IDE 工具，和手淘小程序开发是同一个 IDE 工具，但是在开始选择类别时候一定要选对。

我们选择 PC 小程序项目中第一个小程序 PC 版，然后创建项目即可，这里我选择了我们创建过得项目。主面板如下，左侧代码目录就是千牛小程序代码，我们没有过多使用组件功能，直接用页面形式做开发。

千牛小程序在 IDE 中的预览如下，可以自己定义展示分辨率等场景信息，便于快速开发。

因为代码和项目比较庞大，我们这里简单让大家理解下产品的结构，了解下千牛小程序的开发形式，具体开发语言都是类似小程序的语法，不同平台只是个别地方或者接口有些不同。

VUE 管理员端

简单看下管理员页面，代码就不在这里展示了。包括一些活动管理，管理员配置的功能。

高并发解决

最后在技术层面，我讲下高并发的问题，因为其实抽奖，裂变这种互动应用，高 QPS，高并发是一个常见的问题，也是一个棘手的问题，很多新手容易抓瞎，在 2013 年那个时候我们就因为突然的大规模流量导致频繁宕机，淘宝的流量不是盖的。但是在早期，这些高并发都需要自己去解决，伴随着互联网云计算的发展，现在的技术朋友轻松很多，用容器负载技术，Serverless 技术就能轻松解决并发问题，而且费用还便宜，1 个人就能搞定全部。

我们的高并发大概经历的过程是这样的：

• 分表分库，优化 Web Server。我们从早期 SQL Server 迁移到开源 MySQL 中。

• 增加 ECS 做负载均衡，加入 Redis，加入队列等。

• 使用容器技术，包括轻容器 Docker，到资源池，K8 容器，SLB 等云资源编排。

• 使用 Serverless 技术，包括云函数，云数据库。

未来我们将继续迭代，把一些数据结构迁移到 MongoDB 中适应高并发，全部迁移到函数计算中，包括开发运维采用 GitOps 等等。有没有觉得透过这么小的产品迭代，也能清晰看到互联网技术的不断演进。我猜测未来类似我们这种小产品，将会更容易开发和迭代，也许 1 个人从产品开发到部署运维，可以轻松全部搞定，就算再高的并发，动动手指一键即可升级。技术的发展一定还是落到业务场景，落到人的层面。基础研究也是从人的角度出发才能发展的更快。

再展示一些目前云计算的产品场景图，便于大家更好的理解。

这个图展示了我们针对不同场景的调整，可以做到快速一键切换。

下图是淘宝聚石塔提供的 Devs 工具，便于产品发布程序包，环境管理，监控。

淘宝开放平台提供的 Serverless 功能，可以直接云函数部署，不用关心太多服务器的问题。

云数据库也提供了 MongoDB 和 MYSQL，因为安全问题目前功能性比较简单，适合一些简单的互动小应用。

总结一下，我们从技术演变可以了解到互联网的技术迭代；从架构设计中我们了解到做一个小产品其实也不是很简单，需要长期对技术和业务的了解；从前端技术中了解到，国内流行平台从普通的 JavaScript 技术，逐步发展到自己 APP 下的小程序，小程序具有更好的体验，更安全。最后，从高并发解决上也看到了云计算发展给我们带来的好处，人工需要的越来越少，硬件成本费用也越来越低，可以让创业者，开发者更专注到业务场景中。

在这个美好的时代，希望爱折腾的朋友，也能创新创造出自己的小而美产品，我觉得对于我们会编程的开发者来说，相对容易一些。不会编程的朋友，也可以学习一些简单的 web 开发知识，可以关注我，跟着我每天学习一点点！

结尾

一个小小的产品，它的发展会见证很多变革，有行业的，有技术的，但是当你回顾过去，更多印象的反而是一群奋斗的人。

每个人的工作有高峰低估，每个产品也是一样，但是只要你具有信念，坚持不懈，总有一天会成功，会变得更加美好。

编程开发是一项枯燥的工作，编程教育也是一项需要有耐心的职业，但是你问我哪些东西最在意，哪些更有成就感，我想说——无创造，不精彩。