关于cordova + cordova-plugin-ble-central + vue 打包安卓App开发过程（爬坑）记录

  • 首先（必须）
  • 技术选型
  • 打包过程/环境配置错误处理
  • 打包并使用设备蓝牙
  • 打包应用
  • cordova 命令相关
  • 蓝牙插件 cordova-plugin-ble-central 应用开发
  • VUE 前端根页面 index.html
  • 编写/封装 & 撸 cordova 蓝牙插件应用js
  • 开始（vue项目内部）
  • 深入 bluebooth.js


相信很多人遇到过与我类似问题

首先（必须）

安装/配置java： [参考]()
安装配置Gradle：[参考]()
配置安卓环境：[参考]()

技术选型

Java：1.8+（必须）
Gradle：7.3+（必须）
Android Studio：2021.2+ （必须）（如果可自行手动配置SDK -- 跳过）
打包框架/工具：cordova
蓝牙插件：cordova-plugin-ble-central@1.4.4+
前端：vue2.0+ （前端开发请自行编码）

打包过程/环境配置错误处理

环境变量错误
ANDROID_SDK_ROOT=undefined (recommended setting) 
ANDROID_HOME=undefined
参考：

打包成功运行闪退



其他错误
https://cloud.tencent.com/developer/article/1901061

打包并使用设备蓝牙

安卓6.0以上需要开启系统定位才能使用蓝牙

打包应用

安装/配置：cordova [参考](https://cordova.apache.org)
其次（项目根www目录）：添加平台 -- cordova platform add android --save （其他平台ios/bowser/windows）
添加蓝牙插件：cordova plugin add cordova-plugin-ble-central --save
配置蓝牙：项目根www目录package.json文件 添加
"cordova-plugin-ble-central": { // 大概在20行左右
        "ACCESS_BACKGROUND_LOCATION": true // 应用后台定位
 }

"dependencies": {  // 大概在30行左右
    "cordova-android": "9.0.0", // 兼容安卓版本的SDK版本号 可自行修改（前提已安装对应的SDK版本）
    "cordova-browser": "6.0.0",
    "cordova-ios": "6.1.1",
    "cordova-windows": "7.0.1",
    "cordova-plugin-ble-central": "^1.4.4" // 必须
 }

cordova 命令相关

cordova install android //将编译好的应用程序安装到模拟器上。
cordova emulate android //在模拟器上运行（前提是创建好AVD）
cordova serve android //在安卓手机运行
cordova build android //打包cordova项目到android平台。
cordova run android //通过USB直接安装到真机（该语句已经包括了build命令）
cordova run browser //运行在浏览器


VUE 前端根页面 index.html

必须在 <hdae> 添加 <script src="cordova.js"></script>
注意：在非蓝牙应用环境中可将其注释 免得 引用报错/报红 （无代码/控制台强迫症的 -- 跳过）

编写/封装 & 撸 cordova 蓝牙插件应用js

PS：JS前端高手 – 跳过

开始（vue项目内部）
1、新建：bluebooth.js 文件 -- 注释 必备的

/*
  **************************************************************************
  bluebooth.js cordova 蓝牙 cordova-plugin-ble-central
  **************************************************************************
*/
const bluebooth = {};
// todo 

export default bluebooth; // 导出/暴露

2、将其挂载到vue根实例上：main.js
import bluebooth from './bluebooth.js' // 引用路径因个人情况定
Vue.prototype.$bluebooth = bluebooth; // 应用到vue实例 - 方便于 this.$bluebooth 调用
深入 bluebooth.js
小试牛刀：
bluebooth.init = (data)=> {
	console.log('看看方法是否可用');
}

需要的地方：this.$bluebooth.init(data);

写在前面：非常重要
// 设备/文档就绪后 默认 检测蓝牙是否开启
document.addEventListener('deviceready', async () => {
    await ble.enable((res)=> {
        console.log("设备蓝牙开启成功！注意：安卓6.0以上版本需要开启定位功能才能使用蓝牙功能", res);
        }, (err)=> {
        console.log("设备蓝牙开启失败！", err);
        }
    );
});