微信小程序base64与十六进制相互转换(使用btoa、atob方法报undefined)

前言:搜到很多方法都用到了btoa()、atob(),这两个属于Window 对象,在浏览器端可以直接使用,但是在小程序里面使用会报undefined。看到uniapp和微信小程序官方文档都提供了下面两个api,就想着经过ArrayBuffer 对象转换一下。

uni.base64ToArrayBuffer(base64)、wx.base64ToArrayBuffer(base64)

将 Base64 字符串转成 ArrayBuffer 对象

uni.arrayBufferToBase64(arrayBuffer)、wx.arrayBufferToBase64(arrayBuffer)

将 ArrayBuffer 对象转成 Base64 字符串

javascript 复制代码
<script>
	export default {
		onShow() {
			let str = 'ksPNPc/9opXh3S7DBF+tJMvB3ybDtVjuip327aoYkrGEX3JXI1FxcbI4Fn/rScqgRdXwfUYyLK3yL2AQdHPelJWzx4u7xfj4JpfWag9lkaZubQnI3w9QqKtb9Dqwl771jqut8MJL338A8Zh7buOh9DXBNi1CZBGVVUN5zqmd/IyyhYo1CWyaFSGsaYSO7+xsEswQg8n2vLM6m7yFqL70/pV4eIsKtj5VDoTYphPanFEssWNt9Do4+cL6EUTQKC2XhrEeoZBI7iRWDzde3qzdwFPwUnb2Uxyo9E9Qg+CFvxtfFcB6D9G5+Nh9bbL6RfWgvmXgTxDqfl2Ynf4BWP6m1A=='
			let _hex = this.base64ToHex(str);
			console.log(this.hexToBase64(_hex) === str); // true
		},
		methods: {
			// base64转为十六进制
			base64ToHex(str) {
				const buffer = uni.base64ToArrayBuffer(str);
				// 或:const buffer = wx.base64ToArrayBuffer(str);
				return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' +
					x.toString(16)).slice(-2)).join('');
			},
			// 十六进制转为base64
			hexToBase64(str) {
				const uint8Array = new Uint8Array(str.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
				return uni.arrayBufferToBase64(uint8Array);
				// 或:return wx.arrayBufferToBase64(uint8Array);
			}
		}
	}
</script>
相关推荐
前端程序猿之路5 小时前
基于扣子(Coze)工作流 API 的微信小程序开发实践总结
前端·微信小程序·小程序·大模型·api·ai编程·扣子
豌豆学姐8 小时前
Sora2 短剧视频创作中如何保持人物一致性?角色创建接口教程
android·java·aigc·php·音视频·uniapp
德育处主任8 小时前
在小程序做海报的话,Painter就很给力
前端·微信小程序·canvas
低代码布道师9 小时前
互联网医院17:架构重构——医生档案的“独立宣言”
低代码·小程序·云开发
宁夏雨科网10 小时前
手机数码小程序商城自己能否独立开发
小程序·商城小程序·制作小程序·手机数码
科技D人生12 小时前
Vue.js 学习总结(19)—— Vue3 按钮防重复点击三种方案总结
前端·vue.js·uniapp·vue3 防重复提交·uniapp 防重复提交·前端防抖
丸子哥哥15 小时前
vue + uni-app:利用原生uni.chooseImage封装拍照功能的组件
微信小程序·uni-app·vue
风月歌15 小时前
2025-2026计算机毕业设计选题指导,java|springboot|ssm项目成品推荐
java·python·小程序·毕业设计·php·源码
计算机毕设指导615 小时前
基于微信小程序的旅游线路定制系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·旅游
qq_124987075316 小时前
基于Spring Boot的微信小程序的智慧商场系统的设计与实现
java·spring boot·spring·微信小程序·小程序·毕业设计·计算机毕业设计