写在前面

此为前公司实际项目，文章将逻辑省略，主要描述 IoT 小程序的部分专属 api 和发布上线流程等。

支付宝副屏小程序

目前搭载小程序的设备存在三种类型：双屏竖屏设备、双屏横屏设备、单屏竖屏设备

双屏的横竖屏样式存在差异，功能基本一致；单屏相较双屏缺少自助辅助和客显功能，增加激活、应用管理、交易记录功能

判断单双屏设备

my.ix.getIoTSystemInfo({
  success: (r) => {
    // 判断设备是否是双屏设备 r.multiScreen
    // 单双屏判断存入vuex
    if (r.multiScreen) {
      // 双屏逻辑
    } else {
      // 单屏逻辑
    }
  },
});

双屏设备

主屏：收银员或店员操作的屏幕，上面搭载的一般是安卓应用

副屏：用户或客户操作的屏幕，可以进行刷脸或手动登录会员，选择商品，结算等操作，是支付宝小程序

呈现样式

注：开发时需要注意更改的内容是否需要适配横屏设备，不确定的话，可以咨询产品

• 横竖屏适配，用的是媒体查询实现，UI样式见底部蓝湖地址

// 竖屏
@media only screen and (orientation: portrait) {
  // 竖屏中，横屏的部分样式需要隐藏
  .landscape-show {
    display: none !important;
  }
}

// 横屏
@media screen and (orientation: landscape) {
  // 横屏中，竖屏的部分样式需要隐藏
  .landscape-hide {
    display: none !important;
  }
}

主副屏交互(数据传输)

// 副屏发送指令方法
my.ix.sendBuddyMessage({});

// 副屏接受指令方法
my.ix.onBuddyMessage((r) => {});

• 在启动时，先由副屏发送指令

// index.ts
my.ix.sendBuddyMessage({
  target: "nativeBuddyHost",
  data: {
    command: "initApplet",
    msg: "获取启动参数",
  },
  success: (r) => {},
  fail: (r) => {},
});

• 主屏应用接受到副屏获取启动参数指令后，发送副屏需要的初始化数据，包括后续调用接口用到的baseUrl、tenant等；将初始化数据存入vuex，然后调用一系列初始化接口

// index.ts
my.ix.onBuddyMessage((r) => {
  if (r.command === "initApplet") {
    // 初始化数据存入vuex
    // 初始化接口操作等
  }
});

功能

自助功能（最常用的功能，基础）

自助就是在无店员操作主屏时，顾客可以自己去操作副屏，完成会员登录，选购商品，完成结算等功能

• 常见流程如下
  • 刷脸或手动登录会员/直接进入购物车界面/扫商品码进入购物车
  • 扫商品码录入商品/输入商品码录入/进入无码商品选购
  • 加购，删除商品等，支付
  • 支付成功，刷脸支付则直接回到首页，扫码支付进入支付结果页

自助辅助

自助辅助，是店员辅助顾客进行购物，此功能需要主屏手动去启动，启动后，主屏录入商品码或主屏录入顾客会员号帮助顾客操作，帮助顾客增删改商品、唤起支付等，同时顾客也可以在副屏进行自己的操作

• 常见场景如下
  • 店员帮助顾客录入会员号进入购物车
  • 顾客自己添加商品进行后续操作

客显

客显则是顾客等待店员操作录入会员、录入商品等，顾客在副屏实时观看一系列流程，最后完成支付即可

• 常见场景如下
  • 店员录入会员，店员录入商品，店员唤起副屏刷脸支付弹窗（顾客在副屏看到店员以上的一系列操作）
  • 顾客点击进行刷脸支付

单屏设备

数据传输

• 单屏设备不同于双屏，无法使用my.ix.onBuddyMessage去接受扫码内容，单屏设备监听扫码需要使用my.ix.onBarcodeScan方法

my.ix.onBarcodeScan((r) => {});

• 因为单屏设备启动时没有主屏传递初始化数据（不知道baseUrl等），因此我们将baseUrl等单屏所需数据配置在config.ts文件里

// config.ts
const devConfig = {
  env: "dev",
  appId: "xxxxxxx",
  tenant: "xxxxxxx",
  baseUrl: "https://xxx.xxxx.com/",
  logBaseUrl:
    process.env.NODE_ENV === "production"
      ? "https://xxxx.com:9999/track/"
      : "https://xxxx.com:9999/track/test/",
  actBaseUrl:
    process.env.NODE_ENV === "production"
      ? "https://xxxx.com/"
      : "https://xxxx.com/",
  accessKeyId: process.env.NODE_ENV === "production" ? "xxxx" : "xxxx",
  secret: process.env.NODE_ENV === "production" ? "xxxx" : "xxxx",
};

• 在单屏的初始激活界面，首先获取一下缓存，若存在缓存则直接调用激活接口，若不存在缓存则需要手动输入激活码或扫码激活，激活成功后，将激活成功返回的基础数据，整合成类似双屏时主屏发送给副屏的初始化信息存到vuex内，然后调用和双屏相同的初始化接口，调用初始化接口成功，缓存此次激活码，跳转到首页

小票打印

• 双屏设备打印小票是通过接口获取打印内容，由副屏发送指令给主屏，主屏应用操作完成打印
• 单屏设备因为没有主屏交互，打印小票需要由单屏自主完成，具体打印逻辑在SinglePrinter.ts内

开发调试

• 运行：yarn dev:mp-alipay
• 单屏
• 开发者工具内app.json文件的 window 内添加参数：
  ABCPConfig是使用my.ix.startBpaasService新刷脸组件必须传的参数

"ABCPConfig": "*"

• 单屏/蜻蜓小程序启动：进入系统 设置 页，点击 关于本机 ，再连续点击 8 次 小程序容器 打开小程序配置，进入 支付宝**IoT**小程序设置 页面，点击 进入开发者模式。开发者模式 是指蜻蜓设备的开发调试模式，进入该模式后，蜻蜓设备可以被小程序开发者工具（IDE）识别为在线状态，IoT 小程序可以推送到设备上进行调试。
• 打开小程序开发者工具，选择支付宝IoT小程序，选择测试小程序，选择上面开启开发者模式的设备（若上一步启动成功，设备应显示在线），点击预览或调试
• 双屏
• 开发者工具内app.json文件的 window 内添加参数：
  ABCPConfig是使用my.ix.startBpaasService新刷脸组件必须传的参数

"extScreenApp": "YES",
"ABCPConfig": "*"

• 启动主屏的调试应用：支付宝-Demo，依次点击 Applet 副屏小程序、启动Iot小程序、发送启动参数、推送客户屏小程序（可调试）用于开发，点击完以上后，开发者工具中会显示该设备在线，即可点击预览或调试。

其他问题

测试流程

• 1、可以使用 demo 模拟流程或
• 2、上传小程序到测试小程序，让产品提审，通过后分发到设备，在设备上使用APOS调起小程序（此流程耗时偏长，测试人员一般使用这个方法）

上传小程序

• 因为需要在app.json文件中配置参数，一般使用手动发布方式：
  • 运行 yarn build:mp-alipay
  • 选择需要发布的小程序
  • 修改app.json中参数（同开发调试）
  • 点击上传版本
• 发布完成后，告知产品提审，审核通过后让产品帮忙分发到设备

小程序的其他参数获取

• 小程序在进入海报首页后会调用获取配置的接口，这些参数是通过 bop 中台进行配置，需要如何配置可以咨询产品

小程序的启动参数配置

• 小程序和主屏首次交互获取的baseUrl等初始化参数在BO上配置，详情可咨询产品

设备容器版本

• 当有部分组件发生了错误，调用不起来或者返回了不正确的内容，可以询问钉钉群里的技术人员或产品是否是容器版本不对，不同的组件需要的容器版本不同，常见的如刷脸组件startBpaasService组件可能需要smile版本在5.2.5或以上，还有获取容器是否是单双屏需要通过my.ix.getIoTSystemInfo进行判断，这个也需要一定的容器版本支持。
• 一般看容器版本在主屏的系统设置的关于本机里，常常需要关注的一般是小程序容器(xPaaS)版本和刷脸应用(smile)版本；smile版本一般和需要刷脸的组件相关联，如果刷脸组件存在问题可以检查是否是smile版本的问题

支付宝文档查询入口

• 查询支付宝方法组件等（文档中心地址）

蓝湖地址

略

有家自助小程序

• 与标准支付宝副屏小程序的双屏功能一致（还少一些）
• 略

蜻蜓小程序

• 基本同单屏小程序

纯客显小程序

• 产品 xx 的客显小程序（略）（和自助的客显相同）
• 联华的客显（略）（联华客显好像也区分横竖屏）