微信小程序蓝牙对接热敏打印机_微信小程序蓝牙打印

作者：花生_TL007 | 2024-05-12 12:59:32

踩

微信小程序蓝牙打印

更多文章请访问深的个人博客

最近开发的一个小程序里需要对接热敏打印机打印小票，在此记录一下对接的过程

项目开发注意点：
1、因为项目中有多个页面的数据是需要进行打印的，为了保持蓝牙的连接状态和数据，所以连接蓝牙的操作和数据会在vuex里面进行统一管理。
2、打印模板会统一进行管理
3、打印数据前需要对上一次打印的数据进行清理使用 printerJobs 对象里的 clear() 方法实现清理数据
4、在原有的sdk上增加三列打印的方法

技术栈

uni-app

参考资料

微信小程序蓝牙打印

项目效果图

请添加图片描述

打印效果图

请添加图片描述

项目结构

只展示主要项目结构
请添加图片描述

项目页面讲解

vuex相关文件讲解

蓝牙连接：connect.js

/**
 * 连接蓝牙
 */
function inArray(arr, key, val) {
	for (let i = 0; i < arr.length; i++) {
		if (arr[i][key] === val) {
			return i
		}
	}
	return -1
}

export default {
	namespaced: true,  // 开启命名空间
	state: {
		devices: [], // 搜索到的蓝牙设备
		connected: false, // 是否连接
		discoveryStarted: false, // 是否开始搜索蓝牙
		name: "", // 连接到的蓝牙设备名称
		deviceId: "", // 连接到的蓝牙设备的deviceId
		canWrite: false,
		_deviceId: "", // 连接到的蓝牙设备的deviceId
		_serviceId: "", // 连接到的蓝牙设备的seviceId
		_characteristicId: "", // 连接到的蓝牙设备的characteristicId
	},
	getters: {
		getDevices: state => state.devices,
		getName: state => state.name,
		getConnected: state => state.connected,
		getDiscoveryStarted: state => state.discoveryStarted,
		getConnectDeviceId: state => state._deviceId,
		getServiceId: state => state._serviceId,
		getCharacteristicId: state => state._characteristicId
	},
	mutations: {
		// 初始化连接
		initConnect(state) {
			state.devices = []
			if (!uni.openBluetoothAdapter) {
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
				return
			}
			uni.openBluetoothAdapter({
				success: (res) => {
					console.log('openBluetoothAdapter success', res)
					this.commit('connect/startBluetoothDevicesDiscovery')
				},
				fail: (res) => {
					console.log('openBluetoothAdapter fail', res)
					if (res.errCode === 10001) {
						uni.showModal({
							title: '错误',
							content: '未找到蓝牙设备, 请打开蓝牙后重试。',
							showCancel: false
						})
						uni.onBluetoothAdapterStateChange((res) => {
							console.log('onBluetoothAdapterStateChange', res)
							if (res.available) {
								// 取消监听，否则stopBluetoothDevicesDiscovery后仍会继续触发onBluetoothAdapterStateChange，
								// 导致再次调用startBluetoothDevicesDiscovery
								uni.onBluetoothAdapterStateChange(() => {});
								this.commit('connect/startBluetoothDevicesDiscovery')
							}
						})
					}
				}
			})
			uni.onBLEConnectionStateChange((res) => {
				// 该方法回调中可以用于处理连接意外断开等异常情况
				console.log('onBLEConnectionStateChange',
					`device ${res.deviceId} state has changed, connected: ${res.connected}`)
				// this.setData({
				// 	connected: res.connected
				// })
				state.connected = res.connected
				if (!res.connected) {
					uni.showModal({
						title: '错误',
						content: '蓝牙连接已断开',
						showCancel: false
					})
				}
			});

		},
		getBluetoothAdapterState(state) {
			uni.getBluetoothAdapterState({
				success: (res) => {
					console.log('getBluetoothAdapterState', res)
					if (res.discovering) {
						this.commit('connect/onBluetoothDeviceFound')
					} else if (res.available) {
						this.commit('connect/startBluetoothDevicesDiscovery')
					}
				}
			})
		},
		// 开启蓝牙搜索
		startBluetoothDevicesDiscovery(state) {
			if (state.discoveryStarted) {
				return
			}
			state.discoveryStarted = true
			uni.startBluetoothDevicesDiscovery({
				success: (res) => {
					this.commit('connect/onBluetoothDeviceFound')
				},
				fail: (res) => {
					console.log('startBluetoothDevicesDiscovery fail', res)
				}
			})
		},
		// 停止搜索蓝牙
		stopBluetoothDevicesDiscovery(state) {
			uni.stopBluetoothDevicesDiscovery({
				complete: () => {
					console.log('complete，stopBluetoothDevicesDiscovery')
					state.discoveryStarted = false
					console.log(this.discoveryStarted)
				}
			})
		},
		// 搜索蓝牙
		onBluetoothDeviceFound(state) {
			uni.onBluetoothDeviceFound((res) => {
				console.log("搜索到的蓝牙", res.devices)
				res.devices.forEach(device => {
					if (!device.name && !device.localName) {
						return
					}
					const idx = inArray(state.devices, 'deviceId', device.deviceId)
					if (idx === -1) {
						state.devices.push(device)
					}
				})

			})
		},
		// 连接蓝牙 1
		createBLEConnection(state, item) {
			console.log("连接的设备", item)
			this.commit("connect/next_createBLEConnection", {
				deviceId: item.deviceId,
				name: item.name
			})
		},
		// 连接蓝牙 2
		next_createBLEConnection(state, equipment) {
			let {
				deviceId,
				name
			} = equipment
			uni.showLoading()
			uni.createBLEConnection({
				deviceId,
				success: () => {
					console.log('createBLEConnection success');
					state.name = name
					state.connected = true
					state.deviceId = deviceId
					console.log("连接的设备", state.name)
					this.commit("connect/getBLEDeviceServices", deviceId)
					uni.setStorageSync('LAST_CONNECTED_DEVICE', name + ":" + deviceId)
				},
				complete() {
					uni.hideLoading()
				},
				fail: (res) => {
					console.log('createBLEConnection fail', res)
				}
			})
			this.commit("connect/stopBluetoothDevicesDiscovery")
		},
		// 断开蓝牙连接
		closeBLEConnection(state) {
			uni.closeBLEConnection({
				deviceId: state.deviceId
			})
			state.connected = false
			state.canWrite = false
			state.deviceId = ""
			state._deviceId= ""
			state._serviceId= ""
			state._characteristicId= ""
		},
		// 获取蓝牙服务
		getBLEDeviceServices(state, deviceId) {
			uni.getBLEDeviceServices({
				deviceId,
				success: (res) => {
					console.log('getBLEDeviceServices', res)
					for (let i = 0; i < res.services.length; i++) {
						if (res.services[i].isPrimary) {
							// this.getBLEDeviceCharacteristics(deviceId, res.services[i].uuid)
							this.commit("connect/getBLEDeviceCharacteristics", {
								deviceId,
								serviceId: res.services[i].uuid
							})
							return
						}
					}
				}
			})
		},
		getBLEDeviceCharacteristics(state, idObject) {
			let {
				deviceId,
				serviceId
			} = idObject
			uni.getBLEDeviceCharacteristics({
				deviceId,
				serviceId,
				success: (res) => {
					console.log('getBLEDeviceCharacteristics success', res.characteristics)
					// 这里会存在特征值是支持write，写入成功但是没有任何反应的情况
					// 只能一个个去试
					for (let i = 0; i < res.characteristics.length; i++) {
						const item = res.characteristics[i]
						if (item.properties.write) {
							// this.setData({
							// 	canWrite: true
							// })
							state.canWrite = true
							state._deviceId = deviceId
							state._serviceId = serviceId
							state._characteristicId = item.uuid
							break;
						}
					}
				},
				fail(res) {
					console.error('getBLEDeviceCharacteristics', res)
				}
			})
		},
		closeBluetoothAdapter(state) {
			uni.closeBluetoothAdapter()
			state.discoveryStarted = false
			console.log("关闭蓝牙")
		},
	},
	actions: {

	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

打印数据：print.js

打印数据：页面传递过来的要打印的数据是一个对象，为了避免数据没有及时更新的问题，所以存储这个对象用的是一个数组（printData），这个打印数据会传递到打印模板 (template.js) 中
打印类型：每个页面都对应一个打印的模板，这个模板存储在 print/printTheTemplat/template.js 文件中，打印的时候会根据传递的打印类型打印相应的模板

/**
 * 打印的相关数据
 */
export default {
	namespaced: true,
	state: {
		printType: "", // 打印类型
		printData: [], // 打印的数据
	},
	getters: {
		// 获取打印类型
		getPrintType: state => state.printType,
		// 获取打印数据
		getPrintData: state => state.printData
	},
	mutations: {
		// 更新打印数据和打印类型
		updatePrintData(state, printObj) {
			let {
				printData,
				printType
			} = printObj
			console.log("接收到的数据", printObj)
			state.printType = printType
			state.printData = []
			state.printData.push(printData)
		}
	},
	actions: {

	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

print文件夹相关文件讲解

打印常量 pritConstant.js

// 打印的常量
export const REGISTRATION = "registration" // 退款单/收款单
export const CARSALES = "carSales" // 车销单
export const INVENTORY = "inventory" // 盘点详情
export const DAILY = "daily" // 销售日报
export const CUSTOMER = "customer" //客户汇总
export const COMMODITY = "commodity" // 商品汇总
export const STOCK = "stock" // 库存汇总
1
2
3
4
5
6
7
8

打印模板 template.js

// 模板
// printerJobs
// 	.print('2018年12月5日17:34')
// 	.print(printerUtil.fillLine())
// 	.setAlign('ct')
// 	.setSize(2, 2)
// 	.print('#20饿了么外卖')
// 	.setSize(1, 1)
// 	.print('切尔西Chelsea')
// 	.setSize(2, 2)
// 	.print('在线支付(已支付)')
// 	.setSize(1, 1)
// 	.print('订单号：5415221202244734')
// 	.print('下单时间：2017-07-07 18:08:08')
// 	.setAlign('lt')
// 	.print(printerUtil.fillAround('一号口袋'))
// 	.print(printerUtil.inline('意大利茄汁一面 * 1', '15.00'))
// 	.print(printerUtil.fillAround('其他'))
// 	.print('餐盒费：1')
// 	.print('[赠送康师傅冰红茶] * 1')
// 	.print(printerUtil.fillLine())
// 	.setAlign('rt')
// 	.print('原价：￥16.00')
// 	.print('总价：￥16.00')
// 	.setAlign('lt')
// 	.print(printerUtil.fillLine())
// 	.print('备注')
// 	.print("无")
// 	.print(printerUtil.fillLine())
// 	.println();
import {
	REGISTRATION,
	CARSALES,
	INVENTORY,
	DAILY,
	CUSTOMER,
	COMMODITY,
	STOCK
} from "../../utils/pritConstant.js"
const PrinterJobs = require('../sdk/printer/printerjobs.js')
const printerUtil = require('../sdk/printer/printerutil')
let printerJobs = new PrinterJobs();

export default {
	// 收款单
	[REGISTRATION]: (array) => {
		console.log("打印接收的数据", array)
		let data = array[0]
		let prefix = ""
		data.order_type == 1 ? prefix = "收款" : prefix = "退款"
		printerJobs
			.setAlign('ct')
			.setSize(2, 2)
			.print(`${prefix}单`)
			.lineFeed()
			.setSize(1, 1)
			.setAlign('lt')
			.print(printerUtil.inline(`${prefix}单号`, data.pay_sn))
			.print(printerUtil.inline('客户名称', data.client_name))
			.print(printerUtil.fillLine())
		if (data.order_type == 1) {
			printerJobs.print(printerUtil.inline(`${prefix}类型`, data.pay_type))
		}
		printerJobs.print(printerUtil.inline(`${prefix}金额`, data.pay_money))
			.print(printerUtil.inline('优惠金额', data.dicount_money))
			.print(printerUtil.inline(`${prefix}方式`, data.pay_method))
			.print(printerUtil.inline(`${prefix}时间`, data.pay_time))
			.print(printerUtil.fillLine())
			.print(printerUtil.inline('经办人', data.operator))
			.print(printerUtil.inline('提交人', data.userName))
			.print(printerUtil.inline('提交日期', data.created_at))
			.print(printerUtil.fillLine())
			.print('审批历程')
		data.log_list.forEach(item => {
			printerJobs.print(item.username + '' + item.contents)
		})
		printerJobs.print(printerUtil.doubleFillLine())
			.print('业代签字')
			.lineFeed(2)
			.println();

		return {
			buffer: printerJobs.buffer(),
			printerJobs
		};
	},
	// 车销单
	[CARSALES]: (array) => {
		let data = array[0]
		printerJobs
			.setAlign('ct')
			.setSize(2, 2)
			.print('车销单')
			.lineFeed()
			.setSize(1, 1)
			.setAlign('lt')
			.print(printerUtil.inline('客户名称', data.shopClient.username))
			.setBold(false)
			.print(printerUtil.inline('状态', data.status_name))
			.print(printerUtil.inline('销售单编号', data.order_sn))
			.print(printerUtil.inline('提交日期', data.created_at))
			.print(printerUtil.inline('客户经理', data.member.username))
			.print(printerUtil.doubleFillLine())
			.print(printerUtil.inline('销售清单', `共${data.products_list.length}种`))

		data.products_list.forEach(item => {
			printerJobs.print(item.product_name)
				.print(printerUtil.inline(`   数量:${item.num}`, `单价:${item.price}`))
				.print(`   金额:${(item.price * 1 * item.num)}`)
		})


		printerJobs.print(printerUtil.fillLine())
			.print(printerUtil.inline('销售金额', `${data.pay_money}`))
			.print(printerUtil.inline('退货金额', `${ data.refuned_money}`))
			.print(printerUtil.inline('本单应收', `${data.remain_money}`))
			.print(printerUtil.fillLine())
			.print('收款记录')
			.print(printerUtil.inline('记录数量', `${data.log_list.length}`))
			// .print(printerUtil.inline('收款核销', '230.00'))
			// .print(printerUtil.inline('欠款', '230.00'))
			.print(printerUtil.doubleFillLine())
			.print('业代签字')
			.lineFeed(2)
			.println();

		return {
			buffer: printerJobs.buffer(),
			printerJobs
		};
	},
	// 盘点详情
	[INVENTORY]: (array) => {
		let data = array[0]
		let {
			products_list,
			log_list
		} = data
		let status = ""
		data.status == 0 ? status = "待审批" : data.status == 1 ? status = "已通过" : status = "作废"
		let range = data.order_type && data.order_type == 2 ? "部分盘点" : "全部盘点"
		printerJobs
			.setAlign('ct')
			.setSize(2, 2)
			.print('盘点详情')
			.lineFeed()
			.setSize(1, 1)
			.setAlign('lt')
			.print(printerUtil.inline('盘点单号', `${data.order_sn}`))
			.print(printerUtil.inline('盘点人员', `${data.member.username}`))
			.print(printerUtil.inline('状态', `${status}`))
			.print(printerUtil.inline('盘点范围', `${range}`))
			.print(printerUtil.inline('提交日期', `${data.created}`))
			.print(printerUtil.fillLine())
			.print("商品清单")
		products_list.forEach(item => {
			printerJobs.print(`${item.product_name}`)
				.print(printerUtil.inline(`  账面:${item.num}`, `实盘:${item.diff_num}`))
		})
		if (log_list.length > 0) {
			printerJobs.print(printerUtil.fillLine()).print('审批历程')
			log_list.forEach(item => {
				printerJobs.print(`${item.username} ${item.created_at} [${item.contents}]`)
			})
		} else {
			printerJobs.print(printerUtil.fillLine()).print('审批历程（暂无）')
		}
		printerJobs.print(printerUtil.doubleFillLine())
			.print('业代签字')
			.lineFeed(2)
			.println();

		return {
			buffer: printerJobs.buffer(),
			printerJobs
		};
	},
	// 日报汇总
	[DAILY]: (array) => {
		let data = array[0]
		printerJobs
			.setAlign('ct')
			.setSize(2, 2)
			.print('销售日报')
			.lineFeed()
			.setSize(1, 1)
			.setAlign('lt')
			.setUnderline(true)
			.print(`日期：${data.date}`)
			.print(printerUtil.doubleFillLine())
			.setUnderline(false)
			.print(printerUtil.inline('销售金额', `${data.incomeTotal}`))
			.print(printerUtil.inline('其中:销售金额', `${data.salesTotal}`))
			.print(printerUtil.inline('     退货金额', `${data.returndTotal}`))
			.print(printerUtil.fillLine())
			.print(printerUtil.inline('应收金额', `${data.remainTotal}`))
			.print(printerUtil.fillLine())
			.print(printerUtil.inline('收款金额', `${data.payTotal}`))
			.print(printerUtil.inline('收款优惠', `${data.dicountTotal}`))
			.print(printerUtil.inline('支出费用', `${data.debtTotal}`))
			.print(printerUtil.fillLine())
			.print(`打印时间:${format(new Date(),"full")}`)
			.print(printerUtil.doubleFillLine())
			.print('业代签字')
			.lineFeed()
			.println();

		return {
			buffer: printerJobs.buffer(),
			printerJobs
		};
	},

	// 库存汇总
	[STOCK]: array => {
		printerJobs
			.setAlign('ct')
			.setSize(2, 2)
			.print('库存汇总')
			.lineFeed()
			.setSize(1, 1)
			.setAlign('lt')
			.setUnderline(true)
			.print('日期:2021-07-19   仓库:一号仓库')
			.print(printerUtil.doubleFillLine())
			.print(printerUtil.inline('正常品清单', '共0家'))
			.print(printerUtil.fillLine())
			.print(printerUtil.centerInline('白酒商品名称', '库存量', '金额'))
			.print(printerUtil.centerInline('白酒', '2000', '0.35'))
			.print(printerUtil.centerInline('白酒', '2000', '5000'))
			.print(printerUtil.centerInline('燕京330吉祥红佳节订单', '1000', '7000'))
			.print(printerUtil.fillLine())
			.print(printerUtil.inline('合计', '0.35'))
			.print('打印时间:2021-07-19 17:34')
			.print('业务员:张三')
			.print(printerUtil.doubleFillLine())
			.print('业代签字')
			.lineFeed()
			.lineFeed()
			.println();

		return {
			buffer: printerJobs.buffer(),
			printerJobs
		};
	}
}



// 时间处理
function format(shijianchuo, type) {
	//shijianchuo是整数，否则要parseInt转换
	var time = new Date(shijianchuo);
	var y = time.getFullYear();
	var m = time.getMonth() + 1;
	var d = time.getDate();
	var h = time.getHours();
	var mm = time.getMinutes();
	var s = time.getSeconds();

	if (type == "full") {
		return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' +
			add0(s);
	} else {
		return y + '-' + add0(m) + '-' + add0(d);
	}
}

function add0(m) {
	return m < 10 ? '0' + m : m
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272

sdk相关讲解

具体sdk可以下载 github上的代码，这里只展示在printerutil.js文件中添加的几个方法

/**
 * 一排三列
 * 同一行输出str1, str2，str3，str1居左, str2居中偏右，str3居右
 * @param {string} str1 内容1 固定宽度 占可打印宽度的3/5
 * @param {string} str2 内容2 
 * @param {string} str3 内容3
 * @param {number} fontWidth 字符宽度 1/2
 * @param {string} fillWith str1 str2之间的填充字符
 *
 */
function centerInline(str1, str2, str3, fillWith = ' ', fontWidth = 1) {
	const lineWidth = MAX_CHAR_COUNT_EACH_LINE / fontWidth;
	let newStr1 = setString(str1, 14)
	console.log("截取的字符", newStr1)
	console.log("newStr1的字符长度", getStringWidth(newStr1))
	// 需要填充的字符数量
	let fillCount = lineWidth - (getStringWidth(newStr1) + getStringWidth(str2) + getStringWidth(str3)) % lineWidth;
	let leftWidth = Math.round(lineWidth / 5 * 3);
	console.log("fillcount", fillCount)
	console.log("左侧的字符长度", getStringWidth(str1))

	let leftCount = leftWidth - getStringWidth(newStr1) % lineWidth
	let rightCount = fillCount - leftCount
	let lefFillStr = new Array(leftCount).fill(fillWith.charAt(0)).join('');
	let rightFillStr = new Array(rightCount).fill(fillWith.charAt(0)).join('');
	return newStr1 + lefFillStr + str2 + rightFillStr + str3;
}

// 截取字符串，多余的部分用...代替  
function setString(str, len) {
	var strlen = 0;
	var s = "";
	for (var i = 0; i < str.length; i++) {
		if (str.charCodeAt(i) > 128) {
			strlen += 2;
		} else {
			strlen++;
		}
		s += str.charAt(i);
		if (strlen >= len) {
			return s + '...'
		}
	}
	return s;
}
/**
 * 用 = 字符填充一整行
 * @param {string} fillWith 填充字符
 * @param {number} fontWidth 字符宽度 1/2
 */
function doubleFillLine(fillWith = '=', fontWidth = 1) {
	const lineWidth = MAX_CHAR_COUNT_EACH_LINE / fontWidth;
	return new Array(lineWidth).fill(fillWith.charAt(0)).join('');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

打印页面

print.vue

注意点：在调用打印或者是退出页面的时候要清理掉上一次打印的数据，这个可以通过 printerJobs 对象里的 clear() 方法实现清理数据， printerJobs 对象会在调用打印模板的时候返回，这个时候我们需要将printerJobs 对象保存在data中

<template>
	<view class="container">
		<view class="page-section">
			<view class="devices-summary my-2 flex items-center">
				<view>已发现 {{getDevices.length}} 个设备</view>
				<view class="ml-2" v-if="getDiscoveryStarted">
					<u-loading mode="flower"></u-loading>
				</view>
			</view>
			<scroll-view class="device-list" scroll-y scroll-with-animation>
				<view class="scroll_box mx-3 p-2 px-4" v-if="getDevices.length>0">
					<view v-for="(item,index) in getDevices" :key="item.deviceId" @click="connect(item)"
						class="device-item">
						<view class="item_left" style="font-size: 15px; color: #333;">{{item.name}}</view>
						<view class="item_right" style="font-size: 15px;" v-if="getConnectDeviceId == item.deviceId">已连接
						</view>
					</view>
				</view>
				<view class="scroll_box mx-3 p-2 px-4 null_box" v-else>
					暂无可连接设备
				</view>
			</scroll-view>
			<view class="py-4 px-3 w-full">
				<view class="info_box p-2 bg-white" v-if="getConnected">
					已连接设备： {{getName}}
				</view>
				<view class="info_box p-2 bg-white" v-else>
					暂未连接设备
				</view>
			</view>
			<view class="btn-area">
				<view class="btn_box px-4">
					<view class="btn_view" type="primary" @click="refreshDiscovery">重新扫描</view>
				</view>
				<view class="btn_box px-4">
					<view class="btn_view" @click="stopDiscovery" style="margin-top: 10px;">停止扫描</view>
				</view>
			</view>
		</view>
		<view class="page-section connected-area" v-if="getConnected">
			
			<view class="btn-area">
				<view class="btn_box px-4" style="margin-bottom: 10px;margin-top: 10px;">
					<view class="btn_view" type="primary" @click="writeBLECharacteristicValue">
						打印
					</view>
				</view>
				<view class="btn_box px-4">
					<view class="btn_view" @click="closeBLEConnection">断开连接</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	const LAST_CONNECTED_DEVICE = 'last_connected_device'
	const PrinterJobs = require('./sdk/printer/printerjobs')
	const printerUtil = require('./sdk/printer/printerutil')

	import printObject from "./printTheTemplate/template.js"
	import {
		mapGetters
	} from "vuex"

	function inArray(arr, key, val) {
		for (let i = 0; i < arr.length; i++) {
			if (arr[i][key] === val) {
				return i
			}
		}
		return -1
	}

	// ArrayBuffer转16进度字符串示例
	function ab2hex(buffer) {
		const hexArr = Array.prototype.map.call(
			new Uint8Array(buffer),
			function(bit) {
				return ('00' + bit.toString(16)).slice(-2)
			}
		)
		return hexArr.join(',')
	}

	function str2ab(str) {
		// Convert str to ArrayBuff and write to printer
		let buffer = new ArrayBuffer(str.length)
		let dataView = new DataView(buffer)
		for (let i = 0; i < str.length; i++) {
			dataView.setUint8(i, str.charAt(i).charCodeAt(0))
		}
		return buffer;
	}
	export default {
		data() {
			return {
				devices: [],
				connected: false,
				discoveryStarted: false,
				chs: [],
				name: "",
				deviceId: "",
				canWrite: false,
				lastDevice: "",
				printerJobs: null
			}
		},
		computed: {
			...mapGetters("print", ['getPrintType', 'getPrintData']),
			...mapGetters("connect", ['getDevices', 'getDiscoveryStarted', 'getName', 'getConnected', 'getConnectDeviceId',
				'getServiceId',
				'getCharacteristicId'
			])
		},
		onShow() {
			console.log(this.getDiscoveryStarted, this.getConnected)
			if (!this.getDiscoveryStarted && !this.getConnected) {
				this.$store.commit("connect/initConnect")
			}
			// const lastDevice = uni.getStorageSync(LAST_CONNECTED_DEVICE);
			// this.lastDevice = lastDevice
			// if (this.lastDevice) {
			// 	this.createBLEConnectionWithDeviceId()
			// } else {
			// 	this.openBluetoothAdapter()
			// }
		},
		onUnload() {
			// 清理上一次打印的数据
			this.printerJobs && this.printerJobs.clear()
		},
		methods: {
			connect(item) {
				// createBLEConnection(item)
				this.$store.commit("connect/createBLEConnection", item)
			},
			refreshDiscovery() {
				this.$store.commit("connect/startBluetoothDevicesDiscovery")
			},
			stopDiscovery() {
				this.$store.commit("connect/stopBluetoothDevicesDiscovery")
			},
			closeBLEConnection(){
				this.$store.commit("connect/closeBLEConnection")
			},
			writeBLECharacteristicValue() {
				if (this.printerJobs) {
					// 清理上一次打印的数据
					this.printerJobs.clear()
				}
				let {
					buffer,
					printerJobs
				} = printObject[this.getPrintType](this.getPrintData)
				this.printerJobs = printerJobs
				// console.log("buffer", buffer)
				// console.log('ArrayBuffer', 'length: ' + buffer.byteLength, ' hex: ' + ab2hex(buffer));
				// 1.并行调用多次会存在写失败的可能性
				// 2.建议每次写入不超过20字节
				// 分包处理，延时调用
				const maxChunk = 20;
				const delay = 20;
				for (let i = 0, j = 0, length = buffer.byteLength; i < length; i += maxChunk, j++) {
					let subPackage = buffer.slice(i, i + maxChunk <= length ? (i + maxChunk) : length);
					setTimeout(this._writeBLECharacteristicValue, j * delay, subPackage);
				}
			},
			_writeBLECharacteristicValue(buffer) {
				uni.writeBLECharacteristicValue({
					deviceId: this.getConnectDeviceId,
					serviceId: this.getServiceId,
					characteristicId: this.getCharacteristicId,
					value: buffer,
					success(res) {
						console.log('writeBLECharacteristicValue success', res)
					},
					fail(res) {
						console.log('writeBLECharacteristicValue fail', res)
					}
				})
			},
			closeBluetoothAdapter() {
				uni.closeBluetoothAdapter()
				this.discoveryStarted = false
			},
			createBLEConnectionWithDeviceId(e) {
				// 小程序在之前已有搜索过某个蓝牙设备，并成功建立连接，可直接传入之前搜索获取的 deviceId 直接尝试连接该设备
				const device = this.lastDevice
				if (!device) {
					return
				}
				const index = device.indexOf(':');
				const name = device.substring(0, index);
				const deviceId = device.substring(index + 1, device.length);
				console.log('createBLEConnectionWithDeviceId', name + ':' + deviceId)
				uni.openBluetoothAdapter({
					success: (res) => {
						console.log('openBluetoothAdapter success', res)
						this._createBLEConnection(deviceId, name)
					},
					fail: (res) => {
						console.log('openBluetoothAdapter fail', res)
						if (res.errCode === 10001) {
							uni.showModal({
								title: '错误',
								content: '未找到蓝牙设备, 请打开蓝牙后重试。',
								showCancel: false
							})
							uni.onBluetoothAdapterStateChange((res) => {
								console.log('onBluetoothAdapterStateChange', res)
								if (res.available) {
									// 取消监听
									uni.onBluetoothAdapterStateChange(() => {});
									this._createBLEConnection(deviceId, name)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 2rpx solid #EEE;
		// padding: 30rpx 0;
	}

	.devices-summary {
		padding: 10rpx;
		font-size: 30rpx;
	}

	.device-list {
		height: 400rpx;

		.scroll_box {
			background: #FAFAFA;
			height: 400rpx;

			.device-item {
				// border-bottom: 1rpx solid #EEE;
				padding: 20rpx;
				color: #666;
				background-color: white;
				margin: 10upx 0upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item_left {
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-right: 20upx;
				}

				.item_right {
					color: #CCCCCC;
				}
			}
		}

		.null_box {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			color: #CCCCCC;
		}
	}



	.device-item-hover {
		background-color: rgba(0, 0, 0, .1);
	}

	.btn-area {
		box-sizing: border-box;
		width: 100%;
		// padding: 0 30rpx;
	}

	.connected-area {
		font-size: 22rpx;
	}

	.connected-info {}

	.input-area {
		background: #fff;
		margin-top: 10rpx;
		width: 100%;
	}

	.input {
		font-size: 28rpx;
		height: 2.58823529em;
		min-height: 2.58823529em;
		line-height: 2.58823529em;
		padding: 10rpx;
	}

	.btn_box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn_view {
			width: 100%;
			height: 80upx;
			background-color: $colorred;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10upx;
			font-size: 30upx;
		}
	}

	.info_box {
		width: 100%;
		text-align: center;
		font-size: 28upx;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/559036