微信小程序RequestTask.onChunkReceived返回的数据流如何解析?微信小程序不支持TextDecoder怎么办?

最近踩坑不少,关于微信小程序如何解决数据流的问题,总结一下

1、下载js文件

miniprogram/miniprogram-text-decoder.js at main · 123456789xzxz/miniprogram · GitHub

miniprogram/miniprogram-text-encoder.js at main · 123456789xzxz/miniprogram · GitHub

然后按需要引入就行

import TextDecoder from './miniprogram-text-decoder'

import TextEncoder from './miniprogram-text-encoder'

文件下载来后,引入小程序:

import TextDecoder from '@/utils/miniprogram-text-decoder'

使用方式:

javascript 复制代码
let tempUint8Array = new Uint8Array(0)
const requestTask = wx.request({
    url: baseURL,
    timeout: 15000,
    method: 'post',
    enableChunked: true, // 开启分片模式
    header: { },
    data: param
})
requestTask.onChunkReceived((response) => {
    const arrayBuffer = new Uint8Array(response.data)
    let str = new TextDecoder().decode(arrayBuffer)
    console.log('deMessage', str)
}

2、Protobuf 处理

1、下载依赖

需要注意下Protobuf版本 使用 protobufjs@6.8.6最好,我在使用的时候安装7.多 莫名奇妙

css 复制代码
npm install -g protobufjs@6.8.6

2、执行pbjs

3、转换proto文件

将文件流回来的数据格式在网站JSON转Protobuf,在线JSON转Protobuf - 图灵工具 在线工具系统

上转化为标准的proto文件,新建文件awesome.proto,将转化好的文件复制进去,保存;

执行命令

复制代码
pbjs -t json awesome.proto > awesome.json

运行之后会生成一个 awesome.json文件

json 复制代码
"nested": {
        "AwesomeMessage": {
            "fields": {
                "awesomeField": {
                    "type": "string",
                    "id": 1
                }
            }
        }
    }
复制代码
4、转js文件

此时的json文件我们不能直接使用,不过我们可以将json对象取出放到小程序项目当中去,比如在小程序项目中新建一个awesome.js

java 复制代码
module.exports = {
    "nested": {
        "AwesomeMessage": {
            "fields": {
                "awesomeField": {
                    "type": "string",
                    "id": 1
                }
            }
        }
    }
};
5、最后使用
javascript 复制代码
// 引入
var protobuf = require('../../weichatPb/protobuf') //引入protobuf模块
var awesomeConfig = require('@/utils/protobuf/protobuf.js') //加载awesome.proto对应的json
//awesome
var AwesomeRoot = protobuf.Root.fromJSON(awesomeConfig)
var AwesomeMessage = AwesomeRoot.lookupType('AwesomeMessage')
//awesome


test1() {
      var payload = {awesomeField: "我是test1"};
      var message = AwesomeMessage.create(payload)
      var buffer = AwesomeMessage.encode(message).finish()
      console.log('buffer', buffer)
      var deMessage = AwesomeMessage.decode(buffer)
      console.log('deMessage', deMessage)
    }
相关推荐
JosieBook32 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端1 小时前
claude code 原理分析
前端
GalaxyMeteor1 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮1 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js