m0_51431448的博客

前端对图片压缩主要两种形式：一种是手动压缩项目中的静态资源图片，这样在打包的时候可以减小打包体积。另一种就是我们在上传图片到后端服务器之前在前端对当前的图片文件进行压缩。当然我们可以在上传前限制上传图片的大小，但其实限制图片大小体验不好，比如限制个2MB，现在的手机随便一拍原图可能就10多MB，所以我们这篇就说下对图片Blob的压缩方式。canvas是可以压缩图片的哈，不过它只能压缩JPG、JPEG格式图片，对png格式却无能为力。这篇说一下通过一个插件来实现对文件Blob的压缩。

平时开发中，我们经常遇到的场景应该是调用后端接口返回给前端pdf格式的文件流，然后我们可以通过URL.createObjectURL的方式转为object url临时路径然后可以通过window.open的方式来打开一个新的浏览器页签来进行预览，效果如下图：但有时候这样满足不了的需求，它不想这样预览，不想要那么多乱七八糟的东西，我只要PDF文件中的内容，然后在项目页面中类似个弹窗似的直接展示pdf文件的内容。所以，这篇就来说一下，我们可以将pdf文件转为图片来进行展示。

在vue项目中，我们有个文件，和一些其他字段数据需要提交的时候，我们都是使用axios 设置请求头中的Content-Type: multipart/form-data，然后new FormData的方式来进行提交。但是uniapp使用uni.request的方式就不行了..

刚刚做的这个功能，所以来记录一下，开发的公众号哈。

uniapp中提供了uni.chooseImage api 这个是从本地相册选择图片或使用相机拍照。这个api无论是在H5还是app还是小程序等都是适用的，回调函数中我们能拿到图片的路径列表，我们现在要把改路径转为base64编码。但如果不是小程序的话 上述代码就会getFileSystemManager报错， 所以我上面使用了#ifdef MP 条件编译。如果是H5、或者app端的话，我这里使用的uni Dcloud插件市场的一个插件。

uniapp官网提供了uni.getLocation方法，但是基本上不能使用，官方也有提出：然后我们接着官网往下划，可以看到有注意事项：因为我这里使用的是H5 微信公众号，所以就来介绍一下微信公众号中调用微信的JS-SDK来获取当前地理位置信息。uni-app 中为兼容微信小程序生态存在全局的 wx 对象，而微信 JS-SDK 也是注册全局的 wx 对象，为避免混淆，可以将微信 JS-SDK 中的 wx 对象改名先来说下整体的实现吧。

在uniapp开发小程序或者H5中，都可以使用以下方式预览文件之前其实写过一篇，就是使用uniapp官网提供文件下载、文件保存、文件打开的API，感兴趣也可以去看下。

在 UniApp 中实现“到这儿去”的功能，即调起地图导航至指定位置，对于不同的平台（小程序、H5、App）有不同的处理方式。下面将简单介绍如何在这些平台上实现该功能，并讨论位置信息的获取。后面需求会用到，先来找一些相关资料，并不一定很准确，但也来记录一下（本人还未使用哦，但可以做个参考）

使用uniapp提供给我们的uni.downloadFile、uni.saveFile和uni.openDocument三个API就可以了。也很简单，直接贴一下代码，安修修改一下即可。

这篇说一下使用uniapp开发实现微信公众号网页授权、以及获取用户信息的前端、后端的实现。开始之前呢，先提一嘴uniapp开发微信小程序的微信登陆，之前也写过一篇，uniapp微信小程序登陆的，大家感兴趣可以去了解一下，因为这uniapp、一会儿小程序、一会儿公众号、一会儿app、一会儿h5的搞得有点儿乱糟糟的。

这里说几种在uniapp开发中，关于页面设置高度的几种情况。宽度就不说了哈，宽度设置百分比都会生效。首先我们要知道平时开发中，如果说没在uniapp做特殊处理，即正常情况下，所有的页面（.vue文件）中都是没有高度的（和vue一样），也就是说给最外层的的view标签设置高度为100%是没啥作用的，只要没内容高度依然是0。

这篇说一下uniapp中生成二维码的操作，以及运行到小程序生成小程序码用于跳转到其他小程序的功能实现。我这里生成二维码的链接分为两种，一种是网页链接即h5页面，另一种是小程序链接（应该是小程序中的某个页面）。所以在uniapp开发中，需要判断一下是哪种链接，因为每种生成二维码的方式是不一样的。如果是网页链接，那么前端直接使用该链接直接生成二维码就好了。这里使用一下这个库即可。如果是小程序链接，其实应该是对应要跳转的小程序的某个页面路径。然后服务端去调用微信官方提供的接口来生成二维码。

消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。

会下载一个这样的压缩包，我们解压，选择里面的stylesheet.css文件打开，然后复制里面所有的内容，然后把原来的字体包中的iconfont.css中的引入文件 @font-face全部替换即可。一般我们的字体包都在一个文件夹中，其中包含了 .ttf、.woff、.woff2这样的文件，我们点击add fonts选择 .ttf的文件即可。然后这样完成之后，之前的 .ttf、.woff、.woff2都不需要了，就保留咱们这个css文件即可。

这是浏览器的刷新频率。而requestAnimationFrame不是由js、代码决定的，它不会受代码影响，而是由系统决定的。它的使用也很简单，跟setTimeout差不多，不同的requestAnimationFrame不需要传递第二个参数（时间）,直接传递一个回调即可。：由于requestAnimationFrame会在浏览器的下一次重绘时执行回调函数，可以减少不必要的计算，从而节省电量。可能是我这个工具的原因，录出来不太连续，但实际上是都是很流畅的，大家直接拷贝代码可以试一下。

vue3.5发布好多天了，所以尽快来看一下新出了哪些特性。在3.5中，Vue的响应式系统经历了另一次重大重构，实现了更好的性能并显著提高了内存使用率（），而行为没有变化。此重构还解决了在SSR期间因挂起计算而导致的过时计算值和内存问题。此外，3.5还优化了大型深度响应式数组的响应性跟踪，在某些情况下使此类操作的速度提高了10倍。这里只介绍平时经常会有的东西、经常会写的东西、实用的东西哈。

vue动态传递不确定个数的参数到子组件这个还是经常用的，动态绑定不确定个数的事件就不太常用了，写这篇也是因为自己没有好好看官方文档，所以来记录一下。下面的代码示例就采用vue2了，vue3也是一样的。相信大家对vue的父传子已经很熟悉了。假设子组件接受下面三个参数：那我们父组件可以单独传递：也可以一块儿通过v-bind直接传递整个对象，相当于将对象中的进行结构全部传递，官网也有写：https://cn.vuejs.org/api/built-in-directives.html#v-bind

目前monaco-editor内置有61种语言，但是只对css、html、json、typescript 支持的，功能也比较全。我们要是使用其他的语言比如javascript、java、sql等可能会报错，使用上面内置的四种语言之外的其他语言就需要我们自己定制、扩展了。如果有更多的可以自行扩展，monaco-editor中也都有对应语言的提示的自带的包，也可以自己编写逻辑哈。但是没考虑到语言的问题。我这边写了最常用的javascript、java、sql基础扩展支持。

一直用webpack打包用了好几年了，但其实只了解大概的配置意思，并没有仔细、深入去学习。那闲来无聊，就简单的浅浅学了一下webpack，这篇也来记录一下。本质上，是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。webpack打包的内容主要是要用webpack首先需要安装一下吧，webpack是基于。

由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。

我们会发现这低代码平台的模样大致的布局都大差不差，就是左中右布局，左边是一些供拖拽(点击)的基础组件，中间为画板、右边为属性配置，当然具体还得具体看，但整体大致上都是这样的布局。这篇说下关于实现低代码、零代码自己的思路、想法吧。最后再给大家推荐一下自己做的两个低代码、零代码项目，一个是快速生成大屏的、另一个是希望快速生成h5页面，希望能用在uniapp。当然这些说起来容易，思路也清楚，但是真正做起来，真的很复杂，工作量很大，也会碰到各种各样的难点，更会碰到平时开发业务中根本碰不到的棘手的问题。

之前写了一篇vue3使用monaco-editor的博文（），vue3中使用过程很顺利，没发现什么问题。但是在vue2中使用碰到一些坑。不过最后总算是搞出来能用了。首先跟vue3一样，安装monaco-editor、monaco-editor-webpack-plugin这两个插件。vue3里面呢直接安装最新的就行了，但是在vue2中对版本有要求，不能太高了，经过最后的测试，

【代码】uniapp通过触摸事件判断左滑、右滑、上滑、下滑。

最近看到vue版本更新到3.4.x了，其中有个defineModel API，这个API就是Vue3简化组件v-model的写法的，所以这篇就一块儿来总结一下vue中的组件v-model先说下vue2中的使用，再说下vue3中的使用。

前后端基础的环境搭建及基础的软件、通讯软件安装链接，按照一路安装下来，心里踏实的很！！！

npmjs: https://www.npmjs.com/package/epubjs 在线电子书转换器简单封装： src/hooks/使用： 这个示例电子书地址：https://example-files.online-convert.com/ebook/epub/example.epub 直接下载下来，放在public/static下。这篇只是简单写一下使用，还没有正式用到更多可以参考另一位博主的文章：https://blog.csdn.net/qq_42484429/art

我们在vue项目中，使用vue-router跳转的时候，在某些需求中可以使用router.resolve({path: '/test'})，返回一个返回一个路由地址的规范化版本，其中包含href属性，那我们就可以使用window.open()来打开一个新的浏览器页签跳转至某个vue页面。这篇就是要说一下之间的通信。

在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能。

说一下Animate.css这个动画库，很多的动画在这个库里面都定义好了，我们用的时候可以直接使用里面的类名就可以了，就是直接目标元素绑定对应的类名就可以实现动画效果，非常方便，库其实也相对简单，使用起来也简单。这里示例就以v3为例了，v2也是一样的。

说一下easyplayer在vue2中的使用，vue3中没测试，估计应该差不多，大家可自行验证。然后在public/index.html下再引入即可。看到报错不要慌，大家跟着我处理。习惯性将其封装为单独的组件。会发现控制台有下面报错。

draggable 属性规定元素是否可拖动。必须设置，否则没有拖拽效果及事件触发链接和图像默认是可拖动的。draggable 属性经常用于拖放操作。

前置条件：已获取到.mobileprovision描述文件、.p12证书并打包生成ipa包

已申请Apple ID并注册Apple Developer Program。

简单再说一下isProxy、isReactive、isReadonly、toRaw、shallowReactive、isRef等Vue3中其他的一些API

这两天刚看到一个需求，简单描述一下，就是我们拿到一个pdf文件流（文件流可以是后端返回的，也可以是从自己本地选的）和一个url链接 ，现在要将url链接生成二维码，并将这个二维码添加到这个pdf文件中，然后再预览或者下载这个pdf文件。灵感出自于我之前写过一篇。

我们在做uniapp需要打ios包测试的时候，会有证书私钥密码、证书profile文件、私钥证书三项必填项，这是苹果三件套，必须要有的。就是下图所示。

这两天刚做了个新需求，要做个系统锁屏（当然锁的是当前的系统），就类似于电脑锁屏似的。共两种情况下锁屏，一种是无操作一定时间后自动锁屏；第二种是可以按下组合键（快捷键）主动进行锁屏。下面具体来说一下该需求的想法、思路以及实现

展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key

这篇主要讲一下Promise的类方法的基本使用，至于Promise的基本使用这里就不赘述了，之前也有手写过Promise、实现了Promise的核心逻辑。其实我们平时用Promise也挺多的，不过又出现了两个新的语法（ES11，ES12新增了两个），所以这篇就简单说一下，也挺简单

就是我们开发出的app，这次在这个手机上登录了，下次换了个手机登录，这时候要给用户个提示，我也不知道为什么非得要这个提示，感觉意义不太大，但是需求是这样的，所以这篇主要是简单说下uniapp获取当前手机设备的信息。