- 博客(22)
- 收藏
- 关注
RSS订阅原创 Uniapp如何实现输入框随键盘拉起
通过设置 textareafocus 的值为 true 就可以聚焦文本框，聚焦之后，键盘会自动弹起。那么监听键盘高度的逻辑就会触发，将键盘高度赋值给 keyboardHeight ，再通过设置并且isKeyboardShow 为true，这样input-area标签的bottom值就变为keyboardHeight，那么input-area就刚好位于键盘上方。设置input-area标签固定定位，一开始设置一个较大的负的 bottom 值，让整个input-area隐藏在屏幕下方位置。
2025-06-21 21:47:20
366
原创 手写节流、防抖函数
防抖和节流是优化高频事件处理的两种常用技术。防抖通过延迟执行函数，若在延迟期内再次触发则重新计时，适用于搜索建议等场景。节流则按固定间隔执行函数，确保高频触发时仍维持稳定执行频率，常用于滚动事件等。代码实现上，防抖利用定时器控制延迟，节流通过时间戳判断执行间隔。两种方法都使用apply方法保持this指向和参数传递，有效优化性能。
2025-06-06 19:26:27
285
原创 uniapp开发微信小程序使用websocket
本文介绍了在uniapp中使用WebSocket实现全双工通信的步骤。首先，通过初始化socketTask对象来建立WebSocket连接，并设置心跳机制以保持连接。接着，通过onOpen、onMessage、onError和onClose等事件监听器处理连接状态和消息接收。文章还详细说明了如何发送心跳包和具体消息，以及如何处理断线重连，包括设置最大重连次数和重连延迟。最后，提供了清理WebSocket连接的方法，确保在页面关闭或销毁时正确释放资源。通过这些步骤，开发者可以在uniapp中高效地使用WebS
2025-05-22 17:21:42
835
原创 uniapp微信小程序开发实现COS直传
使用腾讯云COS SDK的 uploadFile 方法上传文件，进行对象存储，其中要传入的参数有：Bucket（存储桶名称）、Region（存储桶所在区域）、Key（文件在 COS 存储桶中的存储路径和文件名）、FilePath（本地文件的临时路径）。获取返回后的数据，得到图片对象存储的路径进行使用。传入需要的参数发送后端请求，获取到tmp_secret_id（临时访问密钥ID）、tmp_secret_key（临时访问密钥）、session_token（安全令牌），以及其他必须参数。
2025-05-20 14:25:35
728
1
原创 JavaScript中this关键字的不同绑定方式
通过构造函数调用时，new创建一个新对象(空实例)，per函数被调用并且this指向新创建的对象实例alice，name作为参数赋值给this.name，此时，this.name相当于alice.name（创建对象新属性的方式）greet是一个普通函数，此时的this指向调用它的对象p2，setTimeout中的箭头函数没有自己的this，它会继承外层作用域的this，即p2对象。bind方法修改this指向，将this指针指向第一个参数指定的对象，但不立即执行函数，而是返回一个新的函数，再需要手动调用。
2025-05-16 10:58:03
338
原创 JavaScript原型链及其应用
原型链：当访问对象的属性时，如果对象本身没有该属性，就会沿着__proto__向上查找，直到找到或到达原型链末端（null）JavaScript是一种基于原型的语言，每个对象都有一个原型对象（_ _ proto _ _），对象从原型继承属性和方法。null表示“无”或“空对象”的概念，这与原型链终点的语言完美匹配，表示没有更基础的原型。__proto__属性：每个对象都有这个属性，指向创建该对象的构造函数的原型。根据需要可通过对内置的原生对象（数组等）进行扩展，进而实现更强大的功能。
2025-05-04 21:50:34
270
原创 CSS处理器（Sass，Less，Stylus）概念和作用
等高级特性编写样式代码，然后通过预处理器将其编译成标准的CSS。这样可以提高代码的可维护性、复用性和开发效率。（缩进语法）两种格式，提供变量、嵌套、混合、继承、条件语句等功能。是一种扩展CSS功能的工具，它允许开发者工具使用。最流行的CSS预处理器之一，支持 .vue框架中，CSS处理器可通过。
2025-04-24 21:23:05
292
原创 uniapp封装http请求器
这里分成两个作用域，如果是vue2环境，则在上面导入文件，如果是vue3环境，则导入下面的作用域，否则就会出现导入request.js不成功导入不成功的情况。然后导入文件之后，通过。使用uniapp进行开发时，我们不可避免的会使用到多种http请求，本文展示了如何封装一个通用的请求器，让代码复用率更高，让项目结构更加清晰，以便后续的维护和扩展。请求函数中接收http请求路径，请求参数，请求头等信息，动态地进行http请求，最后通过一个http对象导出4种请求方法，如果有更多需要，可以继续往后添加方法。
2025-04-22 19:27:59
684
原创 微信小程序登录机制实现
uni.setStorageSync('token', AES加密(token))，该存储方式适用于长期持久化存储的场景，即用户在登录操作之后较长一端时间内不必再重新进行登录操作。：getApp().globalData.token = token，利用全局变量的方式进行存储，适用于高频访问的临时存储的场景，用户每次进入小程序后都需要重新登录。），验证本地token是否可用，可以通过试请求的方式，如果不可用，弹出弹窗，提示用户进行重新登录，获取新的token。
2025-04-13 20:18:30
379
原创 vue中v-if和v-show的区别
而v-shoe则是单纯的对元素css属性的变换，在隐藏时，只需要设置属性为display : none ，就可以将元素隐藏，在显示的时候，display就会恢复初始值。v-if是真正意义上的条件渲染，它在对元素显示和隐藏变换的时候，会有对DOM元素的适当的销毁和创建。使用 v - if = "false" 的时候，是获取不了DOM元素的，说明DOM目前根本不存在。如果是在组件频繁显示和隐藏的时候，v-if性能开销无疑是比v-show要大的，这个时候用。vue中v-if和v-show的区别，先看一个例子。
2025-03-14 15:26:37
219
原创 uniapp开发微信小程序实现图片本地缓存（策略）
这个时候，我们不能马上就将CDN路径替换掉本地存储路径，因为，我们不确定这个存储路径是否有效，还需要获取到图片文件列表，检查文件列表中是否有该路径，如果有，证明路径有效，就将本地存储路径替换为CDN图片路径。开发微信小程序时，小程序中使用的图片较多时，图片CDN流量就会增加，进而带来支出流量费用增加，图片加载变慢，影响用户体验等问题。下载完成之后就会返回图片在本地存储的地址，然后在小程序缓存中存储本地图片路径，这里的关键点是：小程序缓存的形式是：（ 键：值 ），其中。在图片首次加载的时候，先下载图片。
2025-03-12 22:15:00
1403
原创 uniapp使用checkbox实现全选和单选
代码中的第一个checkbox的check动态绑定checkAll状态，点击选项框时，立刻将checkAll置为相反状态，然后进行判断，如果置反后的状态为true，代表当前要全选列表，则将list每一个元素的id保存在delist中，如果为false，将delist数组置空即可。每一个check-box的check属性动态绑定函数iselected()，函数检测delist数组是否包含当前传过来的id，如果有代表选中了，就返回true，如果没有代表没有选中，就返回false，
2025-03-11 19:41:31
1267
原创 uniapp点击文本输入框弹出键盘，并且输入框跟随键盘弹起
这个属性，这个属性就是设置文本框光标到键盘的距离，单位为px，只要将这个值设置的更高一点，就能不遮住textarea元素，如果textarea是fixed定位，则需要将fixed属性设置为true。
2025-03-08 19:38:33
701
原创 lodash常用API介绍
这个API是比较重要的，当我们进行web开发时，如果直接把旧变量赋值给新变量的话，那么新的变量实际上是对旧变量的引用，二者会指向同一个内存地址，当修改新变量时，会对旧变量产生影响，而深度拷贝之后，两个变量会指向不同的内存地址，那么二者就会相互独立。lodash作为一个强大的JavaScript实用工具库，封装了常见数据类型的处理函数。下面介绍一下其中常用的API。以上是lodash其中一些API的使用，当然，lodash还有更多的实用API等着我们去学习。
2025-03-05 19:27:53
379
原创 ArkTS中Tabs组件使用（自定义TabBar）
7、tabBar()传递自定义的TabBar，接受一个自定义的导航栏内容myBuilder，myBuilder里面封装了一个包含图标和标题的导航栏内容，通过接收的参数动态生成不同内容。1、核心组件Tabs，导航栏的最外层组件，然后Tabs组件里面需要有一系列TabContent子组件，导航栏有多少个功能就会有多少个TabContent()组件，每个TabContent组件就是一个页面，需要注意的是：TabContent里面只能有一个子组件，这里通过遍历一个数组来生成多个TabContent组件。
2025-02-03 21:44:22
1131
原创 uniapp开发微信小程序实现分包（亲测有效）
4）在pages数组下面声明一个新数组subPackages，用来管理分包的页面，其中root的值为分包的根目录，path就是test.vue页面的路径，这个时候页面的分包就完成了，如果需要有多个分包按照下面的形式声明路径。1、tabBar页面（与最下面的导航栏相关的页面）必须在pages目录下，那么，在pages目录下，我们可以存放登录页面以及tabBar。微信小程序要求单包不能超过2M，当我们的小程序体量大的时候，就需要用到分包了，下面就来说说如何实现分包。
2025-01-19 10:03:00
1129
5
原创 Arkts框架Scroll组件基本使用
console.log('已经滑动的距离：',this.myScroll.currentOffset().xOffset,this.myScroll.currentOffset().yOffset)7、控制组件的滚动位置，需要先在前面实例化Scroller对象，然后通过引用这个对象，就能将对象和组件联系在一起，我们只需要操作Scroller对象，就能控制组件的滚动效果。1、必须给Scroll组件设置宽高，并且Scroll组件只能有一个子组件，如果要展示更多内容，可以在子组件之内再有子组件。
2025-01-13 15:56:05
834
原创 vue前端开发，点击登录时跳转路由之后又自动回退，可能原因之一及解决方法
属性被设置，这会导致页面跳转到该URL，显然我这里没有设置action属性，但表单的默认提交行为仍然存在，这时候就跳转到一个错误的路由。想要阻止这种行为的发生，只需要在登录按钮中使用@click.prevent来触发Login()函数，就会正确跳转路由了。，多了一个不知道哪里来的问号，并且路由也没有跳转成功，这是因为在HTML中，当表单内的按钮（尤其是类型为。在进行网页开发的时候，我遇到一个问题，在Login()函数中我设置了路由跳转。但是我在点击了登录按钮之后，就出现了一个现象：我的网页url变成了，
2024-11-11 10:56:51
483
原创 web开发，如何全局引入字体库（阿里巴巴矢量图标库为例）
再开发网页时，有些字体样式不能满足我们的开发需求，这个时候就需要引入我们的外部字体库，从而让字体样式变得更加美观。写入代码，Daoli 是项目其他组件要使用这个字体样式时要用的的名称，可自定义。进入阿里巴巴矢量图标库网页，进入想要下载的字体库，点击“下载子集”。这样就可以使用这个字体样式啦。
2024-10-23 20:23:05
678
原创 ArkUI开发 ，内边距（padding）使用
2、上下左右不为同一个值，可分开指定每个方向的内边距值。1、上下左右paddig都为一个值。关于ArkUI开发，内边距使用。
2024-10-17 21:29:05
325
原创 Vue3+ts项目路由跳转报错TypeError: Cannot read properties of undefined (reading ‘replace‘)解决方案
可能会报错：TypeError: Cannot read properties of undefined (reading 'replace')，这是因为我们不能在里面内嵌路由实例。这个时候，我们需要把拿取路由实例的操作，放在setup(）第一层之下。
2024-10-01 21:36:16
977
原创 前端部署项目到服务器（宝塔面板·腾讯云专享版），vue项目为例
打开vue.config.js文件，开发环境下，该代理是生效的，但在项目部署服务器上面时候，这个代理会失效，但是，我们要的并不是这个代理起作用，而要的是将请求路径用/api代替了这个功能，这样我们在开发环境下和上线时都不需要对项目的请求路径有大的改变，让我们更方便的进行开发和上线，这样我们的每一个请求的路径格式都是：/api/接口。打开后，这里是部署项目文件的地方，上传第二步得到的项目文件夹dist，切记，要进入到dist目录下，即打开dist文件夹，将里面的文件全部复制到部署项目文件的地方。
2024-06-26 18:02:22
1927
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人