IoT 小程序开发调试

最新推荐文章于 2023-07-07 11:11:55 发布

可口可乐Vip

最新推荐文章于 2023-07-07 11:11:55 发布

阅读量472

点赞数

文章标签：物联网小程序微信小程序

本文链接：https://blog.csdn.net/qzmlyshao/article/details/130777789

版权

开发机绑定小程序 APPID

开发机是指开发 IoT 小程序时作为小程序功能调试的 IoT 设备。 IoT 设备通过小程序容器开发者模式绑定 APPID 后，则被视为开发机

进入开发者模式

蜻蜓系列设备进入开发者模式

蜻蜓设备出厂带有一张 4G 卡，开机时默认通过 4G 移动数据流量联网。若需要在 Wi-Fi 环境下使用，建议开机时先通过长按电源键进入系统设置 > 网络设置连接 Wi-Fi。蜻蜓设备 4G 卡收费说明：4G 卡的使用在 1 年内免费，过期后的收费情况请等待通知。
不建议用户更换为用户私有的 4G 卡，其它 4G 卡未经过支付宝测试，无法保证其稳定性。
长按电源键进入系统设置页，点击关于本机，再连续点击 8 次小程序容器打开小程序配置，进入支付宝IoT小程序设置页面，点击进入开发者模式。开发者模式是指蜻蜓设备的开发调试模式，进入该模式后，蜻蜓设备可以被小程序开发者工具（IDE）识别为在线状态，IoT 小程序可以推送到设备上进行调试。

桌面收银设备/大屏自助设备进入开发者模式

1、设备开机连接 Wi-Fi 或有线网络。
2、开机后进入系统桌面，点击进入系统设置 > 关于本机。再连续点击 8 次小程序容器
打开小程序配置，进入支付宝IoT小程序设置页面，点击进入开发者模式。

绑定小程序 APPID

在页面底部点击添加开发小程序，填入小程序 APPID 并提交。
说明：
• 开发机后续会优先推送新版本容器和收银台以及系统。如设备不再作开发使用, 请进入开发者模式页面点击 APPID 右侧的删除解除绑定，目前仅能通过设备主动解绑。
• 一个小程序 APPID 最多绑定 10 台 IoT 设备作为开发机，但向 IoT 设备分发同一个 IoT 小程序时的设备数量无限制。一个 IoT 设备能绑定的小程序 APPID 无限制，但一个设备同时只能运行一个小程序。
注意：
调试时，设备需要停留在如下开发者模式页面下，否则小程序可能无法推送到设备上进行调试。
在这里插入图片描述

IDE 配置

选择关联小程序的支付宝账号

若需要更多开发者协助开发小程序，可以在开放平台控制台 > 在相应小程序点击进入管理后台 > 管理 > 成员管理 > 开发成员 > 添加开发成员，添加开发者的支付宝账号。
说明：主账号默认为管理员，无需添加管理员为开发成员。
在这里插入图片描述

创建 IoT 小程序

1、在 IDE 界面创建或打开小程序项目。
在这里插入图片描述
2、若是新建项目，则在点击 IDE 首页右侧的 + 按钮后，在弹出页面选择端类型为支付宝 IoT 再点击下一步选择基础模板后下一步为项目命名即完成创建。

3、若是打开已创建的项目，则直接在第一步点击打开项目选择项目文件打开即可。
4、进入项目页面后需在移动端打开支付宝客户端，登录管理员或开发者账号，扫码登录 IDE。
在这里插入图片描述

关联小程序并绑定开发机

登录 IDE 后，在 IDE 项目界面左上角点击选择关联小程序，在弹出框选择绑定开发机的小程序；IDE 中的 IoT 小程序项目可以识别并关联与当前登录 IDE 账号绑定的处于开发者模式下的 IoT 设备，点击选择设备选择被绑定的开发机。
在这里插入图片描述
说明

若找不到设备，在确认开发者模式页面绑定成功小程序 APPID 后，重新登录 IDE 即可。
若提示设备不在线，检查设备是否在
开发者模式页面。

小程序开发

单屏小程序

如开发的设备为蜻蜓系列单屏设备、大屏自助系列等只有一个屏幕的设备，主要分为以下三个步骤。

页面标题栏配置

创建小程序后可以先对小程序进行页面标题栏配置，可查看小程序框架中的 window 配置。

小程序功能开发

IoT 小程序提供了一系列的 IoT 小程序组件和 IoT 小程序 API 帮助实现各种功能，此外 IoT 小程序也支持支付宝小程序的通用基础组件、扩展组件和小程序 API，但由于两种小程序的载体不同，故支持情况请以实际测试为准。
注意：支付宝小程序不支持 IoT 小程序的组件和 API。

真机预览调试

完成小程序功能开发后需要进行真机预览调试，在 IDE上选择预览或调试功能，将开发好的小程序推送到 IoT 设备上即可。
说明：真机预览/调试推送后，若要重新推送，请不要退出设备的开发者模式。
注意：IoT 小程序开发完成提交审核会由支付宝审核人员对小程序进行全面审核，如果小程序存在登录界面，请提供账号或在该页面提供服务商联系方式，以便审核人员联系获取登录账号。

双屏小程序

双屏小程序名字概念

机具范围：蜻蜓系列双屏设备（如蜻蜓 F4 Plus）、双屏台式 POS。
2 个小程序：主屏小程序（主要功能），副屏小程序（辅助功能）。
在这里插入图片描述

添加前后屏应用

在副屏小程序的 app.json 中，增加如下参数：

//.json
"window": {
  "extScreenApp": "YES"
  // 表示在副屏添加了商家ping'应用的接口。	
}

在主屏小程序的 app.js 文件的 onLaunch 中增加如下代码：

// .js
App({
  onLaunch(options) {
    // 第一次打开
    my.ix.addExtensionApp({
        appId: "****************",
        // 填入副屏小程序的 APPID
        type: "screen",
        success: (res) => {
                console.log("addExtensionApp success:", res)
                },
        fail: (res) => {
                console.log("addExtensionApp fail:", res)
                },
    })
  }
});

开启双屏消息收发

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

发送端调用消息发送接口。

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

接收端调用消息监听接口。

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

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

// .js
my.ix.offBuddyMessage();

发布前测试

1、如图在 IDE 上点击详情，取消勾选两个忽略选项, 并点击预览测试网络功能是否正常。若网络请求异常，如 web-view 无法打开网页，请在 IDE 中点击如下图所示的域名信息添加 httpRequest 域名白名单，可查看配置 H5 域名。
2、提交审核前，真机预览测试时，务必取消勾选两个忽略选项，否则可能造成审核端无权限操作。
在这里插入图片描述