Web前端
关注
分享
扫一扫
文章平均质量分 52
粤小七
这个作者很懒，什么都没留下…
展开
-
解决 uni-app 微信小程序报错但没显示哪一页哪一行的奇怪问题
微信小程序报错但没显示哪一页哪一行的奇怪问题。原创 2024-01-03 16:47:33 · 612 阅读 · 2 评论 -
解决网页 H5 对接微信 JSSDK 后自定义分享和跳转APP等没效果
在聊天窗口直接点击一个文本链接，现在微信JSSDK已经不支持这样使用。将文本链接生成一个二维码，然后微信扫码进入这个链接。原创 2023-10-11 15:07:28 · 586 阅读 · 0 评论 -
解决移动端点击后 hover 的样式不消失问题
按钮设置了 添加背景色，在移动端点击后发现 的样式不消失。说明它在 内的解释是：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover 也有相关问题：https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover原创 2022-12-01 09:49:48 · 1393 阅读 · 0 评论 -
JS 点击气泡卡片自身外的区域自动关闭的代码逻辑
Vue HTMLJS原创 2022-11-23 17:18:53 · 834 阅读 · 2 评论 -
HTML 移动端加载多个 iframe 的 WebGL 场景模型有的有时会加载不出来但 PC 端没问题的原因
经过了很多的尝试，发现减少 iframe 里面的 webgl 场景后就不会出现加载不出来的问题，怀疑是不是手机浏览器带不动导致的，最后试试监听 webglcontextlost 事件，果然打印出来了东西，最后我总结是 GPU 崩溃了导致的触发了 webglcontextlost 事件。参考资料：https://forum.cocos.org/t/failed-to-execute-shadersource-on-webglrenderingcontext/79278https://www.khronos.原创 2022-02-10 14:46:54 · 1725 阅读 · 0 评论 -
解决直接打开 vite +vue3 打包的 HTML 文件报错跨域 from origin ‘null‘ has been blocked by CORS policy
原因vite 是直接使用原生 ES6 模块打包的，然而 ES6 模块遵循同源策略，加上 script 本来就会跨域和 file 协议不支持跨域，所以不能直接通过 file 协议直接打开，除非使用 http(s) 等支持跨域的协议。解决办法1启动一个本地服务器，npm 安装 http-server 包，或着 VSCode 安装 Live Server 拓展等办法都可以。解决办法2暂时禁用浏览器的同源策略。............原创 2022-01-15 13:53:46 · 7183 阅读 · 4 评论 -
解决 uni-app web-view 的网页访问 app 本地资源图片报错 Not allowed to load local resource: file:///
解决办法1使用 uni-app web-view 组件的 overrideResourceRequest 方法拦截网页加载的图片资源，重定向返回 app 应用本地的图片资源，下图为示例解决办法2将整个打包好的网页 HTML 放在 app 源代码里面，然后 app 里面的 web-view 组件加载这个 HTML，下图是我用原生安卓做的示例（uni-app 大图太多打包 app 一直卡蹦，只好用原生试），仅供参考。............原创 2022-01-13 15:30:13 · 2524 阅读 · 0 评论 -
解决 Vue3 + stylelint14 + SCSS + VSCode 没效果和报错 Unknown word (CssSyntaxError)
原因安装的插件 stylelint、stylelint-config-standard、stylelint-scss 版本太新，对于 vue3 文件的支持不好。解决办法npm install --save-dev postcss-html stylelint-config-recommended-vue 和 npm install --save-dev stylelint-config-standard-scss 并且进行配置，详情可查看官方迁移说明 https://github.com/stylel原创 2022-01-12 17:46:10 · 16117 阅读 · 8 评论 -
解决通过 HTML 和 JS 拖拽切换序列帧动画图片会慢和卡顿
这个问题折腾了我几个小时，最后想有没有可能是图片太大性能问题，然后我把原图的分辨率 20481536减小为 1024768 竟然就可以了。原创 2021-12-29 23:30:00 · 1596 阅读 · 0 评论 -
解决 iOS HTML ＜audio＞ 标签设置 currentTime 后再获取它的值没有变化
问题复现框架：Vue组件：@liripeng/vue-audio-playeriOS 版本：14.4注意：this.$refs.audio 是 <audio> 标签实例当我点击进度条时设置了 currentTime，例如 this.$refs.audio.currentTime = 30，但不执行播放。点击播放按钮，执行 this.$refs.audio.play() 和 window.setInterval(() => { console.log(this.$refs.a原创 2021-04-26 17:37:59 · 1148 阅读 · 1 评论 -
JS判断不同的浏览器和版本，提示浏览器版本过低，兼容IE8到IE11
产品需求页面顶部提示用户下载并使用 360 极速浏览器的极速模式，该提示可以手动关闭，兼容 IE8-IE11。需求由来项目网站不支持 IE11 及以下，有的人用低版本的浏览器打开页面显示错乱功能无法正常使用。实现效果如果不是谷歌内核的浏览器则出现下载提示，如果是谷歌内核的浏览器但内核版本低于 86 的则出现下载提示，最终效果如下图：不是谷歌内核的浏览器出现的提示是谷歌内核的浏览器但内核版本低于 86 出现的提示源码复制粘贴到 HTML 中即可生效<script ty原创 2021-04-16 11:23:41 · 2638 阅读 · 0 评论 -
uni-app 原生插件开发时 com.alibaba:fastjson:1.1.46.android 报错解决方法
Andorid Studio 报的错误03-12 00:55:09.156 7476-7476/com.example.pdaplugin E/AndroidRuntime: FATAL EXCEPTION: main Process: com.example.pdaplugin, PID: 7476 java.lang.NoClassDefFoundError: Failed resolution of: Lcom/alibaba/fastjson/JSONObject;原创 2021-03-02 14:37:14 · 1163 阅读 · 2 评论 -
vue3.0 vue-cli4+element-plus 按需加载组件并配置 vue-i18n 9.0 国际化多语言
目录结构src/lang/index.js 文件import { createI18n } from 'vue-i18n'import elementlangEn from 'element-plus/lib/locale/lang/en'import elementlangZhCn from 'element-plus/lib/locale/lang/zh-cn'import localeLangEn from './en'import localeLangZhCn from './zh-c原创 2021-02-03 18:49:49 · 2498 阅读 · 0 评论 -
uni-app 用 cli 方式创建 TypeScritp 项目引入 uview-ui 报错【解决方法】
报错：无法找到模块“uview-ui”的声明文件。“e:/xxxxxx/node_modules/uview-ui/index.js”隐式拥有 “any” 类型。尝试 npm install @types/uview-ui (如果存在)，或者添加一个包含 declare module 'uview-ui'; 的新声明(.d.ts)文件ts(7016)然后我在 sfc.d.ts 加了 declare module 'uview-ui' 还是不行，思前想后想不通，又看了一遍报错提示，发现上面是有个分号的，.原创 2020-07-13 14:57:42 · 5786 阅读 · 8 评论 -
Vue Nuxt.js 使用 VantUI 自动按需引入组件和定制主题文件覆盖的配置方法
const path = require('path')export default { build: { babel: { plugins: [ // VantUI 自动按需引入组件配置 [ 'import', { libraryName: 'vant', ...原创 2019-11-06 11:27:53 · 2330 阅读 · 0 评论 -
Vue 奇淫技巧，控制台打印（非 console.log）当前组件实例
Vue 组件挂载成功后会在根节点 DOM 实例上挂一个 __vue__ 对象，所以有时候并不一定为了好调试而非要把 new Vue() 的实例赋给 window.app 什么的，直接在 console 上用 $0 表示当前高亮的节点，然后通过 __vue__ 就能找到组件实例了...原创 2019-09-23 11:18:56 · 8829 阅读 · 0 评论 -
响应式和自适应区别
先给大家体验一下响应式和自适应的区别，请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章，摘抄并修改了一下，请大家欣赏： 起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800转载 2017-01-30 23:22:01 · 287 阅读 · 0 评论 -
绝对定位让元素完全居中的两种方法
方法一：（不能微调）父容器：position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;方法二：（可微调）要居中的元素：position: absolute;top: 50%;left: 50%;margin-top: -100px; /* 元素高度的一半 */margin-left:...原创 2017-03-29 11:25:35 · 18709 阅读 · 2 评论 -
父级内的元素垂直居中
垂直居中的方法数不胜数，随便举两个：1. 表格居中HTML：CSS：#box { display: table; height: 400px; background: #c00; }#content { color: #fff; text-align: center; display: table-cell; vertical-align: middle; }兼容性转载 2017-04-08 17:05:16 · 334 阅读 · 0 评论 -
Jq form表单提交验证与响应简单示例
表单提交验证function verification(){if($('#name').val()==''){alert('姓名不能为空!');return false;}if($('#content').val()==''){alert('内容不能为空!');return false;}return true;}原创 2017-04-24 10:15:00 · 4896 阅读 · 0 评论 -
前端加载自定义字体及速度优化
如何加载自定义字体？CSS3中，使用@font-face即可加载自定义字体了。 推荐的跨浏览器 @font-face CSS 写法：/*声明 WebFont*/@font-face { font-family: 'YourWebFontName'; src: url('../font/YourWebFontName.eot'); src: url('YourWebFo转载 2017-05-08 15:43:12 · 5614 阅读 · 0 评论 -
JS Input输入框实时监听示例（兼容IE8）
// IE11以下执行if(document.all){ // input搜索框的值实时监听 var searchInput = document.getElementById("search-input"); var searchBtn = document.getElementById("search-btn"); searchInput.onproper原创 2017-08-14 09:55:39 · 2860 阅读 · 0 评论 -
Web网站HTML打开QQ聊天窗口示例
核心代码：tencent://message/?uin=1234567&Site=Sambow&Menu=yes示例：<div class="online-con"> <a href="tencent://message/?uin=1234567&Site=Sambow&Menu=yes"> <div class原创 2018-05-30 10:33:47 · 14031 阅读 · 0 评论 -
解决Vue同路由跳转后数据不更新
场景：需要根据不同的 $route.query 请求不同的数据问题：由于使用 VueRouter 跳转时组件实例会被复用，跳转后无法拿到最新的 $route.query，并且地址栏的 url 不会变化解决方法1此方法一劳永逸，但是页面渲染速度会降低指定页面&amp;lt;!-- :key=&quot;$route.fullPath&quot; 解决同路由但不同查询参数跳转后数据不更新 --&amp;gt;&原创 2019-03-03 11:32:16 · 3019 阅读 · 3 评论 -
Vue 单页面添加百度统计或友盟统计
在全局 里面执行友盟统计网上有差不多的答案，但我发现网上的答案没有记录到的 ，我经过观察友盟的文档和之前的代码，进行了一些矫正，成功记录了的 ，经过仔细测试后没有问题。在 入口添加...原创 2019-03-19 23:00:36 · 1970 阅读 · 2 评论 -
解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG
网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，于是自己写了个适用大多场景的解决方案这里用 Vue 为例：<template> <div ref="container"> <input type="text" @blur="onBlur"> &l...原创 2019-03-20 20:23:30 · 10052 阅读 · 6 评论 -
解决 html2canvas 跨越
场景场景1：线上域名与图片域名不一样。出现错误：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.场景2：线上域名是 https，图片的域名是 http。出现错误：Redirect from 'http://cdn.******.cn/155127031599...原创 2019-03-21 15:25:47 · 1172 阅读 · 0 评论 -
解决 JS Date 时差 8 小时问题
将当前时间 + 时差时间 = 当前时间，getTimezoneOffset() 获取时差（以分钟为单位），转为小时需要除以 60let date = new Date(time)date.setHours(date.getHours() + date.getTimezoneOffset() / 60) // 解决本地时间与格林威治标准时间 (GMT) 的时差...原创 2019-07-25 09:40:42 · 11428 阅读 · 0 评论 -
JS 获取处理链接的参数
let url= new URL('http://test.com?a=1&b=1')// 增加 url 参数url.searchParams.set('c', 1)console.log(url.href) // http://test.com/?a=1&b=1&c=1// 删除 url 参数url.searchParams.delete('b')cons...原创 2019-09-09 12:05:29 · 186 阅读 · 0 评论 -
tppabs批量删除
这是Teleport Pro软件留下的标记。该软件是离线浏览器，下载完整个网页后，它会在图片或超级链接标签内插入tppabs标签，以记录该图片或超级链接指向的原始地址。因为这个标签不是合法标签，所以普通浏览器会忽略它。你可以通过element.getAttribute("tppabs")在JS中读取这个属性。可以在 DreamWeaver中使用正则表达式批量清除这种代码.具体写法如转载 2017-02-28 10:21:03 · 649 阅读 · 0 评论