支付宝小程序多端开发

351 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第28天,点击查看活动详情

多端开发

多端开发 是指使用支付宝小程序提供的各种接口,来开发小程序并发布到各个端使用。也就是说可以让开发者开发一次支付宝小程序,同一套代码不做任何改动就可以通过发布到各个端,同时触达更多的用户群体,节约了开发成本。
当前支付宝小程序支持的端分类为:小程序、小程序插件,每个类别支持相应的端,需要下载 小程序开发者工具([IDE v1.17 或更高版本] 界面查看。当前支持的端如下图查看 IDE 界面:

  1. 在 [IDE]初始页面选择一种小程序项目类别,点击右侧界面的 “+” 新建项目。

image.png 2. 选择需要开发的端(可同时选择一个或多个端,选择多个端后在开发过程中可随时切换端进行测试)

image.png

image.png
需要登录 [开放平台控制台] > 进入对应小程序详情页 > 其他 > 多端发布支持 选择开通所需端。

image.png
说明

  • 支付宝开放平台默认支持开通的端请以开发平台实际情况为准。
  • 支付宝本身除了支付宝小程序之外还支持小程序的 IoT 端发布,小程序通过发布到 IoT 端(如:蜻蜓设备)为商家提供门店数字化经营解决方案。

整体框架

开发者使用同一套代码,通过 IDE 在不同环境下进行构建,然后上传并发布在不同的端上。

image.png 所有的端使用同一套小程序框架([点此查看详情],语法、基础 API 和基础组件都是一样的。API 使用通用的前缀 my,例如:

image.png 不同的端在小程序通用框架基础上会有自己的扩展,这样开发者可以使用各端特色能力。不同的端 API 在 my 的后面加上不同的扩展对象,如:支付宝为 my.ap,钉钉为 my.dd。在运行时,非当前端的扩展对象为空(undefined),例如在支付宝端里,my.dd 为空;在钉钉端里,my.ap 为空。
注意: 为了保持兼容,支付宝my.ap对象的扩展API在my里面可以继续调用,另外不同端由于发布节点不同,更新框架的时机也不一样,这样有些新增的通用 API 在某个时刻可能暂时未支持,可以用 [my.canIUse] 来进行判断。 支付宝端扩展 API 示例(小程序唤起支付):

image.png
钉钉端扩展 API 示例(发起 DING):

image.png

多端项目开发

创建项目时选择应用类型

创建项目时,开发者根据自己的应用场景,选择不同的端类型。

  1. 在 [IDE]初始页面选择一种小程序项目类别,点击右侧界面的 + 新建项目。

image.png 2. 选择需要开发的端(可同时选择一个或多个端,选择多个端后在开发过程中可随时切换端进行测试)。

image.png

切换应用类型

应用类型是和端关联的。同一套代码,开发者可以在研发时切换为其它端的应用类型,也可以直接增加或删除端再进行切换。
此时模拟器和真机预览自动适配开发者当前所选的端和应用类型,这样开发者可以在不同的端进行模拟和预览:

image.png

真机预览

不同端的真机预览在操作上是一致的,但需要使用当前端 APP 扫码进行预览。

image.png

互投评估

互投评估是小程序开发完成后切换为其他端应用时用于检测当前代码中所有的 JSAPI 在当前运行的小程序目标产品端,是否支持。
操作方式:在最新版 IDE(v1.17 或更高版本)项目页面左侧工具栏点击 代码扫描 工具按钮,点击 互投评估工具,点击 发起扫描评估任务,工具即可查找出代码中 JSAPI 对于所选端应用的支持情况。

image.png 说明:当前仅 支付宝小程序高德小程序 支持互投评估功能。

构建上传

不同端的上传在操作上是一致的,上传到当前端对应的开放平台:

image.png

发布上线

上传后,不同端分别到相应的开放平台提交发布申请,审核后即可上线。