微信小程序JS 字符串string与arraybuffer的相互转换

本文记录了在微信小程序中使用UDP进行服务器通信时,如何处理字符串与ArrayBuffer的转换。内容包括从字符串到ArrayBuffer的转换函数,以及ArrayBuffer回转为字符串的方法,这些函数支持中文和英文。示例代码展示了在发送登录请求时如何应用这些转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写微信小程序用udp与服务器通信时message只可以用string和arraybuffer类型,我用了arraybuffer类型,此时涉及到string与arraybuffer的相互转换故记录所用函数以免以后忘记
通过先将字符串编码并转换为byte[],再转换为对应的arraybuffer(解析同理,先将arraybuffer转换为byte[],再进行解码)
    编码及解码的过程较复杂,不过这两个函数是可以直接使用的,同时支持中文和英文。
    
代码局部:

 
    //字符串内容转arraybuffer
    //以下包括包头、包长和版本号,一共10个字符长度,如不需要可删除,同时把内容中的array[i+10]改为array[i]
    stringToArrayBuffer:function (str) {
      var bytes = new Array(); 
      var len,c;
      len = str.length;
      for(var i = 0; i < len; i++){
        c = str.charCodeAt(i);
        if(c >= 0x010000 && c <= 0x10FFFF){
          bytes.push(((c >> 18) & 0x07) | 0xF0);
          bytes.push(((c >> 12) & 0x3F) | 0x80);
          bytes.push(((c >> 6) & 0x3F) | 0x80);
          bytes.push((c & 0x3F) | 0x80);
        }else if(c >= 0x000800 && c <= 0x00FFFF){
          bytes.push(((c >> 12) & 0x0F) | 0xE0);
          bytes.push(((c >> 6) & 0x3F) | 0x80);
          bytes.push((c & 0x3F) | 0x80);
        }else if(c >= 0x000080 && c <= 0x0007FF){
          bytes.push(((c >> 6) & 0x1F) | 0xC0);
          bytes.push((c & 0x3F) | 0x80);
        }else{
          bytes.push(c & 0xFF);
        }
      }

      var array = new Int8Array(bytes.length+10);
      //包头
      array[0]=239;
      array[1]=207;
      array[2]=254;
      array[3]=252;
      //包长
      var leng=2+bytes.length;
      console.log('leng='+leng)

if(leng<=255){
  array[4]=leng;
      array[5]=0;
      array[6]=0;
      array[7]=0;
}else{
  array[4]=leng%256;
  array[5]=parseInt(leng/256);
  array[6]=0;
  array[7]=0;
}
      //版本号
      array[8]=0;
      array[9]=1;
      //内容
      for(var i=0 ;i<=bytes.length;i++){
        array[i+10] =bytes[i];
      }
      return array.buffer;
    },

//arraybuffer转字符串
     arrayBufferToString:function(arr){
      if(typeof arr === 'string') {  
          return arr;  
      }  
      var dataview=new DataView(arr.data);
      var ints=new Uint8Array(arr.data.byteLength);
      for(var i=0;i<ints.length;i++){
        ints[i]=dataview.getUint8(i);
      }
      arr=ints;
      var str = '',  
          _arr = arr;  
      for(var i = 0; i < _arr.length; i++) {  
          var one = _arr[i].toString(2),  
              v = one.match(/^1+?(?=0)/);  
          if(v && one.length == 8) {  
              var bytesLength = v[0].length;  
              var store = _arr[i].toString(2).slice(7 - bytesLength);  
              for(var st = 1; st < bytesLength; st++) {  
                  store += _arr[st + i].toString(2).slice(2);  
              }  
              str += String.fromCharCode(parseInt(store, 2));  
              i += bytesLength - 1;  
          } else {  
              str += String.fromCharCode(_arr[i]);  
          }  
      }  
      return str; 
  },

  submit:function(e){
    console.log('登陆按钮被点击了');
    if(this.data.user_name.length==0||this.data.user_pwd==0){
      wx.showToast({
        title: '账号或密码为空',
        icon: "none",
        duration: 1000
      })
      console.log(this.data.user_name)
    }else{
    const udp = wx.createUDPSocket()
    udp.bind()
    udp.send({
  
      address:'自己的地址',
      port: '自己的端口号',
      
      // message:'{\n"operate":"user_login",\n'+
      // '"user_name":"'+this.data.user_name+'",\n'+
      // '"user_pwd":"'+this.data.user_pwd+'",\n'+
      // '"chip_id":"1"\n}'
      message: this.stringToArrayBuffer(
        '{"chip_id":"xxxxx",'
        +'"operate":"user_login",'+
      '"user_name":"'+this.data.user_name+'",'+
      '"user_pwd":"'+this.data.user_pwd+'"}'),
    })
    
    udp.onMessage(
      (res)=>{
           console.log(res.message)
      }
   
    )
    }
    


  },

所传数据包如下在这里插入图片描述

### 微信小程序解码二进制数据 在微信小程序中处理来自服务器或其他来源的二进制数据时,通常会遇到需要将这些数据转换为可读或可用格式的情况。对于从 `createQRCode` 或者 `getUnlimited` 接口获取到的二维码图片的二进制 buffer 数据,可以使用微信小程序提供的工具函数来进行转换。 #### 将 Base64 编码的数据转换ArrayBuffer 当接收到的是经过 Base64 编码后的字符串形式的二进制数据时,可以通过如下方式将其化为数组缓冲区(ArrayBuffer): ```javascript const base64Data = 'your_base64_encoded_string_here'; const arrayBuffer = wx.base64ToArrayBuffer(base64Data)[^1]; ``` 这段代码展示了如何调用微信内置的方法 `wx.base64ToArrayBuffer()` 来完成这一过程。此方法接收一个 Base64 字符串作为输入,并返回相应的 ArrayBuffer 对象。 #### 处理 ArrayBuffer 并保存为图像文件 一旦拥有了表示图像内容的 ArrayBuffer 后,则可以根据具体需求进一步操作该数据。如果目的是要在本地存储这张图片,那么就可以通过 File System (FS) API 实现这一点。下面是一个简单的例子展示怎样把 ArrayBuffer 存储成本地图片文件: ```javascript // 假设arrayBuffer是从上一步得到的结果 async function saveImageToLocalFile(arrayBuffer){ try { await wx.getFileSystemManager().writeFileSync('/path/to/save/image.png', arrayBuffer, 'binary'); console.log('成功保存图片!'); } catch(e){ console.error('保存失败:', e); } } saveImageToLocalFile(arrayBuffer); ``` 这里需要注意路径 `/path/to/save/` 应替换为你希望保存的位置以及正确的文件名和扩展名。 #### 从 ArrayBuffer 转换回 Base64 编码 有时候可能还需要反向操作——即将 ArrayBuffer 再次编码成 Base64 字符串以便于传输或者其他用途。这也可以很容易做到: ```javascript const arrayBuffer = new Uint8Array([/* your binary data here */]); const base64String = wx.arrayBufferToBase64(arrayBuffer); console.log(`Converted back to base64 string: ${base64String}`); ``` 上述代码片段显示了如何利用 `wx.arrayBufferToBase64()` 方法执行这个逆变换的过程。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值