wx.request()已经设置了enableChunked:true，但是实际收到的结果是这样的，结果是分段的，但是确实一次性返回： [图片] 用Postman请求又没有问题，返回是分段式返回的 [图片] 大家帮忙看看是哪里有问题呢？基础库版本是2.25.4 代码如下： test() {         const that = this;         const requestTask = wx.request({             url: 'https://keyue.cloud.baidu.com/online/core/v5/stream/query',             method: 'POST',             responseType: "arraybuffer",             enableChunked: true, //关键！开启流式传输模式             header: {                 'content-type': 'application/json',             },             header: {                 token: that.data.token             },             data: {                 "queryText": '',                 "sessionId": ''             },             success: (res) => {                 console.log("结束----request success", res);             },             fail: (err) => {                 console.log("request fail", err);             },         });         // 监听请求头接受事件         requestTask.onHeadersReceived(r => {});         // 监听数据分块接收事件         requestTask.onChunkReceived((response) => {             // 收到流式数据，根据返回值进行相对应数据解码             let data16 = that.buf2hex(response.data)             let responseText = that.hexToStr(data16)             // 将处理好的字符串加入到数据中             console.log(responseText)         });     },     buf2hex(buffer) {         return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');     },     hexToStr(hex) {         let str = '';         for (let i = 0; i < hex.length; i += 2) {             str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));         }         return str;     }

小程序实现打字机流式数据输出，有两种方案，一种就是小程序自身实现，另外一种就是使webView转接到 h5 间接实现。 小程序自身实现就是用 uni.request 的 enableChunked 分块数据配置项 const requestTask = uni.request({ url: '服务地址',  timeout: 100000,  responseType: 'text',  method: 'GET',  enableChunked: true, //配置这里  data: {}, }) // 返回的 requestTask 拥有一个 onChunkReceived 监听回调 onChunkReceived 的回调参数： res:data (ArrayBuffer)：接收到的分块数据。 requestTask.onChunkReceived(res => { // res 流式数据 注意：这里可能是多块数据，服务推送多次信息，onChunkReceived只响应一次，则该次监听的内容就是服务器推送多次拼接在一起的字符串，需要单独裁剪额外处理 try { // 解码分块数据 const uint8Array = new Uint8Array(res.data);   let test = String.fromCharCode.apply(null, uint8Array);   test = decodeURIComponent(escape(test));   let testArr = test.split('data:'); console.log(testArr, '====9999==='); // 这里就是服务器推送的原始内容 // 后续用户自己的操作。。。 } catch(err){ console.error('推送数据结构异常！', err); } }) requestTask.abort() // 手动关闭链接 webView转接到 h5 间接实现 使用 h5 内嵌的话，那就正常跟 web端实现一样，使用 EventSource（单项数据流） 实例（因为小程序端没有 EventSource 实例，所以不可用），EventSource 方案只支持 get 请求，所以传参可能会复杂些 let eventSource = new EventSource('服务链接+传参'); eventSource.onopen = (e) => { // 链接建立成功的钩子 } eventSource.onerror= (e) => { // 链接异常抛出的钩子 } eventSource.onmessage = (e) => { // 服务端推送信息捕获的钩子，服务端推送一次就会触发一次 https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource/EventSource } eventSource.close() // 手动关闭链接

提到ios系统的橡皮筋效果，作为开发者是又爱又恨，有想要这个效果又有不想要的，无奈的是却没有一个简单的开关来设置这个效果是否开启。 最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题，这里分两部分（取消橡皮筋回弹效果和因为这个效果遇到的坑）和大家分享一下。   取消IOS橡皮筋回弹效果的解决方案 1) 页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]{ "disableScroll":true } [代码] 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1   2) 页面有滚动区域，滚动区域通过view模拟实现，然后在页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]json文件配置 { "disableScroll":true } view元素模拟实现滚动样式 { height: calc(100vh - 120rpx); //高度必须是固定的值 overflow-y: auto; } [代码] 不足之处在于view元素模拟的滚动区域滚动时不够连贯，没有scroll-view那种原生丝滑般的感觉。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2   3) 页面有滚动区域，滚动区域使用scroll-view,这时通过disableScroll则无法实现，尝试设置一下scroll-view的scroll-y="{{false}}"，上拉或下拉时居然不再触发橡皮筋的回弹啦，当然滚动区域也不能滚动。 小脑袋动一动，解决方法有啦！ 通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。 监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动，从而阻止回弹。 监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true，再次开启页面滚动。 [代码]wxml滚动区域属性和事件处理，具体实现请点击测试代码链接 <scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" bindtouchstart="touchstart" bindtouchmove="touchmove"> <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view> [代码] 相对view模拟实现滚动区域，scroll-view滚动更丝滑，不过每次滚动到底部或顶部的时候，再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉，暂时没想到好的解决方法，有解决的大佬希望提供一下想法，一起学习下。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3   IOS橡皮筋效果遇到的坑 1) 操作左滑删除组件时上下移动，会触发橡皮筋效果导致页面抖动的问题 这个坑的严重程度看设计师的意愿了，反正我们团队目前是需要解决的，方案类似取消橡皮筋解决方案的第三种 在左滑的时候关闭scroll-view的滚动，取消时再次开启滚动   2) 如果页面顶部有置顶的横向滚动区域scroll-view，当页面滚动到底部时继续上拉会导致置顶头部消失，松开回弹后头部又会出现。 坑是社区里的朋友提出来的，我借了个iphone x 一预览，我嚓，还是真是个奇坑！ 微信官方回复已复现正在解决中… 不想继续等下去的，暂时解决方法是 监听页面的滚动区域，当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。   写在最后 以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享，示例代码已上传github,可自行下载体验。 https://github.com/YuniorZen/minicode-debug/tree/master/minicode01 目前微信官方虽说已经着手解决(已两年)此类bug，但哪吒说 我命由我不由天，所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出，没有涉及到的坑也欢迎评论提出，一起学习和解决，后续也会基于此篇不断更新总结。

复现方式如下： 设置页面启动参数[图片] 2 使用 Android 手机真机预览，并点击“重新进入小程序”，过程如视频：https://assets-phi.vercel.app/issue/1655360013201439.mp4 3 使用 iOS 手机真机预览，并点击“重新进入小程序”，过程如视频：https://assets-phi.vercel.app/issue/1655361682840191.mp4

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次放入到高度最低的那一栏。 先上代码：https://developers.weixin.qq.com/s/Fgm5s1mz7Wdm 所谓简单，是指只考虑图片，图片之外的其他元素高度固定，不在考虑范围内。 说一下基本的实现思路： 1、加载列表数据 2、在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储 3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度 我也考虑过在第二步bindload获取到宽高后就直接插入到栏位中，但是会出现小的图片先加载完先出现到页面中，虽然瀑布流不是普通的列表那样的排序，但是也不能小的图片在上面这样太乱顺序，所以就改成了获取宽高先存储，等所有图片加载完成后再往页面上渲染。 来看看实际的代码 不需要渲染到wxml中的数据，我放到了jsData中，主要是两栏的高度和是否在加载数据的标记。 tempPics是第一次加载的数据，临时存放，用于加载图片宽高 columns是两个栏位的实际展示数据 [代码]jsData: { columnsHeight: [0, 0], isLoading: false }, data: { columns: [ [], [] ], tempPics: [] } [代码] 1、加载列表数据 这一步没什么好说的，主要是触发方式，我的代码里是放在页面加载以及拉到页面底部时触发 [代码]onLoad: function() { this.loadData() }, onReachBottom: function() { this.loadData() } [代码] 加载后将列表数据存到tempPics中，用于页面加载获取宽高 2、在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储 [代码]<view class="hide"> <image wx:for="{{tempPics}}" src="{{item.pic}}" bindload="loadPic" binderror="loadPicError" data-index="{{index}}" /> </view> [代码] 主要是image组件的bindload来获取实际宽高，这里还增加了binderror，防止出现图片加载出错的时候卡死 [代码]loadPic: function(e) { var that = this, data = that.data, tempPics = data.tempPics, index = e.currentTarget.dataset.index if (tempPics[index]) { //以750为宽度算出相对应的高度 tempPics[index].height = e.detail.height * 750 / e.detail.width tempPics[index].isLoad = true } that.setData({ tempPics: tempPics }, function() { that.finLoadPic() }) } [代码] 获取到宽高后，以750为宽度计算出相对应的高度并存储，然后增加一个加载完成的标记。加载出错后就强制高度为750，这样展示的时候就是一个正方形。 单个图片加载完成并存储后调用finLoadPic方法来判断所有图片是否都加载完成。 遍历列表，只要有一个图片没有加载完成的标记，就判断为没有加载完成。 加载完成后进入下一步。 [代码]finLoadPic: function() { var that = this, data = that.data, tempPics = data.tempPics, length = tempPics.length, fin = true for (var i = 0; i < length; i++) { if (!tempPics[i].isLoad) { fin = false break } } if (fin) { wx.hideLoading() if (that.jsData.isLoading) { that.jsData.isLoading = false that.renderPage() } } } [代码] 3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度 这里需要再便利一遍列表，根据当前栏位的高度情况，将图片插入到高度底的那一栏，同时把这一栏高度加上当前图片的高度（不是实际高度，是上一步以750为宽度算出来的高度） [代码]renderPage: function() { var that = this, data = that.data, columns = data.columns, tempPics = data.tempPics, length = tempPics.length, columnsHeight = that.jsData.columnsHeight, index = 0 for (var i = 0; i < length; i++) { index = columnsHeight[1] < columnsHeight[0] ? 1 : 0 columns[index].push(tempPics[i]) columnsHeight[index] += tempPics[i].height } that.setData({ columns: columns, tempPics: [] }) that.jsData.columnsHeight = columnsHeight } [代码] 在wxml中展示的时候image组件的mode要使用widthFix，同时wxss中图片的高度和宽度一样，这样加载出错的图片可以正方形展示 11月21日增加： 根据@杨泉的建议，也尝试了使用wx.getImageInfo来获取图片的宽高（具体代码可以参考评论区），代码也精简了很多。但是实际比较下来速度要比用image组件慢，初步推测原因是[代码]wx.getImageInfo[代码]会返回本地路径，多了写本地临时文件的时间 ps：用到瀑布流的地方，最好能后端直接返回图片的宽高，省去小程序端获取宽高的麻烦 再ps：我个人并不建议小程序端使用瀑布流

本来用的a标签下载，结果微信不执行，想知道怎么再微信打开的网页里实现点击按钮保存图片