云闪付小程序项目总结

此时此地GS
931 阅读4分钟

项目背景

公司要上一个云闪付的小程序，基本功能是：连接蓝牙设备-读取用户信息-用户卡圈存
说是云闪付小程序，其实就是一个基于云闪付平台的h5页面，因此不管页面是用vue、react还是jQuery开发的，不管是用什么工具开发的，统统都是可以的，只需要在开发平台上绑定好域名和首页就可以显示。但最终是要在手机云闪付app上显示，所以要记得页面需要使用流动布局。

项目准备

  1. 创建云闪付账号 云闪付平台是背靠银联的一个主打支付的平台，所以创建的小程序账号只能是商户号。 image.png 可以通过管理员账号添加开发人员账号，不然每次登陆都要去找管理员账号手机，非常麻烦。将开发人员账号添加到“小程序成员”中后，开发人员就可以使用自己手机上的云闪付app登陆，并进行“开发管理”的配置了。

  2. 测试管理1

image.png 这个页面需要配置的就是“小程序首页链接”和“小程序安全域名”，其中的首页链接，标注的是“http://或者https://开头” 都可以，但其实我最开始用的http:// 开头的域名地址并不可用，换上https开头的地址才可以正常打开，这点需要注意！

  1. 测试管理2 测试过程中，将代码上传到服务器后，这个测试二维码有时候即传即更新，有时候会更新很慢。需要重新登陆账号，或者重新安装云闪付APP，或者只能干等，总之碰到了非常浪费时间！ image.png 上下线管理中的配置和测试管理差不多，在此不再赘述。

项目开发

接着就是项目的正式开发了，由于公司前期使用jQuery做过类似页面，为了快速上线，就借用了之前的代码。但实际开发开始碰到很多问题，在此总结一二。

  1. 前端api函数的调用

首先就是在使用云闪付 APP 小程序前端 API 前，需在调用页面（必须为 https ）引入插件 upsdk.js 文件。
open.95516.com/s/open/js/u…

蓝牙连接需要按照云闪付的官方api进行函数的调用（地址链接），这里按照要求调用，一般是没什么问题的，但要注意所有的api函数调用，都要放在pluginReady回调函数中使用。

upsdk.pluginReady (function(){
    // 前端API调用      
});
  1. 蓝牙连接 在项目中进行小程序和蓝牙设备连接的函数有（仅供参考）：
  • 打开蓝牙适配器前先关闭一下避免出错closeBluetoothAdapter
  • 打开蓝牙适配器openBluetoothAdapter
  • 开始蓝牙设备扫描startBluetoothDevicesDiscovery（这一步非常耗电，因此扫描到所需设别之后需要及时关闭）
  • 获取蓝牙设备信息getBluetoothDevices
  • 停止蓝牙设备扫描stopBluetoothDevicesDiscovery
  • 连接低功耗蓝牙设备connectBLEDevice，在这一步成功后需要同步开启链接状态监控函数onBLEConnectionStateChanged，如果蓝牙断开的话需要重新开启
  • 获取低功耗蓝牙设备的serviceId getBLEDeviceServices
  • 获取低功耗蓝牙设备的特征值CharacteristicId getBLEDeviceCharacteristics
  • 监控低功耗蓝牙的特征值变化 notifyBLECharacteristicValueChange 在蓝牙连接步骤还有个问题，就是安卓设备和苹果设备读取到的serviceId和CharacteristicId可能不一致，需要对设备进行区分并使用不同的serviceId和CharacteristicId，读取设备信息的代码如下：
// 判断客户端是ios还是Android
var agent = navigator.userAgent.toLowerCase();
var isInsideWallet = ((new RegExp(/(com.unionpay.chsp)/).test(agent)) || (new RegExp(/(com.unionpay.mobilepay)/).test(agent)));

项目总结

总而言之，在开发过程中碰到了云闪付这个平台很多独有的坑，每个点都耗费了不少时间去排查。
平台还在发展中，官方的技术支持还不错，有什么问题在官方qq群（457767672）中问一下还是有人回复的，要开发云闪付的小程序的同志，这个群是必加的。
好啦，有其他问题的小伙伴们，可以评论区讨论。

avatar
文章
阅读
粉丝