透过开发抽奖小程序，体会创新与迭代

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

说来话长，回到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=&quot;egg&quot; style=&quot;position:absolute;width:{{width}}rpx;height:{{height}}rpx;top:{{top}}rpx;left:{{left}}rpx;z-index:{{zindex}};&quot;>
 <view a:for=&quot;{{eggLuckyGame}}&quot; a:for-index=&quot;idx&quot; key=&quot;idx&quot; a:for-item=&quot;item&quot; style=&quot;position:relative;width:33%;height:100%;float:left;animation:{{item.eggShake}};&quot; onTap=&quot;startGame&quot; data-index=&quot;{{idx}}&quot;>
 <image src=&quot;{{item.eggConfig.url}}&quot; style=&quot;display:{{!item.showBrokenEgg?'block':'none'}};width:100%;height:100%;&quot; ></image>
 <image src=&quot;{{item.openConfig.url}}&quot; style=&quot;display:{{item.showBrokenEgg?'block':'none'}};width:100%;height:100%;&quot;></image>
 <image a:if=&quot;{{item.hammerShake}}&quot; src=&quot;{{item.hammerConfig.url}}&quot; style=&quot;animation:{{item.hammerShake}};position:absolute;left:60%;top:-10%;width:50%;height:50%;&quot;></image>
 </view>
</view>

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

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

<view style=&quot;height:{{layoutHeight}}rpx;background-image:url({{bgImage}});background-size:100%;background-repeat:no-repeat;background-color:{{bgColor}}&quot;>
 <!-- 组件遍历&渲染 -->
 <view a:for=&quot;{{currentConfig}}&quot; a:for-index=&quot;idx&quot; key=&quot;idx&quot; a:for-item=&quot;item&quot;>
 <egg-bg a:if=&quot;{{item.name=='gameEggLuckyArea'}}&quot; gameRunning=&quot;{{ gameRunning }}&quot; onHandleRoundRun=&quot;setGameData&quot; item=&quot;{{ item }}&quot;></egg-bg>
 </view>
 <huodong-componsecommon awardImg=&quot;{{awardImg}}&quot; awardRollInfo=&quot;{{awardRollInfo}}&quot; currentConfig=&quot;{{ currentConfig }}&quot;></huodong-componsecommon>
 <!-- 公共组件 -->
 <huodong-common actInfo=&quot;{{ actInfo }}&quot; showLose=&quot;{{showLose}}&quot; awardBackSrc=&quot;{{awardBackSrc}}&quot; ruleAlertList=&quot;{{ruleAlertList}}&quot; 
 showShadow=&quot;{{showShadow}}&quot; showWin=&quot;{{showWin}}&quot; expend=&quot;{{expend}}&quot; luckyAward=&quot;{{luckyAward}}&quot; drawNoLuckyMsg=&quot;{{drawNoLuckyMsg}}&quot; onHandleRoundRun=&quot;setGameData&quot;>
 </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开发知识，可以关注我，跟着我每天学习一点点！

结尾

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

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

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