我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
为什么会开发这个小程序？
说来话长，回到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年做过一次数据分析，感兴趣朋友可以点击看一下。
p9-juejin.byteimg.com/tos-cn-i-k3…
详解前端开发技术
技术演变
先说一下我们开发产品技术的一路变革，淘宝平台是互联网技术的领路者，我们也从变革追随中不断的学习。
架构设计
前端技术
历经迭代，我们产品目前前端技术主要采用手淘小程序的消费者端，千牛小程序的商家电脑活动配置端，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开发知识，可以关注我，跟着我每天学习一点点！
结尾
一个小小的产品，它的发展会见证很多变革，有行业的，有技术的，但是当你回顾过去，更多印象的反而是一群奋斗的人。
每个人的工作有高峰低估，每个产品也是一样，但是只要你具有信念，坚持不懈，总有一天会成功，会变得更加美好。
编程开发是一项枯燥的工作，编程教育也是一项需要有耐心的职业，但是你问我哪些东西最在意，哪些更有成就感，我想说——无创造，不精彩。