• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序使用pako.js的踩坑笔记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

问题

  今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串)。第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之类的,小程序再通过标识替换回原本的字符(感觉就不是很靠谱...)。

  后来发现真的不靠谱,首先每篇文章样式可能都不一样,需要很多对应的字典,即使是这样大概预估了下,也减少不过10多k左右。唉,还是面向百度编程吧,看看有没有什么别人写好的模块可以用一下。

  然后就找到了pako.js,具体实现是本地gzip压缩成base64。我在pc端稍微测试了下,原本150k左右的文章,能够压缩到14k,压缩率90%。嗯,不错,开始搞一下。可后面的路并没有我想的那么顺畅...

准备工作

  要是用第三方模块,肯定需要npm包管理工具是吧。npm init,然后npm i pako,一顿操作,引入文件测试。哦豁,报错找不到这个包。因为在公司一直都是用的原生小程序语法开发,没使用过三方模块,所以这方面一直没去了解,还以为和web端的差不多。没事嘛,面向百度编程。百度了一堆乱七八糟的,都没什么作用,还是乖乖的看官方文档吧,没想到几分钟的事就解决了(有时候还是文档靠谱)。

  1. npm init  创建package.json
  2. npm i pako
  3. 开发者工具左上角 -> 工具 -> 构建npm
  4. 开发者工具右上角 -> 勾选使用npm模块
  5. 文件中引入模块使用

  附上文档链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

开始踩坑

   数据库存储的文章已经压缩过,现在要做的就是在小程序解压缩还原成html字符串并渲染出来。

  压缩文章代码:

1 function zip(str){
2       let binaryString = pako.gzip(encodeURIComponent(str), { to: \'string\' }),
3           res = btoa(binaryString);
4       return res
5 }

  封装一个解压缩的函数(里面用到的方法都是pako写好的,直接调用),代码:

 1 var pako = require(\'pako\');
 2
 3 page({
 4    ...
 5    unzip(b64Data){
 6     let strData = atob(b64Data),
 7         charData = strData.split(\'\').map(function(x){return x.charCodeAt(0);}),
 8         binData = new Uint8Array(charData),
 9         data = pako.inflate(binData);
10     strData = String.fromCharCode.apply(null, new Uint16Array(data));
11     return decodeURIComponent(strData)
12    }
13 })        

  然后将接口拿到的文章传入到 unzip 中就可以解压出来了。当然这只是我预期的结果(因为web端这样的操作确实可行)

  真机调试后小程序报错,找不到atob

  

  原因是pako方法中使用到window.atob,而小程序不支持这个方法,所以导致报错。

  解决方法:引入atob的polyfill,就是在小程序实现一个atob方法

  atob polyfill 下载地址:https://github.com/davidchambers/Base64.js ( 该polyfill实现了atob和btoa)

1 const polyfill = require(\'../../utils/base64\')
2 const {atob, btoa} = polyfill;

  引入atob后,再跑一遍真机测试,诶,舒服了,完美的展示出来,而且响应速度和原本的没有什么差别

 

  然后我以为完成任务了,在测试一篇稍微大点的文章时(260k左右),小程序再次报错

  

  而且居然是调用栈内存溢出。wtf?!初步我还以为自己逻辑写错,导致出现递归死循环之类的。检查几遍后,并没有发现错误。只能再次求助百度...

  得到的原因是因为数据量过大,导致在进行 String.fromCharCode.apply(null, new Uint16Array(data)) 时,出现栈内存溢出的问题,用以下的函数代替这步即可:

 1 function handleCodePoints(array) {
 2     var CHUNK_SIZE = 0x8000; // arbitrary number here, not too small, not too big
 3     var index = 0;
 4     var length = array.length;
 5     var result = \'\';
 6     var slice;
 7     var arr = [];
 8     for (var i = 0, _i = array.length; i < _i; i++) {
 9         arr[i] = array[i];
10     }
11     while (index < length) {
12         slice = arr.slice(index, Math.min(index + CHUNK_SIZE, length)); // `Math.min` is not really necessary here I think
13         result += String.fromCharCode.apply(null, slice);
14         index += CHUNK_SIZE;
15     }
16     return result;
17 }

写在最后

  后面测试过程中并未出现其他问题,测试了更大的数据量后也没什么问题。至此,我在小程序使用pako.js之路告一段落。之后如果还有存在问题,我会继续更新这篇文章。若你在使用过程中发现其他问题,请告诉我。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 JS 逻辑层发布时间:2022-07-18
下一篇:
用Vue.js开发微信小程序:开源框架mpvue解析发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap