微信小程序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)
    }
相关推荐
玲小珑几秒前
Next.js 教程系列(七)服务端渲染 (SSR) 深度探究:`getServerSideProps`
前端·next.js
FogLetter几秒前
闭包:JavaScript中的魔法背包
前端·javascript
前端小巷子1 分钟前
浏览器的同源策略与跨域问题
前端·面试·浏览器
江城开朗的豌豆1 分钟前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
Endeavour_T8 分钟前
ECharts图表怎么做自适应?
前端·echarts
bo521009 分钟前
浏览器缓存优先级
前端·面试·浏览器
namehu9 分钟前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
opbr11 分钟前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
G等你下课16 分钟前
使用 Cookie 实现登录登出功能案例
前端·后端
西瓜树枝21 分钟前
antd vue全局自定义样式前缀实践
前端·vue.js