一个序言
让我们先谈谈结果。在今年的Double 11中，小程序创意互动支持200多个品牌自定义互动小程序，为数百个KA品牌提供了服务，并覆盖了大量活跃用户；商家具有互动的商业化流量货币化的需求还包括品牌营销和与粉丝互动的需求，特别是对于品牌商家。通过小程序创意互动的开放能力，淘宝天猫上的商家可以引入定制/模板化的游戏化互动，以帮助品牌商家加速消费者资产的积累，并继续经营消费者以实现最终的品牌心态和GMV转化。
那么为什么小程序有创意的互动？个人理解需要从两个方面来考察：淘宝开放的历史演变和外部竞争的趋势。
在过去两年中，电子商务平台上的游戏化互动变得越来越流行，并且在过去几年中发生了变化：
这些游戏化交互的本质是基于社交属性的渠道功能的开放，基于核心社会属性的B和C终端的链接，创新的游戏化场景的建立以及通过广泛的应用场景产生用户粘性来锁定流量
因此，返回到交互本身的技术解决方案，我们一直在考虑适合淘宝自身业务形式的交互解决方案。自微信迷你游戏发布以来，业界出现了许多类似的迷你游戏计划。该解决方案允许用户以灵活，动态的方式在Super App中体验即时游戏互动，而无需下载新的App。与微信的纯游戏发布产品形式相比，淘宝在向我们的品牌商家提供定制/模板类型的游戏交互方面具有广泛的吸引力。
基于这种商业背景和吸引力，我们启动了小程序 Creative Interactive项目，小程序 Creative Interactive是淘宝购物小程序的游戏化交互式技术解决方案。购物小程序基于阿里巴巴小程序的统一功能和开发人员标准，与行业中的游戏引擎进行了深入的合作，通过小程序将游戏引擎的功能动态地带入了移动购物，为消费者提供了更多丰富的游戏体验和更精致的互动效果。
小程序 Creative Interaction定义了标准的引擎访问过程和引擎界面，帮助Taoxi生态系统中的开发人员降低游戏交互的开发成本，并使Web游戏和微信 mini游戏开发人员能够迁移到淘宝网生态系统，开放架构技术设计使我们能够支持各种复杂的交互式业务场景和交互式表单。
两个技术设计
小程序作为淘宝网三方交互的核心业务承载模型，小程序创意交互框架基于Flutter的高性能渲染管道，在容器层提供了基本的操作系统级资源管理和控制功能。引擎和Skia强大的图形渲染功能。提供跨平台和跨容器的统一API和业务功能； 小程序容器层负责从小程序的角度提供诸如应用程序管理和资源管理之类的基本功能。另外，容器层还为游戏交互提供了必要的渲染环境。两者是有机结合共同服务交互业务的研发。详细信息将在下面详细介绍。
在前端申请表中，我们重用了阿里巴巴经济的统一小程序 DSL，目的是提供一致的开发经验和管理控制能力，并降低开发人员的学习成本，并确保稳定性。经济的业务迁移。
对游戏引擎的访问使游戏互动开发人员可以专注于使用熟悉的开发方法或语言开发自己的游戏，并允许许多现有的小型游戏/网络游戏快速迁移到淘宝生态系统，从而加速了整体的规模。互动业务。
整套解决方案始终遵循的策略是确保对小程序容器体系结构的入侵程度低，与当前的Web生态标准兼容，并且还提供开箱即用的完整游戏化交互式解决方案。核心价值是帮助新技术进入淘宝，并利用新角色和新生态相应地进入淘宝。
小程序开放平台还提供了完整的三方交互式应用程序研发服务，主要包括用于云开发，构建，测试和发布的集成研发支持系统。该系统可以帮助开发人员快速发布并启动他们自己的交互小程序。
接下来，我将从以下四个方面专门分析小程序广告互动的原理和功能：
1打开生产链接
除了核心游戏引擎代码外，游戏引擎还提供了许多工具链和脚手架功能。大多数游戏交互开发人员习惯于在游戏引擎提供的一站式开发工作台（IDE）上进行编码和开发。特别是3D视觉场景编辑非常依赖于游戏IDE本身的功能。此外，诸如LayaAir之类的许多开发团队都使用诸如TypeScript和ActionScript3之类的语言技术堆栈。目前，淘宝小程序 IDE仅支持JavaScript语言，此处需要一层语言的编译和转换工作。
此外，所有淘宝小程序的上载和发行都依赖于淘宝小程序 IDE，因此有必要通过合理的工作流程打开这两个IDE的生产链接。此工作流程可以解决以下问题：
淘宝小程序开发人员可以使用游戏引擎的IDE开发自己的游戏化互动小程序，并使用相应引擎提供的功能来开发自己的游戏逻辑。游戏引擎将为开发人员提供与游戏相关的技术支持和指导。可以使用嵌入到IDE中的诸如astojs之类的编译器将单语言游戏项目（例如用ActionScript3开发的项目）编译为JS语言，然后导出为Taobao 小程序 Standard项目，最后通过我们的小程序 IDE进行打包和构建。
我们在小程序 IDE的模拟器中实现了游戏项目的预览。核心思想是在模拟器中模拟小程序容器的渲染行为，然后将渲染指令分发到Web Canvas节点。这种方法可以确保模拟器和真实App的渲染效果一致。
此外，通过小程序 IDE连接的云存储功能，开发人员可以将与游戏交互相关的所有资源上载到小程序云。我们的小程序云资源存储支持CDN的加速，这可以确保开发人员的资源存储可以在运行时快速下载到本地，从而减少了总体资源加载时间。
开发人员可以通过小程序平台管理和发布小程序版本。 小程序发行完成后，他们可以获得相应的小程序链接并进行装饰，并将其放置在手机上淘宝的各个营业入口上；消费者访问小程序将从小程序容器中提取相应的交互式小程序版本程序包，然后启动相应的环境创建和运行时注入，并在运行时动态调用小程序容器中的API功能，完整的交互式小程序操作过程。
2游戏引擎的移植
工人要想做好自己的工作，必须首先磨砺工具。游戏引擎是专门为游戏设计的工具和功能的集成。之所以称为引擎，就像车辆中的引擎一样，是提供最核心的技术部分的原因。由于复杂性和高昂的研发成本，开发人员无需在每次制作游戏时都重新设计引擎。可重用性是游戏引擎的重要设计目标。在淘宝小程序中，我们引入了多个游戏引擎的功能来帮助开发人员快速开发每个游戏的交互。
在2D游戏开发领域，我们与Egret Engine合作，并支持在淘宝网小程序中使用Egret Engine制作2D游戏；此外，我们还与Alimama的同学合作，将PixiJS的功能引入了淘宝小程序 In。
在3D游戏开发领域，我们与LayaAir引擎合作，支持在淘宝中使用LayaAir引擎小程序来创建3D游戏和渲染3D模型，并在Unity编辑器中完成3D建模并导入淘宝小程序k9]。
这些是可以完全在Web环境中运行的游戏引擎，但是由于小程序不是标准的Web环境，因此小程序的逻辑层和呈现层是分开的，并且逻辑层在JS引擎中运行，并且没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。这种差异导致一些前端开发学生非常熟悉的库，无法在小程序中运行。
那么这些网络游戏引擎如何在小程序上运行？
我们介绍了小程序适配层代码，即Adaptor。 小程序 小程序的操作环境是iOS上的JavaScriptCore和Android上的V8。两者都是没有BOM和DOM，也没有全局文档和窗口对象的操作环境。因此，当您要使用DOM API创建诸如Canvas和Image之类的元素时，将引发错误。
但是我们可以通过类似于my.createCanvas的接口创建Canvas对象，以便可以像在浏览器中创建元素一样创建Canvas。与XMLHttpRequest类似，我们也有小程序 API实现，例如my.downloadFile，其他接口（例如音频，图像，渲染等）也有相应的实现替换。
这些使用小程序 API模拟BOM和DOM代码的库称为适配器。顾名思义，这是基于小程序运行时环境中浏览器环境的游戏引擎适配层，因此，当调用DOM API和访问DOM属性时，游戏引擎不会产生错误。适配器是一个抽象代码层，并且没有专门指代适用于小程序的第三方库。目前，此适配器由淘宝小程序正式维护。
通过Adaptor，我们消除了小程序环境和Web环境之间的差异，并帮助Web游戏引擎在小程序环境中正常运行。
3渲染功能设计
游戏的核心是图形渲染功能。在小程序架构中，由于逻辑层和Web渲染层属于两个JS环境，因此两者之间的交互通常会花费大量时间。因此，我们基于Flutter Canvas程序重新设计了小程序交互式渲染。
此渲染解决方案需要解决以下问题：
Flutter Canvas是由淘宝小程序团队开发的新一代渲染SDK。我们使用Flutter Engine中的Skia图形库来封装所有Canvas2D接口，然后通过JS引擎开发人员使用的JS绑定形式公开这些接口。此外，我们还支持标准的WebGL1.0和WebGL2.0接口。在渲染管道级别，我们重用Flutter Engine的渲染管道。所有这些任务可帮助我们快速构建完整的渲染图形库。上网。
我还将在这里简要介绍Skia。作为最高级的2D图形库之一，Skia是Chrome和Android上的默认2D图形库。在生产环境中，其性能，稳定性和兼容性得到了极大的提高。大规模验证和使用Skia可以使我们免去特别的精力和精力来解决iOS和Android之间的双端渲染的不一致行为。
在Flutter Engine级别，我们引入了小程序画布模式，因此我们的Flutter Engine可以支持我们的小程序业务以及Dart本机业务。进行此转换时，我们确保遵循以下原则：
所有这些使Flutter Canvas能够稳定地支持交互式业务的发展。
4打开任务系统
品牌自定义交互小程序将通过任务机制驱动消费者的行为并带来交易增长。
在小程序交互中，我们定义了引导用户进入商店，浏览产品详细信息以及观看直播的积极行为。通过游戏化场景设计和公平激励，消费者可以自由地完成上述任务。这些交互式任务主要集中在以下类型中，例如：
这些任务本质上是用户行为，但是消费者行为是非常敏感的信息，因此需要以脱敏方式以安全的方式将这些信息提供给开发人员。为此，我们设计了一个任务插件，以提供开发人员可以访问的任务机制。
交互式任务插件的实现是客户端+服务器解决方案。在这里，我们将重点介绍在客户端上实现的细节。
任务插件的核心功能是匹配用户的行为轨迹。在这里，我们与最终情报应用团队合作，以支持通过特定的SDK确定用户行为的能力。 小程序任务插件通常可以查询用户的行为和匹配条件，并报告给后台进行任务净额结算。
通过这种有机结合，开发人员可以在小程序中使用任务插件以安全且不敏感的方式获取任务的状态，然后根据插件结果返回以实现自己的业务逻辑。
三个实际应用程序1品牌区域互动
今年Creative Interactive 小程序的主要发布渠道是品牌专区，我们通常将其称为旗舰店的二楼。在今年的Double 11期间，小程序 Creative Interactive支持了第三方商店服务提供商开发的大量游戏化交互式应用程序，从而帮助品牌商获得了多元化的价值，并帮助商户个性化了自己的商店。
2 3D商品交互
除了游戏化场景外，我们还向商品交互类型的开发人员开放了游戏引擎功能。今年，Double 11 小程序上进行了很多3D显示交互。借助小程序 Laya引擎的3D功能，开发人员可以将Unity的Laya插件导出的3D模型/材料无缝转换为可以由淘宝小程序加载的3D资源。
3D商品交互小程序帮助企业将“所见即所得”的购物体验带给消费者，并在许多行业中产生了基准化效果。
四大技术进步
未来小程序创造性互动将继续朝两个方向发展，主要分为两部分：能力提升和形式转变。
1能力升级
渲染核心优化和性能稳定性保证
任务体系和权益体系进一步开放
API功能不断升级
2形式转换
填写表格
卡片表格
五个案例经验
您可以打开手机淘宝网以扫描代码，并体验一些当前的在线小程序广告互动案例：