微信小程序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)
    }
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript