小程序 输入框过滤，点阵字体传输到蓝牙

序：小程序需要输入文字传输到蓝牙设备，这个是第一次做，以为很简单，确实简单，但也有点难，为什么，因为它不是单纯的传输文字，也不是单纯的传输 ASCII 码，但与两者都有关联，而是传输点阵字体，因为什么呢，因为设备那边的存储有限，放不下字库文件，关键小程序也放不下字库文件，所以这个也要用到服务器，也就是需要后端去计算字库文件获取，小程序将文字上传到后端，接口方法引用生成点阵字体数据返回给小程序，小程序整理发送给蓝牙设备即可。小程序的蓝牙操作就不写了，基本和平常发送蓝牙指令差不多，只是要稍微封装一下数据包而已。

点阵（后端：thinkphp6）

// 文字点阵 16 * 16
public function charToBin(){
    $fontStr = input("str");
    $str = iconv("utf-8","GB2312//IGNORE", $fontStr);
    $fontFile = app()->getRootPath()."/public/xxx"; // 点阵字库文件名
    $fontWidth = 16;  // 单字宽度
    $fontHeight = 16; // 单字高度
    $start_offset = 0; // 偏移
    $fp = fopen($fontFile, "rb");
    $offsetSize = $fontWidth * $fontHeight / 8;
    $dotString = "";
    for ($i = 0; $i < strlen($str); $i++) {
        if (ord($str{$i}) > 160) {
            // 汉字 先求区位码,然后再计算其在区位码二维表中的位置,进而得出此字符在文件中的偏移
            $offset = ((ord($str{$i}) - 0xa1) * 94 + ord($str{$i + 1}) - 0xa1) * $offsetSize;
            $i ++;
        } else {
            // 非汉字
            $offset = (ord($str{$i}) + 156 - 1) * $offsetSize;
        }
        fseek($fp,$start_offset + $offset,SEEK_SET);  // 读取其点阵数据
        $binDot = fread($fp,$offsetSize);
        for ($j = 0; $j < $offsetSize; $j ++) {
            $dotString .= sprintf("%08b",ord($binDot{$j})); // 将二进制点阵数据转化为字符串
        }
    }
    fclose($fp);
    return json(["dotStr"=>$dotString]);
}

过滤

安卓上输入如斗图之类的好像有个bug，它没有直接计算到字符长度，可能是字符串的长度比较长，直接显示到input上，但没有进入到输入框，这个影响不大；

过滤 emoji 表情和空格

// 输入框绑定
listenInput(e) {
  var filterEmoji = (e.detail.value).replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig, "");
    // let val = (e.detail.value).replace(/\s*/g,""); // 去除所有空格
  let val = filterEmoji.replace(/\s*/g,""); // 去除所有空格
  let len = val.length; // 过来后的长度
  if(len <= 18){
    // console.log(val)
    // gbTextLen = charLen(val) * 8;
    this.setData({
      textLen: val.length,
      textVal: val,
    })
  }
},
// 点击输入框 文字清空 页面全局变量 isClickInput 点击第一次清空内容
clickInput(){
  if(isClickInput == 0){
    this.setData({
      textLen: 0,
      textVal: "",
    })
    isClickInput = 1;
  }
},

输入框弹窗代码（dialogShow:false，textLen:0 的参数值你们自己定义一下到data里面）

<!-- 弹窗 -->
<view class="{{dialogShow ? 'dialog_show' : ''}}">
  <view class="dialog_mask" bindtap="_closeDialog"></view>
  <view class="dialog_content"> 
    <view class="dialog_between">
      <text>剩余{{18 - textLen}}个字</text>
    </view>
    <textarea class="dialog_input" bindinput="listenInput" bindtap="clickInput" placeholder="最多可输入18个字" placeholder-class="texts" maxlength="18" value="{{textVal}}"/>
    <view class="dialog_around">
      <view bindtap="dialogClear" class="dialog_tab white_tab_br" hover-class="hover_br">重置</view>
      <view bindtap="dialogSure" class="dialog_tab white_tab_br" hover-class="hover_br">确定</view>
    </view>
  </view>
</view>

css样式

page{
  --main-color:#ff8902;
  --bg-one-color: #F0F0F0F2;
  --bg-two-color: #EEEEEEF2;
  --font-4f: #4F4F4F;
  --font-51: #515151;
}
.dialog_mask {display: none;opacity: 0;background-color: rgba(0, 0, 0, 0.49);width: 100%;position: fixed;left: 0;top: 0;bottom: 0; z-index:888;transition: all .3s ease-in-out;}
.dialog_content{width:100%;max-width: 480px;padding:30px 20px;margin-bottom: 15px;box-sizing: border-box;background: linear-gradient(180deg, var(--bg-one-color), var(--bg-two-color));box-shadow: 3px 2px 5px var(bg-hover-color);border-radius: 16px;box-sizing: border-box;position: fixed; z-index: -1;left:-52%;top: 35%;transform: translate(-50%,-50%);opacity: 0;transition: all .3s ease-in-out;}

.dialog_show .dialog_mask{display: block;opacity: 1;}
.dialog_show .dialog_content{opacity: 1;z-index: 999;left:50%;}
.dialog_between{display: flex;justify-content: space-between;align-items: center;font-size: 15px;margin-bottom: 12px;}
.dialog_clear{color: var(--font-89);font-size: 18px;}
.dialog_input{width: 100%;height: 100px;padding:8px 12px;box-sizing: border-box;border: 1px solid #B8B8B8;border-radius: 6px;margin-bottom: 15px;}
.dialog_around{display: flex;justify-content: space-around;align-items: center;}
.dialog_around .dialog_tab{width: 80px;padding:10px 20px;text-align: center;border-radius: 12px;}
.dialog_around .dialog_tab:first-child{color: var(--font-51);}
.dialog_around .dialog_tab:last-child{color: var(--main-color);}

点阵字库：

16*16：https://github.com/lmshao/hzk-osd

12*、16*、24*：GitHub - latelee/HZKSDLProject

12*、16*：hzk-pixel-font/assets/hzk-fonts at master · TakWolf/hzk-pixel-font · GitHub

16*、24*、32*、40*、48*、其他：HZK16/字库 at main · shanshanjade/HZK16 · GitHub