Rattenking
迎接着黎明的曙光前行!
展开
-
Taro React 系列文章 - 总目录
欢迎大家来到 Rattenking 的《Taro React 入门到实战系列》,开始前博主先列出 Taro React 入门到实战的大纲,同时包括遇到的一些常见报错。实战篇是实际开发中的组件的封装,部分比较有意思的效果,以及一些特殊实际问题的解决办法!入门篇介绍了从安装,开发中的配置问题,记录解决对应的问题。错误篇是在实际开发中遇到的一些错误的处理方法!问题篇是开发中遇到的一些问题的解决方法!...原创 2022-08-17 15:53:17 · 388 阅读 · 0 评论 -
【taro react】 ---- 通过时间格式化处理提取倒计时的分秒、时段的小时分、选择日期的月和天
需要做一个场次预定的小程序,需要H5和微信小程序两端。在开发中有很多时间需要进行计算处理。返回的时间格式多种多样,还有用作倒计时结束的时间戳等,如何进行统一处理,就是一个需要解决的问题。解决问题三的办法,就是由于只需要获取后边的小时和分,所以可以直接写死一个年月日,拼接一个完整的时间字符串,然后获取这个完整时间字符串的时分;解决办法主要是借助了固定年月日拼接一个完整的时间字符串,不会影响最后获取时分字符串。原创 2024-08-19 10:15:00 · 194 阅读 · 0 评论 -
【taro react】 ---- 使用发布-订阅模式解决重复请求和重复点击问题
注意在请求订阅发布中,我把第一次的请求并没有放入订阅中,因此在请求成功或者失败的时候,需要单独调用 resolve,reject。针对上边的问题,我想到的解决办法是单独申明一个 eventNames 的存储空间,记录事件名,不记录回调事件,两个分开存储。const ev = new EventEmitter() 可以和状态管理一样,声明一个全局事件存储空间,其他页面引入就好,这样有个优势就是在其他异步防重复请求,和防重复点击事件时,使用全局的事件存储,不用每个页面都进行申明。原创 2024-07-26 09:56:02 · 81 阅读 · 0 评论 -
Taro React组件开发 —— RuiVerifySlider 行为验证码之滑动拼图
修改后发现并没有那么麻烦,所以不要自己设置心理障碍,遇到需求要有研究的欲望;多研究大佬的框架代码,学习大佬的开发习惯,我发现随着时间越来越开发的没有欲望,在混日子一样;不断的激发自己的兴趣,学习开发更多的东西。原创 2024-05-27 15:48:06 · 474 阅读 · 0 评论 -
Taro React ---- 微信小程序打开腾讯文档
虽然这个方式可以打开腾讯文档,但是这里不保证一直有效,因为此方法参考了微信小程序使用腾讯文档打开文档,里边获取文档地址已经失效;方案一我想到的办法就是后端接口中转一次,通过爬虫将企业微信文档页面我们需要的信息爬取过来返回给前端,前端写界面代码渲染,提交后后端将数据提交给企业微信文档,此方法弊端一个是登录信息,一个是通过了后端开发,还不如自己开发一个简单的问卷文档;优势就是数据都给了创建文档的企业微信那个人,方便查询了。原创 2024-05-16 16:20:52 · 303 阅读 · 0 评论 -
【JavaScript】---- axios 拦截器中实现将请求数据的用户信息进行脱敏
由于网络安全扫描的高危漏洞,要求用户信息【用户手机号、用户名称、用户的userId】等不能明文传给第三方【大数据埋点】。但是埋点的用户信息,厅店信息,分享人信息等很多,字段不统一,如果单独处理,比较麻烦,而且处理的信息会比较多,因此在拦截器中统一对数据拦截处理。当然这么判断肯定是不准确的,但是可以将是手机号的信息进行判断!原创 2024-04-16 10:00:00 · 111 阅读 · 0 评论 -
【taro react】 ---- 自动化【根据运行命令直接编译对应的是测试环境或正式环境】
配合 Jenkins 发布,每次代码不需要我们在自己去多文件维护版本号和环境变量,只需要修改 node_num.js 的版本号和版本描述,就可以维护所有配置文件;查找和替换文本中的字段其实可以采用GoGoCode,但是由于本文的操作比较简单,因此自己写了两个比较简单的正则完成该功能;当我们需要维护大量重复的文件或工作时,我们就应该考虑是不是有更加简便快捷的方式,让我们从重复的劳动中脱离出来。学习、思考、总结输出。是一个很重要的过程。原创 2024-01-24 10:15:00 · 231 阅读 · 0 评论 -
【taro react】 ---- QRCode 二维码生成
功能越全的库,会越大,因此开发中需要根据实际需求,找一个合适当前需求的库引入;简单的功能,尽量不要再调用后端接口,资源的浪费。原创 2024-01-04 17:23:38 · 1344 阅读 · 0 评论 -
【taro react】---- 解决 taro 编译 H5 姓名脱敏导致的 iOS 部分低版本白屏问题
由于使用地方框架,不清楚底层的打包编译逻辑,导致不知道那些语法或者字符串编译后会出现问题;原创 2023-12-20 14:22:51 · 1273 阅读 · 0 评论 -
【taro react】---- 解决 iOS 真机微信小程序 Input 密码框 type 切换会导致 Input 内容丢失问题
在密码登陆时,有显示和隐藏密码的功能,实现方式很简单,直接对输入 input 的 type 进行 password 和 text 值进行切换,就可以实现密码的显示和隐藏。】,当然这是2018年官方的回答,目前2023年了,这个问题依然存在。不清楚这个组件的 type 切换如果是销毁为什么在不同系统的机子表现不一样。在 type 值切换过程中,会导致 input 的 value 丢失。导致切换后 value 值就被清空。原创 2023-12-20 14:26:14 · 1688 阅读 · 0 评论 -
【taro react】 ---- 常用自定义 React Hooks 的实现【五】之显示模态对话框
定义默认参数的值 defaultProps;使用 Object.assign 合并传入的 opts 和 defaultProps;使用 useMask 的 show 传入构建的 content 结构!原创 2023-12-05 17:05:24 · 605 阅读 · 0 评论 -
Taro React组件开发(12) —— RuiVerifyPoint 行为验证码之文字点选
因为【AJ-Captcha行为验证码】前端提供了Android、iOS、Futter、Uni-App、ReactNative、Vue、Angular、Html、Php等多端示例,发现并没有 taro react 的示例,因此决定根据他的 uni-app 示例开发一个 taro react 的示例!为什么要选用【AJ-Captcha行为验证码】呢?因为我们管理后台使用的是 pigx ,它在后端采用的是【AJ-Captcha行为验证码】,因此移动端也采用了【AJ-Captcha行为验证码】!原创 2023-10-31 16:07:33 · 1116 阅读 · 0 评论 -
【taro react】 ---- 常用自定义 React Hooks 的实现【四】之遮罩层
虽然完善补充的问题还有很多,但是我觉得实现思路解决了我在开发中遇到的痛点;由于 maskHtml 这样是放在 UI 界面的第一层,避免了 IOS 使用 ScrollView 时遮罩层显示补全。原创 2023-10-10 11:20:57 · 558 阅读 · 0 评论 -
Taro React组件使用(11) —— RuiNoticebar 公告栏
1. 第一次动画结束,将判断第一次动画的变量设置为 false;2. 异步设置计算动画的时间;3. 设置无限循环移动的动画className。原创 2023-08-10 10:30:00 · 338 阅读 · 0 评论 -
【taro react】---- 获取元素的位置和宽高等信息
1. 元素存在,判断使用对应环境获取元素信息;2. H5环境使用元素的获取元素信息方法;3. 微信小程序环境调用 boundingClientRect 获取元素信息;4. 返回默认值。原创 2023-08-01 09:06:12 · 1816 阅读 · 0 评论 -
Taro React组件开发(10) —— RuiUploadImages 多图片上传组件【转 base64 实现】
1. 由于使用的是上传 base64 字符串给后端,后端需要再次转换,两次转换,不建议采用此种方式上传;2. 上传图片过大,会导致转换和上传很慢,因此在头像等小图可以采用此方法上传。原创 2023-07-03 10:30:00 · 955 阅读 · 0 评论 -
【taro react】 ---- 常用自定义 React Hooks 的实现【三】之订阅消息
请求订阅(设备)消息!原创 2023-06-25 16:36:43 · 595 阅读 · 0 评论 -
【taro react】 ---- 常用自定义 React Hooks 的实现【二】
准备使用该 hook 开发一个贪吃蛇游戏,因此具体使用在贪吃蛇游戏中展示使用案例!注意:useTimeout 只会在 delay ms后执行一次就完成,不会再次执行。一个可以处理 setTimeout 计时器函数的 Hook。一个可以处理 setInterval 的 Hook。原创 2023-06-06 09:21:11 · 386 阅读 · 0 评论 -
【taro react】 ---- 常用自定义 React Hooks 的实现【一】
用法与 React.useState 完全一样,但是在组件卸载后异步回调内的 setState 不再执行,避免因组件卸载后更新状态而导致的内存泄漏。管理 object 类型 state 的 Hooks,用法与 class 组件的 this.setState 基本一致。如果 effect 有返回一个函数,React 将会在执行清除操作时调用它。目前存在的问题,还没进行测试,只是一种解决思路。获取当前组件是否已经卸载的 Hook。在组件首次渲染时,执行的方法。在组件卸载时,执行的方法。原创 2023-05-31 10:30:00 · 742 阅读 · 0 评论 -
【taro react】---- 解决开发环境微信小程序由于主包体积过大不能预览问题
可以配置检测组件中未使用组件,进行删除;检测组件中未使用的方法,进行删除冗余的代码;检测整个程序未使用的css,进行删除。原创 2023-05-18 14:12:05 · 1543 阅读 · 0 评论 -
【taro react】---- 微信小程序 optimizeMainPackage 优化主包体积大小
如果该 module 被多个分包内的 page 引用,正常情况下会被提取到主包的公共模块中,这里为了保证主包的体积最优,则会先提取成一个公共模块,然后分别复制到对应分包的 sub-common 文件夹下(因为小程序无法跨分包引入文件,所以这里需要每个分包都复制一份),需要注意的是,这样会导致总包的体积变大一些。但是注意依赖被多个分包使用时,建议单独处理优化,如果依赖像 classNames 一样小,可以直接提取到主包,如果是像 im 的 UI 依赖一样大,建议还是提取到每个使用的分包中。转载 2023-05-21 09:30:00 · 986 阅读 · 0 评论 -
【taro react】---- 打包时自动删除console以及debugger
打包时自动删除console以及debugger。原创 2023-05-18 10:10:57 · 1195 阅读 · 0 评论 -
Taro React组件开发(9) —— RuiCountDown 倒计时
1. 设置剩余时间;2. 根据剩余的毫秒时间,得出该有天,小时,分钟等的值,返回一个对象;3. 得出格式化后的时间;4. 更新格式化时间字符串,同时将字符串赋值给 timeData;5. 通过 onChange 将时间和格式化后的字符串返回给父组件;6. 如果时间已到,停止倒计时。原创 2023-04-24 10:30:00 · 613 阅读 · 0 评论 -
Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】
由于 Taro.uploadFile 只能每次对一个选择图片进行上传,所以对选择的第一个图片进行上传;使用 Taro.chooseImage 选择要上传的图片。注意由于api原因,因此实现单图上传。原创 2023-04-23 19:36:17 · 837 阅读 · 0 评论 -
【创作赢红包】Taro React组件使用(7) —— RuiLuckGrid 九宫格抽奖
暴露抽奖开始和结束方法,需要注意;动画执行阶段的判断和更新,防止重复点击和提前结束;执行结束函数时判断动画所处阶段,如果加速阶段,需要进行等待。原创 2023-04-01 09:16:28 · 416 阅读 · 0 评论 -
Taro React组件使用(6) —— RuiSendCode 短信验证码【倒计时】
每次点击,必须更新 isStart 变量,防止用户二次或者连续点击;在倒计时完成时,更新 isStart 变量,允许用户再次进行短信验证码的发送。原创 2023-04-03 10:00:00 · 620 阅读 · 0 评论 -
Taro React组件使用(5) —— RuiPasswordInput 密码输入框显示隐藏和清空
初始化时,需要将传入的 value 赋值给当前组件的 value, 不能直接修改 props 的 value;在组件内输出组件内的变量时,最好先判断输出函数是否定义,再输出,否则很容易引起报错。原创 2023-03-27 10:00:00 · 698 阅读 · 0 评论 -
【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
无法对已卸载的组件执行react状态更新。原创 2023-03-22 14:00:00 · 596 阅读 · 0 评论 -
Taro React组件使用(4) —— RuiInputCode 验证码输入框
注意,使用的input隐藏,view模拟输入框;注意,输入框模拟时需要知道是否已聚焦,所以需要使用css动画模拟聚焦样式;注意 className 使用 classNames 插件来判断样式的使用和不使用。原创 2023-03-17 10:30:00 · 901 阅读 · 0 评论 -
Taro React组件使用(1) —— Overlay 遮罩层【渐入渐出动画遮罩层】
在 Taro 文件中引入组件,将组件放入src下的components文件夹中。提供一个简单的 Overlay 遮罩层,在页面上的层级为 1026;原创 2023-03-10 10:00:00 · 254 阅读 · 0 评论 -
Taro React组件开发(3) —— RuiRate 评论评分
【代码】Taro React组件开发(3) —— RuiRate 评论评分。原创 2023-02-13 09:19:38 · 748 阅读 · 0 评论 -
Taro React组件开发(2) —— RuiEditor 富文本编辑器【兼容H5和微信小程序】
在react中是关键字,不能使用,只能用替代;添加允许子节点修改或复制;contenteditable 获得焦点后的边框设置 {outline: 0px solid transparent;};此处只是实现了一个简单的富文本编辑器,其他功能可以根据此基础添加,比如字号,颜色,背景色等。原创 2022-12-27 10:30:00 · 1713 阅读 · 5 评论 -
【taro react】---- Warning: Invalid DOM property `contenteditable`. Did you mean `contentEditable`?
在react中【contenteditable】 替换为 【】!!!添加允许子节点修改或复制!!!获得焦点后的边框设置 {outline: 0px solid transparent;}!!!原创 2022-12-21 11:19:39 · 353 阅读 · 0 评论 -
Taro React组件开发(1) —— Overlay 遮罩层【渐入渐出动画遮罩层】
每个动画执行的时间差,如果没有对应的时差,可能会导致动画不执行或者动画没有执行完成就关闭等情况;第一层和第三层必须添加阻止冒泡,否则在组件使用的时候,会由于冒泡导致各种点击事件问题。原创 2022-10-22 14:28:55 · 721 阅读 · 0 评论 -
【taro react】---- 配置目录别名
Taro React 的目录别名配置,方便在组件、scss等引入的时候写很长的相对路径。原创 2022-10-20 13:57:18 · 818 阅读 · 0 评论 -
【taro react】对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告。
【代码】【taro react】对修饰器的实验支持功能在将来的版本中可能更改。在 "tsconfig" 或 "jsconfig" 中设置 "experimentalDecorators" 选项以删除此警告。原创 2022-09-26 10:05:17 · 846 阅读 · 0 评论 -
【taro react】---- 团购或秒杀的批量倒计时实现
不管是销毁组件或者更新倒计时时间,都必须将正在执行的倒计时timer任务进行清除;当前时间和开始时间字符串转时间戳时,必须注意苹果系统不能转换带 【-】 的字符串。原创 2022-08-17 10:53:27 · 675 阅读 · 0 评论 -
【taro react】---- 兼容微信小程序和H5的海报绘制插件
此处绘制海报没有对海报进行缩放处理,而是按照海报的原尺寸在屏幕之外进行的绘制,当绘制完成,导出base64地址,在img标签中显示图片!此处保存海报使用的是保存base64的方式,保存图片,所以注意清空其他图片!当使用圆角,是对当前进行裁剪,圆角区域外的其他绘制不在显示,因此使用次组件,需要先绘制圆角区域以外的内容,最后绘制圆角和圆角内的部分;.........原创 2022-08-15 11:05:11 · 983 阅读 · 0 评论 -
【taro react】---- 微信小程序 通过 Jenkins 实现自动化部署
2. 配置【密钥及 IP 白名单】1. 配置密钥注意 setting 涉及到上传代码是否自动压缩wxml,wxss等,可以直接使用我的配置5. Jenkins 配置1. 项目描述配置2. 引入 terser-webpack-plugin3. 配置小程序编译压缩WXRUI体验二维码我的博客,欢迎交流!我的CSDN博客,欢迎交流!微信小程序专栏前端笔记专栏微信小程序实现部分高德地图功能的DEMO下载微信小程序实现MUI的部分效果的DEMO下载微信小程序实现MUI的GIT项目地址微信原创 2022-07-01 10:21:00 · 1283 阅读 · 2 评论 -
【taro react】----打包微信小程序后 onShow 多次执行(随着进入页面的次数在不断的累计)
2. 代码执行结果6. 修改后的执行结果页面组件 onShow 执行多次【累计执行】1. 页面代码2. 执行结果5. 解决后执行结果原创 2022-06-10 11:26:06 · 1753 阅读 · 1 评论