微信小程序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)
    }
相关推荐
excel3 分钟前
前端项目中的测试分类与实践 —— 以 Vue 项目为例
前端
宋辰月4 分钟前
echarts项目积累
前端·javascript·echarts
du青松8 分钟前
onlyoffice 服务搭建及配置 - 前端 office 文件预览解决方案
前端
北海-cherish29 分钟前
Wouter 和 React Router的区别
前端·react.js·前端框架
郝学胜-神的一滴37 分钟前
深入理解前端 Axios 框架:特性、使用场景与最佳实践
开发语言·前端·程序人生·软件工程
笨笨狗吞噬者1 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
Filotimo_1 小时前
2.CSS3.(1).html
前端·css
YAY_tyy2 小时前
【JavaScript 性能优化实战】第五篇:运行时性能优化进阶(懒加载 + 预加载 + 资源优先级)
前端·javascript·性能优化
1024小神2 小时前
flutter 使用dio发送本地https请求报错
前端
正义的大古2 小时前
OpenLayers地图交互 -- 章节七:指针交互详解
前端·javascript·vue.js·openlayers