* 小程序还可以这么玩！私域互动实践总结 ( * 小程序开发)

作者：曲甜梦生活妙招 2023-06-01 22:14:32 阅读：23

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

淘宝小程序还可以这么玩！私域互动实践总结 (淘宝小程序开发)

文末福利:零基础动手无服务器。

前言

首先，今年双11期间，小程序创意互动支持超过200+品牌定制互动小程序，服务数百KA品牌，覆盖大量活跃用户；商家有实现互动商业流量、品牌营销、与粉丝互动的诉求，尤其是品牌商家。通过小程序创意互动的开放能力，淘宝天猫上的商家可以引入定制化/模板化的游戏化互动，帮助品牌商家加速消费者资产的沉淀，持续运营消费者，从而实现最终的品牌心智发展和GMV转化。

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

电商平台的游戏化互动在最近两年越来越流行，这些年发生了变化:

大家习惯在淘宝上养猫，在巴巴农场种地，种果树；双11期间，盖楼、养猫的游戏引来全民狂欢；来自品牌商家的海量互动需求也让淘宝越来越开放。

再说，拼多多的崛起很大程度上是靠“好玩”和“游戏”的互动玩法，比如一个简单粗暴的印章，还有一大堆可以领取免费水果的果园，让拼多多成为大家眼中的“具有购物功能的社交游戏”。

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

然后回到交互本身的技术方案，我们一直在思考适合淘宝自身商业形态的交互方案。自微信游戏发布以来，业内类似的游戏还有很多。该方案允许用户在不下载新App的情况下，以灵活、动态的方式体验超级App中的游戏交互。相对于微信纯游戏分发的产品形态，淘宝为我们品牌商家提供定制/模板游戏互动的诉求同样广阔。

基于这样的商业背景和诉求，我们推出了小程序创意互动项目，也就是淘宝购物小程序游戏化互动的技术方案。基于阿里统一的小程序能力和开发者标准，购物小程序与游戏引擎在行业内的深度合作，通过小程序将游戏引擎能力以动态的方式带入手游，为消费者提供更丰富的游戏体验和更细腻的交互效果。

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

技术设计

作为淘宝三方交互的核心业务承载模式，小程序的交互框架提供了容器层面的资源管控基础能力，并基于Flutter Engine的高性能渲染管道和Skia强大的图形渲染能力，提供跨平台、跨容器的统一API和业务能力。applet容器层负责从applet的角度提供应用程序管理和资源管理等基本功能。此外，容器层还为游戏交互提供了必要的渲染环境。两者的有机结合服务于交互服务的研发。具体内容将在下文详述。

在前端应用表单上，我们复用阿里经济的统一小程序DSL，目的是向外界提供一致的开发体验和控制能力，降低开发者的学习成本，保证业务在经济中的平滑迁移。

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

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

同时，小程序开放平台提供完善的三方互动应用RD服务，主要包括集云开发、搭建、测试、发布于一体的RD支撑体系。该系统可以帮助开发者快速发布和推出自己的交互式小程序。

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

制作环节开放，游戏引擎移植，渲染能力移植，设计任务系统开放。

1生产环节的开放

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

另外，淘宝小程序的所有上传发布都依赖于淘宝小程序的IDE，所以需要通过合理的工作流程打通两者IDE的制作环节。此工作流程可以解决以下问题:

支持不同语言技术栈之间的编译和转换，支持游戏项目到淘宝小程序项目的转换，支持游戏项目资源的云存储和加载，支持游戏在小程序IDE中的预览/调试。

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

我们在Applet IDE的模拟器中预览游戏项目。核心思想是在模拟器中模拟applet容器的渲染行为，然后将渲染指令分发到Web Canvas节点。这样可以保持模拟器和真实app中的渲染效果一致。

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

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

2游戏引擎移植

锋利的工具能做好工作。游戏引擎是专门为游戏设计的工具和能力集成。之所以叫发动机，就像车辆中的发动机一样，提供核心技术部分。由于复杂性和高RD成本，开发者不需要在每次制作游戏时都重新设计引擎。可重用性是游戏引擎的一个重要设计目标。在淘宝小程序中，我们引入了多个游戏引擎的能力，帮助开发者快速开发每一个游戏交互。

在2D游戏开发领域，与白鹭引擎合作，支持在淘宝小程序中使用白鹭引擎制作2D游戏；此外，我们还和阿里的同学合作，把PixiJS的能力带入淘宝小程序。

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

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

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

我们介绍了applet适配层代码，即Adaptor。小程序的运行环境是iOS上的JavascriptCore和Android上的V8，两者都没有BOM和DOM，也没有全局的文档和窗口对象。所以，当你想用DOM API创建Canvas、Image等元素时，就会产生错误。

但是我们可以通过my.createCanvas这样的接口创建一个画布对象，这样我们就可以像在浏览器中创建元素一样创建画布。类似于XMLHttpRequest，我们也有my.downloadFile的API实现，还有音频、图片、渲染等其他接口。被相应的实现所取代。

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

通过Adaptor，我们抹平了小程序环境和Web环境的差异，帮助Web游戏引擎在小程序环境下正常运行。

3渲染能力的设计

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

这种渲染方案需要解决以下问题:

提供高性能的2D图形API和WebGL API，减少复杂的Javascript-Native交互环节，保证稳定高效的多系统、多型号、多设备适应性。

Flutter Canvas是淘宝小程序团队开发的新一代渲染SDK。我们使用Flutter引擎中的Skia图形库来封装所有的Canvas2D接口，然后通过JS引擎将这些接口以JS绑定的形式暴露给开发者。此外，我们还支持标准的WebGL 1.0和WebGL 2.0接口。在渲染管道层面，我们重用了Flutter引擎的渲染管道，这些都有助于我们快速地将一个完整的渲染图形库放到网上。

在这里，我也简单介绍一下Skia。作为最有经验的2D图形库之一，Skia是Chrome和Android中默认的2D图形库，其性能、稳定性和兼容性已经在生产环境中得到大规模验证。Skia的使用让我们无需特别关注和努力解决iOS和Android双端渲染不一致的行为。

在Flutter引擎层面，我们引入了applet的Canvas模型，所以我们的Flutter引擎可以同时支持我们的applet业务和我们的Dart原生业务。当我们进行这种转变时，我们保证了以下原则:

它基本兼容颤振社区的引擎，易于维护和升级。

确保本机Dart模式可以正常运行。Canvas模式和Dart模式可以在创建引擎时动态指定，为后续的Flutter业务提供了更好的基础。

这些都使得Flutter Canvas稳定，支撑互动业务的发展。

4任务系统的开放

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

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

浏览指定店铺10s，浏览指定商品详情页10s，观看直播间20s。...

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

交互式任务插件的实现是一个客户端+服务器的解决方案。在这里，我们将重点放在客户端实现的细节上。

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