- 博客(168)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 uniapp picker 多列选择器用法
uniapp picker 多列选择器联动筛选器交互处理方法，uniapp 多列选择器 mode="multiSelector" 数据及筛选联动交互处理，通过接口获取数据，根据用户选择当前列选项设置子列数据，实现三级联动效果，本示例中处理了三级无数据时则从数据中删除，处理三级后二级无数据时则亦从数据中删除，删除的数据最终不展示在筛选器中。
2024-04-17 11:07:50
457
原创 vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法
一般在开发时，设置了 date/time/datetime 类型的 input 属性 placeholder 时，发现实际展示中却并不生效，处理逻辑，判断表单项未设置值时，则设置伪类样式，文本内容为 placeholder 属性值，展示样式重叠在表单项组件上，以达到提示文本效果；
2024-04-08 17:49:09
236
原创 uniapp中获取位置信息处理
处理逻辑：一、获取定位时，用户直接同意授权获取定位，得到位置信息； 第1步：获取用户当前的授权状态 => 第2步：判断是同意授权位置时 => 第3步：获取位置 二、获取定位时，用户拒绝授权获取定位的： 第1步：获取用户当前的授权状态 => 第2步：判断是未同意授权位置时，引导用户打开设置界面，重新选择授权功能 => 第3步：用户选择允许授权后 第4步：重新获取位置，得到位置信息 第3步：用户选择不允许授权后 第4步：可至第1步，继续重新获取位置 引用文件可复用的处理逻辑代码：引用文件：需要获取位置代码处执行
2024-02-28 17:55:00
2003
原创 安装 nvm
nvm 即 node 版本管理工具 (node version manager)，好处是方便切换 node.js 版本。通过将多个 node 版本安装在指定路径，然后通过 nvm 命令切换时，就会切换我们环境变量中 node 命令指定的实际执行的软件路径。使用场景：若同时在做好几个项目，这些项目的需求都不太一样，导致了这些个项目需要依赖的 nodejs 版本也不同，这种情况下，我们就可以通过 nvm 来切换 nodejs 的版本，而不需要频繁地下载/卸载不同版本的 nodejs 来满足当前项目的要求
2024-01-23 19:38:44
1384
原创 字蛛 font-spider 使用
在移动端的web开发中，设计师们往往为了页面显示效果好看，会使用一些特殊字体，那我们开发时就需要引入这些字体文件，但字体文件如果太大的话，下载就会特别慢，会大大影响的体验效果，所以我们需要对此进行优化处理。字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
2024-01-19 14:49:48
538
原创 v-html命令渲染的内容，使用scoped属性的情况下，样式不起作用
questionTitle : "题目中有图片<img src='question/q_1.png' >">>> 在 sass | less 中不作用，用 /deep/ | ::v-deep 来代替。通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped。Vue 3 中 ::v-deep 被废除了，取而代之的是 ::deep。
2023-11-16 16:31:58
1125
1
原创 Howler.js HTML5声音引擎
Howler.js是一个不错的HTML5声音引擎。功能强大，性能不错，用起来也很方便。移动端的Safari和Chrome都禁止网页自动播放声音，必须通过用户的操作，touch, click等触发。Howler可以设置成自动捕捉用户操作激活（解禁）声音播放。支持很多声音格式以兼容各种浏览器。日常开发中，解决一些细节问题1. 苹果手机、安卓手机，自动播放的问题2. 播放延迟处理。使用 Howler.js 对于延迟处理效果比较不错
2023-10-20 18:44:11
994
原创 翻牌闯关游戏
翻牌闯关游戏3关：关卡由少至多12格、20格、30格图案：12个玩法：点击两张卡牌，图案一到即可消除掉记忆时长(毫秒)：memoryDurationTime:5000可配置，默认5000提示游戏玩法：showTipsFlag:1可配置，1:判断localStorage值，仅一次提示游戏玩法 2:每次游戏第一关都提示游戏玩法提示游戏玩法 时长(毫秒)：showTipsTime:4100可配置，默认4100，注：设置的引导手势动画2s是否需要计时：ifNeedTime:2可配置，0
2023-09-16 22:55:38
344
原创 vue-cli项目使用px转rem插件
只能执行命令 npm uninstall px2rem-loader 卸载 px2rem-loader，经测试：根字号大小不会根据页面尺寸宽度极限变大而变化，依据的页面最大尺寸宽度为540px）后改使用 postcss-pxtorem 插件，完美解决 Vant 组件变小的问题。之前使用 px2rem-loader 插件，但会影响Vant组件变小，与 amfe-flexible 搭配。与 amfe-flexible 搭配。与 lib-flexible 搭配。与 lib-flexible 搭配。
2023-07-12 17:09:19
258
原创 WEB端唤起 百度|腾讯|高德 地图一键导航功能
腾讯地图https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:纬度,经度;title:地点名称没有则根据经纬度自去填充;addr:地点位置地址信息没有则根据经纬度自去填充百度地图http://api.map.baidu.com/marker?location=纬度,经度&title=标题-地点名称&content=内容-地点位置地址信息&output=html&src=webapp.baidu.openAPIdemo高德地图
2023-05-26 16:27:41
2127
原创 小程序中web-view网页中打开或返回小程序页面
小程序中web-view网页中使用JSSDK提供的接口打开或返回小程序页面。1、引入 JSSDK 文件。2、判断是否在小程序环境。3、根据是否小程序环境，执行操作。
2023-05-22 11:32:50
1751
原创 小程序中使用CANVAS实现手写签名并写入模板图片中
小程序中使用CANVAS实现手写签名并写入模板图片中实测，开发者工具中滚动条位置会影响书写，显示有些问题，手机上测试正常
2023-05-04 17:56:43
710
1
原创 小程序中图片转 base64 编码格式
小程序中图片转 base64 编码格式使用例：小程序项目内部图片转 base64 图片并使用 wx.previewImage 查看大图let base64Img = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync('images/aaa.png','base64');wx.previewImage({ urls: [base64Img], current: base64Img});例：小程序中上传的图片转
2023-05-04 17:30:36
873
原创 echarts地图展示指定区域
echarts地图展示指定区域指定区域获取方式：城市范围选择器：http://datav.aliyun.com/portal/school/atlas/area_selectorecharts地图展示指定区域及经纬度设置展示标注
2023-03-22 14:29:44
1701
原创 移动端H5弹幕test
移动端H5弹幕test之前弹幕滚动效果也是使用CSS动画实现的，列表中根据当前KEY设置动画延时，但数据多的时候，安卓机卡顿明显。此方式采用“分页”方式，每页（每次）截取指定数量的列表数据，当最后一个列表项动画执行完毕后（弹幕展示过程中会有一段时间空白），再截取展示下一页列表数据，当所有列表数据全部执行完毕后，再从第一页开始执行展示效果。
2023-03-21 15:49:53
260
原创 调研生成GIF表情包之路
调研生成GIF表情包之路调研阶段分解GIF图片、合成GIF图片合成GIF图片 - 表情包方案优化阶段表情包可视化编辑、生成配置信息数据工具PHP合成生成GIF动图PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案
2023-02-16 15:54:17
442
原创 表情包可视化编辑、生成配置信息数据工具
表情包可视化编辑、生成配置信息数据工具，合成GIF图片 - 表情包 后续，用于快速、便捷生成 img_config.js 中 要生成的GIF每一帧数据（写入头像图片信息参数）
2023-02-16 11:57:16
460
原创 PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案
PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案，接到的需求要生成透明GIF图，发现生成的GIF图有帧重叠的情况，可能不知道扩展中的方法并未GET全，通过调研最终找到其他解决方案：PHP执行 cmd 命令的方法，执行 ImageMagick - magick 命令
2023-01-15 16:41:05
906
2
原创 创建vMix虚拟集
从 0 创建 vMix 虚拟集注意事项：每个虚拟集都存储在一个文件夹中，单个虚拟集中最多可以写 5 个可输入图层元素：dynamic="True" 和 4 个缩放元素：。文件包括：第一类文件：config.xml第二类文件：图片（所有图像必须为 JPG 或 PNG 格式，并且必须与虚拟集配置位于同一目录中）第一层、第二层、第三层、...层图片：背景图、中间图、屏幕（正常展示）、屏幕（uvmap贴图展示）、摄像机、前景图 ...虚拟集配置 config.xml 文件的写作
2022-11-10 15:12:24
2199
原创 PHP合成生成GIF动图
主要是针对纯前端生成GIF图片质量问题做的调研；前端把CANVAS处理的每帧图片转成base64图片传至后台，后台生成最终GIF图片返回给前台展示；环境需要：PHP Imagick 示例：实现：php针对项目目录下图片集处理：php处理 base64格式 图片集处理：
2022-10-10 15:52:43
1109
原创 phpstudy安装imagick扩展
phpstudy安装imagick扩展，phpstudy默认是没有安装imagick扩展的，需要自己下载imagick扩展。第一步、安装imageMagick软件。第二步、下载imagick dll扩展。第三步、使用扩展。
2022-09-14 09:02:10
1625
原创 合成GIF图片 - 表情包
合成GIF图片 - 表情包数据配置 - 生成GIF每一帧数据信息（当前帧原始gif素材图片 / 写入头像图片信息:宽、高、x轴位置、y轴位置、旋转角度、旋转中心点）demo 1、上传图片-裁剪（按头像比例裁剪图片 - 规则图形）-处理合成生成表情包demo 2、上传图片-抠图（可移动/旋转/缩放 - 按头像区域内抠图处理 - 不规则图形）-处理合成生成表情包准备 - 数据配置 - 生成GIF每一帧数据信息：例：多张gif图对应数据，实际操作时可选择一张对应生成表情gif图...
2022-07-12 17:44:24
433
原创 分解GIF图片、合成GIF图片
分解GIF图片libgif-js：JavaScript GIF 解析器和播放器https://github.com/aoiu/libgif-jsorhttps://github.com/buzzfeed/libgif-js
2022-07-11 16:29:50
829
原创 gifshot.js合成GIF
gifshot.js：可以从媒体流、视频或图像创建动画 GIF 的 JavaScript 库。https://github.com/yahoo/gifshot经测试：text配置项：生成的GIF每一帧所覆盖的文本；images配置项（数组）：首个设置的图片会一直显示；如设置text，则优先级最高，当前（帧）图片覆盖文本替换text配置项全局文本；demo：多张图片合成GIF图片；VIDEO生成的GIF；demo资源下载...
2022-07-11 11:28:46
863
原创 在浏览器上安装 Vue Devtools 工具
npm命令安装：1、创建一个新的文件夹，如 vue-devtools（注：该文件夹在完成扩展程序安装后，不可再 修改文件夹名称 或 移动位置 或 删除文件夹），cmd命令进入此文件夹2、执行命令：npm install vue-devtools3、下载完成后，进入 node_modules/vue-devtools/vender 文件夹，打开 manifest.json 文件，将 persistent 改为 true ，保存文件4、返回上级目录进入 node_modules/vue-devtools 文件夹
2022-07-04 11:57:10
827
1
原创 小技巧或小BUG记载处理
小技巧或小BUG记载处理1、ios中input设置readonly后仍然聚焦出现光标并弹出“完成”面板问题2、ios系统版本15.1环境下，图片四周出现阴影边框设置样式-webkit-tap-highlight-color:rgba(0,0,0,0);同时，也要加上tap-highlight-color:rgba(0,0,0,0);3、禁止微信浏览器调整页面字体大小
2022-02-16 15:47:26
463
原创 CSS 图片遮罩 -webkit-mask
渐变遮罩-webkit-mask: linear-gradient(#000, transparent);图片遮罩语法与 background 相同：-webkit-mask: url(xxx.png) repeat center top;-webkit-mask-size: contain;也可分别设置属性：-webkit-mask-image: url(xxx.png);-webkit-mask-repeat: no-repeat;-webkit-mask-position: cente
2022-02-07 17:44:12
7614
原创 cropperjs图片裁剪器及七牛上传文件
安装：cropperjs : https://github.com/fengyuanchen/cropperjsnpm install cropperjs --save --save-exact--save : 成功后存到 package.json 中 dependencies 中--save-exact : 精确版本号（精确指定版本）Qiniu-JavaScript-SDK : https://developer.qiniu.com/kodo/1283/javascriptnpm instal
2022-01-17 17:21:34
644
原创 开放标签H5跳转小程序：wx-open-launch-weapp
1. 绑定域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。2. 引入JS文件在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）备注：支持使用 AMD/CMD 标准模块加载方法加载。<scri
2022-01-13 17:52:44
702
原创 根据微信返回的头像url选择所需尺寸图片
微信用户头像url，最后的数值代表正方形头像大小（有：0、46、64、96、132数值可选，0代表640*640正方形头像）用户没有头像时该项为空，若用户更换头像，原有头像URL将失效。var data = { nickname:'昵称', headimgurl:'http://wx.qlogo.cn/mmopen/zhK3MN44IcibtzxZibicddSyp4qVX3rTtfMZsXQwa5mArMmI4A44uJgQyevo9VhePyUbv6MwhsWTzrqttXsUdzJL0Lc
2022-01-13 17:45:18
1346
原创 requestAnimationFrame、setTimeout、setInterval对比测试
requestAnimationFrame、setTimeout、setInterval对比测试：PC端测试：相比之下setTimeout有延迟手机上测试：相比之下setTimeout、setInterval都有延迟
2022-01-07 17:59:41
512
原创 H5页面，上下滑动翻页
针对之前的版本：https://blog.csdn.net/qq_16494241/article/details/78095575进行了升级修改：改用原生JS编写，之前的基于JQ可设置页面内容元素内部滚动及滚动至顶部或最底部触发翻页效果PC端模式也可鼠标滑动翻页（元素内部滚动需使用滚轮）方法：setChangePage(element,isLoop,needScrollClass)参数：element 作用区域（所有执行翻页页面的父级元素DOM）isLoop 是否循环执行翻页，第一页下滑动
2021-12-30 16:03:23
9034
1
原创 axios请求拦截器、响应拦截器、接口API及使用
在request.js中，设置axios请求拦截器、响应拦截器，对应设置get、post请求公共方法；方便接口管理，所有请求接口统一整理编写在api.js中。src/api/request.js// import Vue from 'vue';import axios from 'axios';import VueAxios from 'vue-axios';// Vue.use(VueAxios , axios);import { Toast , Dialog } from 'vant
2021-12-27 12:01:45
1031
从 0 创建 vMix 虚拟集demo
2022-11-10
合成GIF图片 - 表情包
2022-07-12
分解GIF图片、合成GIF图片
2022-07-11
gifshot.js：demo(多张图片合成GIF图片；VIDEO生成的GIF)
2022-07-11
sqlite3.exe
2022-07-06
小程序实现左右滑动切换菜单+瀑布流显示列表demo
2019-05-27
安卓微信中播放视频终于可以不再自动全屏啦
2017-05-27
web手势库AlloyFinger运用案例：代言海报
2016-09-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人