阿里妹介绍：小程序创意互动项目作为淘宝购物小程序全面提升消费者体验、满足商家个性化运营的重点项目之一，从3月底正式上线以来，经历了多次迭代2020年到今年双11，在购物小程序技术、产品、运营团队的共同努力下，容器渲染层的更换、游戏引擎的协商接入、多引擎IDE的联动等已初步实现。 小程序创意互动服务的旗舰店品牌专区、工业3D展示等业务也已有序铺开，项目本身的价值和意义也逐渐开始显现。 本文从更全面的角度对淘宝小程序创意互动项目进行了梳理和总结，并介绍了相关原理、能力、应用、现状和未来。

文末福利：零基础知识入门。

一、简介

我们先来说说结果。 今年双11期间，小程序创意互动支持超过200+品牌定制互动小程序，服务数百个KA品牌，覆盖海量活跃用户。 商家有互动商业流量变现的需求，也有品牌营销和粉丝互动的需求，尤其是品牌商家。 通过小程序创意互动的开放能力，淘宝、天猫商家可以引入定制化/模板化的游戏化互动，帮助品牌商家加速消费者资产积累并持续运营消费者，实现最终的品牌心态和GMV转化。

那么为什么我们需要用小程序来做创意互动呢？ 我个人的理解是，需要从两个维度来看：淘宝开放的历史沿革和外部竞争的趋势。

电商平台游戏化这两年越来越流行。 这几年发生了一些变化：

这些游戏化互动的本质是基于社交属性打通渠道能力，基于核心社交属性链接B端和C端，培育创新的游戏化场景，通过广泛的应用场景产生用户粘性并锁定流量。

所以，回到交互本身的技术方案，我们也一直在思考适合淘宝自身商业模式的交互解决方案。 自微信小游戏发布以来，业界涌现了很多类似的小游戏解决方案。 该方案可以让用户在无需下载新应用的情况下，以灵活动态的方式体验超级应用中的游戏交互。 与微信纯游戏分发的产品形态相比，淘宝对我们品牌商家的定制/模板游戏交互需求同样广泛。

基于这样的业务背景和需求，我们推出了小程序创意交互项目，这是针对淘宝购物小程序的游戏化交互技术解决方案。 基于阿里巴巴统一的小程序能力和开发者标准，购物小程序与行业游戏引擎紧密合作，通过小程序将游戏引擎能力动态引入淘宝手游，为消费者提供更丰富、更细腻的游戏体验。互动效果。

小程序创意交互定义了标准的引擎接入流程和引擎接口，帮助淘宝生态内的开发者降低游戏交互的开发成本，并支持页游和微信小游戏开发者迁移到淘宝生态。 开放的架构技术设计使我们能够支持多种复杂的交互业务场景和交互形式。

2、技术设计

小程序创意交互框架作为淘宝三方交互的核心业务承载模型，提供了容器层操作系统级资源管控的基础能力。 基于高性能渲染管线和Skia强大的图形渲染能力，提供跨平台、跨容器的统一API和业务能力。 小程序容器层负责从小程序的角度提供应用管理、资源管理等基础能力。 此外，容器层还提供了游戏交互所必需的渲染环境。 两者有机结合，共同服务于互动业务的发展。 下面将详细介绍。

在前端应用形态上，我们复用了阿里经济体统一的小程序DSL，以便对外提供一致的开发体验和管理能力，降低开发者的学习成本，保证小程序的平滑迁移。经济的事。

游戏引擎的接入让游戏互动开发者可以用熟悉的开发方法或语言专注于开发自己的游戏，并使很多现有的小游戏/网页游戏能够快速迁移到淘宝生态中，加快整体规模化的步伐。互动业务。

整个解决方案一直坚持的策略是保证对小程序容器架构的低侵入以及兼容当前的Web生态标准。 它也是一个完整的游戏化交互解决方案，可以开箱即用。 核心价值是帮助新技术进入淘宝，利用新角色、新生态进入淘宝。

小程序开放平台还提供一整套三方交互的应用开发服务，主要包括云开发、构建、测试、发布的一体化研发支撑体系。 该系统可以帮助开发者快速发布并上线自己的互动小程序。

接下来我将从以下四个维度来分析小程序创意交互的原理和能力：

1.打通生产链

除了核心游戏引擎代码之外，游戏引擎还提供了大量的工具链和脚手架功能。 大多数交互游戏开发者习惯在游戏引擎提供的一站式开发工作台（IDE）上进行编码和开发，尤其是3D视觉场景编辑非常依赖游戏IDE本身的功能。 另外，比如很多开发团队使用诸如此类的语言技术栈，目前淘宝小程序IDE只支持语言，还需要一层语言编译和转换。

另外，所有淘宝小程序的上传和发布都依赖于淘宝小程序IDE，因此需要合理的工作流程来连接两个IDE的生产环节。 该工作流程可以解决以下问题：

淘宝小程序开发者可以通过游戏引擎IDE开发自己的游戏化互动小程序，并利用相应引擎提供的能力来开发自己的游戏逻辑。 游戏引擎将为开发者提供游戏相关的技术支持和指导。 单语言的游戏项目，比如使用 开发的游戏项目，可以通过IDE内嵌的这样一个编译器编译成JS语言，然后导出为淘宝小程序的标准项目，最后通过我们的小程序IDE打包构建。

我们在小程序IDE的模拟器中实现了游戏项目的预览。 核心思想是在模拟器中模拟小程序容器的渲染行为，然后将渲染指令分发给Web节点。 这样模拟器和真机App中的渲染效果就可以保持一致。

此外，通过连接小程序IDE的云存储能力，开发者可以将所有与游戏交互相关的资源上传到小程序云。 我们小程序云的资源存储支持CDN加速，可以保证开发者的资源存储在运行时能够快速下载到本地，从而减少整体资源加载时间。

开发者可以通过小程序平台管理和发布小程序版本。 小程序发布后，可以获得相应的小程序链接，并放置在手机淘宝的各个业务入口中。 消费者访问小程序时，会拉取小程序容器中对应的交互小程序版本包，然后开始相应的环境创建和运行时注入，运行时动态调用小程序容器中的API能力完成一个完整的互动小程序操作流程。

2 游戏引擎移植

工欲善其事，必先利其器。 游戏引擎是专为游戏设计的工具和功能的集成。 之所以称为发动机，是因为它就像车辆中的发动机，提供最核心的技术部件。 由于复杂性和研发成本较高，开发者不需要每次制作游戏时都重新设计引擎。 可重用性是游戏引擎的一个重要设计目标。 在淘宝小程序中，我们引入了多种游戏引擎的能力，帮助开发者快速开发各个游戏交互。

在2D游戏开发领域，我们与引擎合作，支持在淘宝小程序中使用引擎制作2D游戏。 另外，我们还和阿里妈妈的同学合作，将 的能力引入到淘宝小程序中。

在3D游戏开发领域，我们与引擎合作，支持使用引擎在淘宝小程序中创建3D游戏和渲染3D模型，并支持在编辑器中完成3D建模并导入到淘宝小程序中用来。

这些都是可以完全在Web环境下运行的游戏引擎。 但由于小程序不是标准的Web环境，小程序的逻辑层和渲染层是分离的。 逻辑层运行在JS引擎中，没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。 这种差异导致了一些前端开发者非常熟悉的库无法在小程序中运行。

那么这些页游引擎是如何作用在小程序上的呢？

我们引入了小程序适配层代码，即小程序的运行环境为 .on iOS 和 V8 上。 两者都是没有BOM和DOM、没有全局和对象的运行环境。 因此，当您想使用 DOM API 创建 和 等元素时，就会出现错误。

但是我们可以通过my.这样的接口来创建一个对象，这样我们就可以像在浏览器中创建元素一样创建它。 同样，我们也有像my.这样的小程序API实现，其他接口如音频、图片、渲染等都有相应的实现替换。

调用使用小程序API模拟BOM和DOM的库。 顾名思义，这是小程序运行环境中浏览器游戏引擎的适配层，让游戏引擎在调用DOM API、访问DOM属性时不会产生错误。 它是一个抽象的代码层，并不特指适配小程序的第三方库。 目前由淘宝小程序官方维护。

我们平滑了小程序环境和网页环境的差异，帮助网页游戏引擎在小程序环境下正常运行。

3 渲染能力设计

游戏的核心是图形渲染能力。 在小程序架构中，由于逻辑层和Web渲染层分别属于两个JS环境，因此很多时间往往花费在两者的交互上。 为此，我们重新设计了基于.

该渲染方案需要解决以下问题：

是淘宝小程序团队开发的新一代渲染SDK。 我们使用SDK中的Skia图形库来封装所有接口，然后通过JS引擎将这些接口以JS的形式暴露给开发者。 此外，我们还支持标准1.0和2.0接口。 在渲染管线层面，我们进行了复用。 所有这些努力都帮助我们快速推出了完整的渲染图形库。

这里我也简单介绍一下Skia。 作为最高级的 2D 图形库之一，Skia 是 和 中默认的 2D 图形库。 其性能、稳定性、兼容性均已在生产环境中得到大规模验证。 Skia的使用意味着我们不必担心或花费精力去解决iOS和.

在层面上，我们引入了小程序模型，这样我们就可以同时支持我们的小程序业务和Dart原生业务​​。 我们在进行这次转型时，确保了以下原则：

这一切都为互动业务的发展提供了稳定的支撑。

4.任务系统的开启

品牌定制的互动小程序将通过任务机制驱动消费者行为，带来交易增长。

在小程序交互中，我们将引导用户进店、浏览商品详情、观看直播等定义为积极行为。 通过游戏化的场景设计和权益激励，消费者可以轻松完成上述任务。 这些交互任务主要集中在以下类型，例如：

这些任务本质上是用户行为，但消费者行为是非常敏感的信息，因此需要以安全、脱敏的方式将这些信息提供给开发者。 为此，我们设计了任务插件，提供开发者可以接入的任务机制。

交互任务插件的实现是客户端+服务器的解决方案。 这里我们重点关注客户端的实现细节。

任务插件的核心能力是匹配用户的行为轨迹。 这里我们与终端智能应用团队合作，支持通过特定的SDK获取用户行为的能力。 小程序任务插件可以正常查询用户行为及匹配条件，并上报后台进行任务权益结算。

通过这种有机组合，开发者可以使用任务插件安全、脱敏地获取小程序中任务的状态，并根据插件返回的结果实现自己的业务逻辑。

三个实际应用

1 品牌专区互动

今年创意互动小程序的主通道是品牌专区，也就是我们一般所说的旗舰店二楼。 今年双11期间，小程序创意互动支持了大量第三方店铺服务商开发的游戏化互动应用，帮助品牌商家获得多元化价值，帮助商家个性化经营自己的店铺。

2 3D产品交互

除了游戏化场景外，我们还向与产品交互的开发者开放游戏引擎的能力。 今年双11期间，出现了不少3D互动小程序。 通过小程序Laya引擎的3D能力，开发者可以将Laya插件导出的3D模型/材质无缝转换为淘宝小程序可以加载的3D资源。

3D产品互动小程序帮助商家为消费者提供所见即所得的购物体验，也在多个行业产生了标杆效应。

四大技术演进

未来，小程序的创意交互将继续向两个方向演化，主要分为能力升级和形态转型。

1 能力升级

渲染核心优化&性能稳定性保障

任务系统+权限系统进一步开放

API能力持续升级

2 形态转变

完整表格

卡片形式

五个案例经验

您可以在手机上打开淘宝，扫描二维码，体验一些在线小程序的创意互动示例：

最后我打个广告：快来吧，淘宝小程序容器团队招人啦！ 随着淘宝越来越开放、互动，我们团队作为直接服务第三方开放业务的技术团队，有着丰富的技术研究需求和广泛的业务实施场景。 在淘宝，我们通过小程序的开放架构来支持店铺业务。 是的，你在手机淘宝看到的店铺其实就是小程序。

目前我们急需对图形渲染、2D/3D游戏引擎、游戏开发感兴趣的同学加入我们。 我们正在招募 iOS//C++ 学生。 也欢迎有前端和服务器端背景的同学。

欢迎感兴趣的同学直接发邮件：。

零基础训练营

课程学习+体验场景

零基础训练营来了！ 每天15分钟，通过“专家课程+经验”，快速构建思维，入门函数计算。 5天内即可完成从零基础到实用的快速转变。 完成签到后，还可以获得阿里云周边礼品和结业证书。