支付宝蜻蜓Plus双屏Lot小程序开发步骤

开发调试

添加前后屏应用

  1. 在后屏小程序的 app.json 中,增加如下参数:

    //.json"window": {
      "extScreenApp": "YES"
      // 表示在后屏添加了前屏应用的接口}
  2. 在前屏小程序添加后屏小程序,app.js 中增加如下代码:

    // .jsmy.ix.addExtensionApp({
      appId: "****************",
      // 填入后屏小程序的 AppID
      type: "screen",
      success: (res) => {
        console.log("addExtensionApp success:", res)
        },
      fail: (res) => { 
        console.log("addExtensionApp fail:", res)
        },})


开启前后屏消息收发

前后屏之间可以相互收发消息,发送消息后目的端需要监听消息,所以发送端和接收端需要分别调用如下两个接口:

1. 发送端调用消息发送接口

// .jsmy.ix.sendBuddyMessage({
  target: "****************", 
   // 填入目标小程序的 AppID
  data: { payFinish: true },
  success: (res)=>{
  },
  fail: (res)=>{
  }})// 可以在不同地方调用消息发送接口

2. 接收端调用消息监听接口

// .jsmy.ix.onBuddyMessage({
  success: (res) => {
    console.log(res)
  }})// 多次调用消息监听接口则会注册多个监听器,一旦调用则会持续监听,建议仅在需要的地方调用

若在多处调用了消息监听接口,为了避免反复调用,建议在相应地方调用注销监听器:

my.ix.offBuddyMessage()

前屏小程序开发

前屏小程序的开发与 IoT小程序开发完全一致,请参考 IoT 小程序接入指南 逐步完成开发。前屏小程序支持 IoT小程序所有的  API组件

后屏小程序开发

开发

后屏小程序同样需要向支付宝 申请 小程序 AppID,支付宝不区分前屏或后屏小程序,开发者需要自行定义。

后屏小程序的开发需要在 IDE 上 新建项目 关联 AppID,代码开发目前不提供示例,开发者可以为其自定义功能。

后屏小程序支持 IoT 小程序所有的 API组件

注意事项

调试测试


后屏小程序只支持  IDE  的 预览 推送 功能,不支持 调试 推送。

对于监听类  JSAPI  默认只能使用后屏小程序监听。而 收银台事件监听  my.ix.onCashierEventReceive  和 键盘事件监听  my.ix.onKeyEventChange,对于前后屏小程序都可以调用监听。

注意:在 IDE 上进行调试测试时,需要先推送后屏小程序,再推送前屏小程序,方可完整测试运行前后屏小程序。而后屏小程序 UI 可以单独预览。

提审与分发

第一次提审双屏小程序时,需要在 IDE 中先上传后屏小程序,并在 支付宝开放平台 提交审核,通过审核,并完成上架后再提审前屏小程序;若当前线上已存在上一版本的单屏小程序,需保证后屏小程序与线上的单屏小程序的兼容性。

需要确保两个小程序都审核通过并上架后才能分发小程序。

当双屏小程序已经分发到设备上使用后,更新小程序时,为避免前后屏更新不同步导致兼容性问题,需要关注并确保新上架的前后屏小程序与线上版本的前后屏小程序兼容。提审时,建议前后屏同时提审并同步上架。

提审注意事项:

IoT 双屏小程序的开发需要在遵循支付宝小程序 审核规范 的前提下,还需要遵循 IoT 小程序审核标准。IoT 双屏小程序提交审核时还需要注意如下三点:

支付宝蜻蜓Plus双屏Lot小程序开发步骤  第1张


  1. 支持设备型号:需要选择提审小程序所适配的所有机型。由 IoT 单屏小程序升级开发成双屏小程序的,需要为该小程序所适配机型做兼容处理。

  2. 关联小程序appid:提审过程需要选择该小程序支持的机型为蜻蜓 Plus 系列,且需要填写关联小程序的 AppID 栏,规则为“屏+AppID”:                     a. 如当前提交的是前屏的小程序,则在关联小程序的 AppID 栏内填写后屏及 AppID:“后屏12345”。

    b. 如当前提交的是后屏的小程序,则在关联小程序的 AppID 栏内填写前屏及 AppID:“前屏23456”。

  3. 测试相关资料:可以上传小程序相关的所有材料,有利于提高审核通过几率。如小程序无法单独使用蜻蜓设备进行调试,可能导致无法审核,请拍摄小程序的完整演示流程视频(10M内)以附件形式上传,并在备注中注明原因,审核人员视情况决定是否采纳视频审核。

配置 分发 时,只需要分发前屏小程序即可,由前屏小程序后自动唤起后屏小程序。

附录-双屏小程序 API

如下 API 是实现双屏小程序的基本 API。

API

描述

my.ix.addExtensionApp

在前屏小程序添加后屏小程序,开启与后屏小程序交互的接口

my.ix.sendBuddyMessage

消息发送端调用,进行消息发送

my.ix.onBuddyMessage消息监听并接收。多次调用消息监听接口则会注册多个监听器,一旦调用则会持续监听,建议仅在需要的地方调用
my.ix.offBuddyMessage结束消息监听。若在多处调用了消息监听接口,为了避免反复调用,建议在相应地方调用注销监听器
my.ix.onCashierEventReceive⽤于监听收银台是否被关闭,继续后续流程
my.ix.startApp(收银台后屏指令)用于在后屏小程序向前屏小程序发送指令,控制前屏收银台开启刷脸支付或展开扫码支付的提示

my.ix.addExtensionApp

添加后屏应用。在前屏小程序添加后屏小程序,开启与后屏小程序交互的接口。

入参

名称

类型

必填

描述

appId

String

要添加的小程序 AppID,如:appId :     "2019************"

type

String

添加小程序的位置,双屏场景为 screen,如:type: "screen"
successFunction成功的回调函数
failFunction失败的回调函数
completeFunction结束的回调函数:                                                (1). 成功时,先回调 success 再回调         complete                                                       (2).  失败时,先回调 fail 再回调 complete

出参 (成功)

名称

类型

描述

success

Boolean

值为 true,返回內容为 {success: true}

出参 (失败)

名称

类型

描述

error

Number

错误码

errorMessage

String

错误的详细叙述

返回内容包含:{error: 'Number', errorMessage: 'String'}

示例代码

// .jsmy.ix.addExtensionApp({
  appId: "****************",
  // 填入后屏小程序的 AppID
  type: "screen",
  success: (res) => {
    console.log("addExtensionApp success:", res)
    },
  fail: (res) => { 
    console.log("addExtensionApp fail:", res)
    },})

my.ix.sendBuddyMessage

消息发送。消息发送端调用,通过指定目的端小程序的 AppID 进行消息发送。可以在小程序内不同地方调用消息发送接口。

入参

名称

类型

必填

描述
targetStringtarget 为欲接收的小程序 AppID,如:                            target: "2019************"

data

JSONObject

发送的数据内容,如:data:{}

success

Function

成功的回调函数
failFunction失败的回调函数
completeFunction结束的回调函数:                                                (1). 成功时,先回调 success 再回调 complete                                                     (2).   失败时,先回调 fail 再回调 complete

出参 (成功)

名称

类型

描述

success

Boolean

值为 true,返回內容为 {success: true}

出参 (失败)

名称

类型

描述

error

Number

错误码

errorMessage

String

错误码的详细叙述

返回内容包含:{error: 'Number', errorMessage: 'String'}

示例代码

// .jsmy.ix.sendBuddyMessage({
  target: "****************", 
   // 填入目标小程序的 AppID
  data: { payFinish: true },
  success: (res)=>{
  },
  fail: (res)=>{
  }// 可以在不同地方调用消息发送接口

my.ix.onBuddyMessage

消息监听并接收。调用后自动监听另一个屏幕小程序的消息。多次调用消息监听接口则会注册多个监听器,一旦调用则会持续监听,建议仅在需要的地方调用。

示例代码

// .jsmy.ix.onBuddyMessage({
  success: (res) => {
    console.log(res)
  }})// 多次调用消息监听接口则会注册多个监听器,一旦调用则会持续监听,建议仅在需要的地方调用

my.ix.offBuddyMessage

结束消息监听。若在多处调用了消息监听接口,为了避免反复调用,建议在相应地方调用注销监听器。

入参

名称

类型

必填

描述

success

Function

成功的回调函数

fail

Function

失败的回调函数
completeFunction结束的回调函数:                                                (1).成功时,先回调 success 再回调 complete               (2).失败时,先回调 fail 再回调 complete

出参 (成功)

名称

类型

描述

success

Boolean

值为true。返回內容为 {success: true}

出参 (失败)

名称

类型

描述

error

Number

错误码

errorMessage

String

错误的详细叙述

返回内容包含:{error: 'Number', errorMessage: 'String'}

示例代码

// .jsmy.ix.offBuddyMessage()


郑州讯龙软件科技有限公司讯码付移动聚合支付刷脸支付源码13007546248