首页 > 编程语言 >小程序pako.js GZIP定义解压和压缩的方法 及小程序不能使用window.abot和window.btoa的解决方法

小程序pako.js GZIP定义解压和压缩的方法 及小程序不能使用window.abot和window.btoa的解决方法

时间:2023-01-03 16:15:37浏览次数:58  
标签:function arr pako 程序 btoa var window str atob

今天做了一个小程序幕帘弹框,接口请求返回的是一段压缩了的字符串,我使用了pako.js GZIP来解压缩,首先安装pako依赖

npm install pako

pako.js GZIP定义解压和压缩的方法

解压

unzipFun:function(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)(这里也可以直接return返回忽略下面步骤,但是这么做发现中文解压的时候乱码了,使用二进制转字符串的方法得以解决)
	strData=this.byteToString(data)  
	return strData  
 },
 //二进制转成字符串(解决解压时中文乱码的情况)
 byteToString:function (arr) {
		 if (typeof arr === 'string') {
			return arr;
		 }
	var str = '',
	_arr = arr;
    for (var i = 0; i < _arr.length; i++) {
			 var one = _arr[i].toString(2),
			 v = one.match(/^1+?(?=0)/);
			 if (v && one.length == 8) {
			       var bytesLength = v[0].length;
			       var store = _arr[i].toString(2).slice(7 - bytesLength);
			       for (var st = 1; st < bytesLength; st++) {
			         store += _arr[st + i].toString(2).slice(2);
			}
			str += String.fromCharCode(parseInt(store, 2));
			        i += bytesLength - 1;
			 } else {
			        str += String.fromCharCode(_arr[i]);
			 }
		}
	 return str;
},

压缩

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

小程序不能使用window.abot和window.btoa的解决方法

当我成功将幕帘弹框写好的时候,发现真机调试还是解压不出来,报错

原因是pako方法中使用到window.atob,而小程序不支持这个方法,所以导致报错。
解决方法:引入atob的polyfill,就是在小程序实现一个atob方法
atob polyfill 下载地址:https://github.com/davidchambers/Base64.js ( 该polyfill实现了atob和btoa)

(function(f) {

  'use strict';

  /* istanbul ignore else */
  if (typeof exports === 'object' && exports != null &&
      typeof exports.nodeType !== 'number') {
    module.exports = f ();
  } else if (typeof define === 'function' && define.amd != null) {
    define ([], f);
  } else {
    var base64 = f ();
    var global = typeof self !== 'undefined' ? self : $.global;
    if (typeof global.btoa !== 'function') global.btoa = base64.btoa;
    if (typeof global.atob !== 'function') global.atob = base64.atob;
  }

} (function() {

  'use strict';

  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

  function InvalidCharacterError(message) {
    this.message = message;
  }
  InvalidCharacterError.prototype = new Error ();
  InvalidCharacterError.prototype.name = 'InvalidCharacterError';

  // encoder
  // [https://gist.github.com/999166] by [https://github.com/nignag]
  function btoa(input) {
    var str = String (input);
    for (
      // initialize result and counter
      var block, charCode, idx = 0, map = chars, output = '';
      // if the next str index does not exist:
      //   change the mapping table to "="
      //   check if d has no fractional digits
      str.charAt (idx | 0) || (map = '=', idx % 1);
      // "8 - idx % 1 * 8" generates the sequence 2, 4, 6, 8
      output += map.charAt (63 & block >> 8 - idx % 1 * 8)
    ) {
      charCode = str.charCodeAt (idx += 3 / 4);
      if (charCode > 0xFF) {
        throw new InvalidCharacterError ("'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.");
      }
      block = block << 8 | charCode;
    }
    return output;
  }

  // decoder
  // [https://gist.github.com/1020396] by [https://github.com/atk]
  function atob(input) {
    var str = (String (input)).replace (/[=]+$/, ''); // #31: ExtendScript bad parse of /=
    // if (str.length % 4 === 1) {
    //   throw new InvalidCharacterError ("'atob' failed: The string to be decoded is not correctly encoded.");
    // }
    for (
      // initialize result and counters
      var bc = 0, bs, buffer, idx = 0, output = '';
      // get next character
      buffer = str.charAt (idx++); // eslint-disable-line no-cond-assign
      // character found in table? initialize bit storage and add its ascii value;
      ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
        // and if not first of each 4 characters,
        // convert the first 8 bits to one ascii character
        bc++ % 4) ? output += String.fromCharCode (255 & bs >> (-2 * bc & 6)) : 0
    ) {
      // try to find character in table (0-63, not found => -1)
      buffer = chars.indexOf (buffer);
    }
    return output;
  }

  return {btoa: btoa, atob: atob};

}));

image

const polyfill = require('@/common/base64/base64.js');
const {atob} = polyfill;

以上写完就可以完美的解压成功啦!

知识巩固

atob() 方法用于解码使用 base-64 编码的字符串。
base-64 编码使用方法是 btoa() 。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。
其他字符(比如 :;/?&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的

标签:function,arr,pako,程序,btoa,var,window,str,atob
From: https://www.cnblogs.com/yellow-mokey/p/17022516.html

相关文章

  • 学小程序还不懂代码结构?——每天三分钟玩转小程序2
    上回我们分分钟创建了一个小程序,有没有拿给心爱的女神秀一下呢?扫这里的二维码就可以了,手机上就能看了,还等什么!就是下面这个性感的界面,看到我骚气的微信头像了。小程序有哪些......
  • 小程序 SHA1加密算法使用
    创建一个js文件,或写入util.js中//SHA1加密functionencodeUTF8(s){vari,r=[],c,x;for(i=0;i<s.length;i++)if((c=s.charCodeAt(i))<0x80)r.pu......
  • 小程序开发总结三 弹窗 动态class 发送请求 设置本地储存过期时间
    弹窗<buttonclass="get_codebindtap="get_login">{{get_code}}</button>get_login(e){wx.showToast({title:'请输入手机号码',icon:'none',......
  • windows下启动redis
    首先下载安装redis省略1、找到redis的安装目录,一般在C盘的programfiles文件夹下,进入redis文件夹2、打开命令行窗口,输入redis-server.exeredis.windows.conf3、......
  • Intellij IDEA 在DEBUG模式下如何不执行后续代码直接停止程序
    IntellijIDEA在DEBUG模式下如何不执行后续代码直接停止程序第一步:打断点第二步:找出控制台idea可以使用快捷键:两下alt,点击左下角的debug第三步:出现当前页面然后,在......
  • 课程规划-每天3分钟玩转小程序
    嘿,乡亲们!是不是以为我要放鸽子了?我是会放鸽子的人?!12点没到,差一分钟都不算!这一次的专题是小程序开发,按之前的规划每周一、三、五更新一篇。 《每天3分钟玩转小程序》是一个......
  • js Window对象
    //此属性表示窗口是否以全屏显示。Window.fullScreen//返回一个对history对象的引用。Window.history//history.back();//等同于点击浏览器的回退......
  • windows 安装 apache
    认识ApacheApache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它快速......
  • 实现可移动悬浮按钮(微信小程序/H5移动端html)
    微信小程序实现方案:我们可以利用微信小程序的内置组件轻松实现!1.将整个屏幕用movable-area组件覆盖,2.在movable-area内部添加一个movable-view实现自由滑动。3.重点:CSS属......
  • 利用Barrier使局域网下的Linux(Majaro)和Window10共享同一套键盘鼠标
    项目场景:现有两台电脑:一台笔记本(Win10)连接无线网(DHCP)一台工作站(Linux-Manjaro)连接无线网(DHCP)为了简化桌面、便于操作,打算让笔记本和工作站共用一套键盘鼠标。问题分......