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

问题#

　　今天组长跟我们讨论了个问题，说是文章存储占用有点大，消耗宽带流量费，让我看看能不能找个方法解决一下（文章存储的是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字符串并渲染出来。

　　压缩文章代码：

function zip(str){
      let binaryString = pako.gzip(encodeURIComponent(str), { to: 'string' }),
          res = btoa(binaryString);
      return res
}

　　封装一个解压缩的函数（里面用到的方法都是pako写好的，直接调用），代码：

var pako = require('pako');

page({
   ...
   unzip(b64Data){
    let strData = atob(b64Data),
        charData = strData.split('').map(function(x){return x.charCodeAt(0);}),
        binData = new Uint8Array(charData),
        data = pako.inflate(binData);
    strData = String.fromCharCode.apply(null, new Uint16Array(data));
    return decodeURIComponent(strData)
   }
})        

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

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

　　

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

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

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

const polyfill = require('../../utils/base64')
const {atob， btoa} = polyfill;

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

 

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

　　

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

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

function handleCodePoints(array) {
    var CHUNK_SIZE = 0x8000; // arbitrary number here, not too small, not too big
    var index = 0;
    var length = array.length;
    var result = '';
    var slice;
    var arr = [];
    for (var i = 0, _i = array.length; i < _i; i++) {
        arr[i] = array[i];
    }
    while (index < length) {
        slice = arr.slice(index, Math.min(index + CHUNK_SIZE, length)); // `Math.min` is not really necessary here I think
        result += String.fromCharCode.apply(null, slice);
        index += CHUNK_SIZE;
    }
    return result;
}

写在最后#

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