- 博客(166)
- 资源 (10)
- 收藏
- 关注
原创 uniapp中获取位置信息处理
处理逻辑:一、获取定位时,用户直接同意授权获取定位,得到位置信息; 第1步:获取用户当前的授权状态 => 第2步:判断是同意授权位置时 => 第3步:获取位置 二、获取定位时,用户拒绝授权获取定位的: 第1步:获取用户当前的授权状态 => 第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 第3步:用户选择允许授权后 第4步:重新获取位置,得到位置信息 第3步:用户选择不允许授权后 第4步:可至第1步,继续重新获取位置 引用文件可复用的处理逻辑代码:引用文件:需要获取位置代码处执行
2024-02-28 17:55:00 987
原创 安装 nvm
nvm 即 node 版本管理工具 (node version manager),好处是方便切换 node.js 版本。通过将多个 node 版本安装在指定路径,然后通过 nvm 命令切换时,就会切换我们环境变量中 node 命令指定的实际执行的软件路径。使用场景:若同时在做好几个项目,这些项目的需求都不太一样,导致了这些个项目需要依赖的 nodejs 版本也不同,这种情况下,我们就可以通过 nvm 来切换 nodejs 的版本,而不需要频繁地下载/卸载不同版本的 nodejs 来满足当前项目的要求
2024-01-23 19:38:44 1181
原创 字蛛 font-spider 使用
在移动端的web开发中,设计师们往往为了页面显示效果好看,会使用一些特殊字体,那我们开发时就需要引入这些字体文件,但字体文件如果太大的话,下载就会特别慢,会大大影响的体验效果,所以我们需要对此进行优化处理。字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
2024-01-19 14:49:48 422
原创 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 1093 1
原创 Howler.js HTML5声音引擎
Howler.js是一个不错的HTML5声音引擎。功能强大,性能不错,用起来也很方便。移动端的Safari和Chrome都禁止网页自动播放声音,必须通过用户的操作,touch, click等触发。Howler可以设置成自动捕捉用户操作激活(解禁)声音播放。支持很多声音格式以兼容各种浏览器。日常开发中,解决一些细节问题1. 苹果手机、安卓手机,自动播放的问题2. 播放延迟处理。使用 Howler.js 对于延迟处理效果比较不错
2023-10-20 18:44:11 849
原创 翻牌闯关游戏
翻牌闯关游戏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 335
原创 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 245
原创 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 1897
原创 小程序中web-view网页中打开或返回小程序页面
小程序中web-view网页中使用JSSDK提供的接口打开或返回小程序页面。1、引入 JSSDK 文件。2、判断是否在小程序环境。3、根据是否小程序环境,执行操作。
2023-05-22 11:32:50 1565
原创 小程序中使用CANVAS实现手写签名并写入模板图片中
小程序中使用CANVAS实现手写签名并写入模板图片中实测,开发者工具中滚动条位置会影响书写,显示有些问题,手机上测试正常
2023-05-04 17:56:43 634 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 850
原创 echarts地图展示指定区域
echarts地图展示指定区域指定区域获取方式:城市范围选择器:http://datav.aliyun.com/portal/school/atlas/area_selectorecharts地图展示指定区域及经纬度设置展示标注
2023-03-22 14:29:44 1615
原创 移动端H5弹幕test
移动端H5弹幕test之前弹幕滚动效果也是使用CSS动画实现的,列表中根据当前KEY设置动画延时,但数据多的时候,安卓机卡顿明显。此方式采用“分页”方式,每页(每次)截取指定数量的列表数据,当最后一个列表项动画执行完毕后(弹幕展示过程中会有一段时间空白),再截取展示下一页列表数据,当所有列表数据全部执行完毕后,再从第一页开始执行展示效果。
2023-03-21 15:49:53 249
原创 调研生成GIF表情包之路
调研生成GIF表情包之路调研阶段分解GIF图片、合成GIF图片合成GIF图片 - 表情包方案优化阶段表情包可视化编辑、生成配置信息数据工具PHP合成生成GIF动图PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案
2023-02-16 15:54:17 431
原创 表情包可视化编辑、生成配置信息数据工具
表情包可视化编辑、生成配置信息数据工具,合成GIF图片 - 表情包 后续,用于快速、便捷生成 img_config.js 中 要生成的GIF每一帧数据(写入头像图片信息参数)
2023-02-16 11:57:16 453
原创 PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案
PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案,接到的需求要生成透明GIF图,发现生成的GIF图有帧重叠的情况,可能不知道扩展中的方法并未GET全,通过调研最终找到其他解决方案:PHP执行 cmd 命令的方法,执行 ImageMagick - magick 命令
2023-01-15 16:41:05 887 2
原创 创建vMix虚拟集
从 0 创建 vMix 虚拟集注意事项:每个虚拟集都存储在一个文件夹中,单个虚拟集中最多可以写 5 个可输入图层元素:dynamic="True" 和 4 个缩放元素:。文件包括:第一类文件:config.xml第二类文件:图片(所有图像必须为 JPG 或 PNG 格式,并且必须与虚拟集配置位于同一目录中)第一层、第二层、第三层、...层图片:背景图、中间图、屏幕(正常展示)、屏幕(uvmap贴图展示)、摄像机、前景图 ...虚拟集配置 config.xml 文件的写作
2022-11-10 15:12:24 2101
原创 PHP合成生成GIF动图
主要是针对纯前端生成GIF图片质量问题做的调研;前端把CANVAS处理的每帧图片转成base64图片传至后台,后台生成最终GIF图片返回给前台展示;环境需要:PHP Imagick 示例:实现:php针对项目目录下图片集处理:php处理 base64格式 图片集处理:
2022-10-10 15:52:43 1053
原创 phpstudy安装imagick扩展
phpstudy安装imagick扩展,phpstudy默认是没有安装imagick扩展的,需要自己下载imagick扩展。第一步、安装imageMagick软件。第二步、下载imagick dll扩展。第三步、使用扩展。
2022-09-14 09:02:10 1573
原创 合成GIF图片 - 表情包
合成GIF图片 - 表情包数据配置 - 生成GIF每一帧数据信息(当前帧原始gif素材图片 / 写入头像图片信息:宽、高、x轴位置、y轴位置、旋转角度、旋转中心点)demo 1、上传图片-裁剪(按头像比例裁剪图片 - 规则图形)-处理合成生成表情包demo 2、上传图片-抠图(可移动/旋转/缩放 - 按头像区域内抠图处理 - 不规则图形)-处理合成生成表情包准备 - 数据配置 - 生成GIF每一帧数据信息:例:多张gif图对应数据,实际操作时可选择一张对应生成表情gif图...
2022-07-12 17:44:24 427
原创 分解GIF图片、合成GIF图片
分解GIF图片libgif-js:JavaScript GIF 解析器和播放器https://github.com/aoiu/libgif-jsorhttps://github.com/buzzfeed/libgif-js
2022-07-11 16:29:50 803
原创 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 836
原创 在浏览器上安装 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 804 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 446
原创 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 7475
原创 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 638
原创 开放标签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 616
原创 根据微信返回的头像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 1301
原创 requestAnimationFrame、setTimeout、setInterval对比测试
requestAnimationFrame、setTimeout、setInterval对比测试:PC端测试:相比之下setTimeout有延迟手机上测试:相比之下setTimeout、setInterval都有延迟
2022-01-07 17:59:41 509
原创 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 8891 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 1006
原创 Node.js安装/配置、npm命令整理、淘宝镜像等
Node.js 安装包及源码下载地址:https://nodejs.org/en/download/Node.js 历史版本下载地址:https://nodejs.org/en/downloNode.js 安装成功后,配置npm在安装全局模块时的路径和缓存cache的路径因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\Administrator\AppData\Roaming 路径下的npm 和 npm_cache 中,不方便..
2021-12-08 18:21:01 1406
原创 使用正则表达式验证及处理相关需求
var app = new Vue({ el: '#app', data: { }, methods: { // 数字从字符分离,使用标签包裹 setNumberSpanParcel(msg){ return msg.replace(/(\d+)/g,'<span class="DIN">$1</span>') }, // 例: // {{setNumberSpanParcel('111文字222文字')}} // 金额用逗号隔开(.
2021-11-24 17:47:04 253
从 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关注的人