MUI蓝牙打印(Android)
使用MUI开发手机APP时使用蓝牙打印功能可能较少使用,MUI官方并为集成蓝牙打印功能,而且似乎对iPhone蓝牙打印的类库支持也不够完善。忙完一阶段后回顾下之前的工作,想想蓝牙打印功能折腾了够长时间了,写这篇文章既是自己做个总结,也希望能给遇到同样为蓝牙打印功能挣扎的人带来一点帮助。
感谢以下几篇文章给予的帮助。
- Android 蓝牙连接 ESC/POS 热敏打印机打印(ESC/POS指令篇)
-
以下打印的代码中使用了一些NativeJS的方法,如果对NativeJS没有了解的朋友,建议自行Google一下。我们直接上代码。
页面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" href="../../css/wg-common.css">
<link rel="stylesheet" href="../../css/iconfont.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<title></title>
</head>
<style>
.wg-info-title {
background-color: white;
color: #007AFF;
}
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
</style>
<body>
<header class="mui-bar mui-bar-nav" style="padding-top: 2px;">
<div style="float: left;padding-right: 8px;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
</div>
<h1 id="title" class="mui-title">打印</h1>
<div style="float: right;padding-right: 8px;">
<a class="mui-icon mui-icon-refreshempty" id="btnRefresh"></a>
</div>
</header>
<div class="mui-content mui-content-padded">
<h5 class="mui-content-padded">点击设备