- 博客(21)
- 收藏
- 关注
RSS订阅原创 css filter drop-shadow的妙用
最近做的项目涉及到展示地图数据的开发，这是同事开发的，他用的是echarts。附上最终效果：我捣鼓了一番，其中令我比较感兴趣的是，地图有点立体的感觉，我们可以看到，地图有微微的突起，可以对比没有突起的，明显立体感就没有这么强了：那么这是怎么实现的呢？起初我以为是echarts的选项，后面我把所有选项都注释了一轮，还是没找到。随后我疯狂百度，找到一篇文章提到用css属性解决，我立马回去搜索，果然，用的是filter的drop-shadow。canvas { filter: drop-shado
2021-08-27 13:53:24
865
原创 企业微信坑总结
企业微信网页授权登录坑总结前端构造网页授权链接曾经也看到过请求后端的，不过前端直接去请求这个链接也是可以的。后端保存corpid和secret后端获取access_token要用到。
2021-06-01 17:26:27
1145
原创 记录申请苹果开发者的流程和坑（持续更新中）
1 申请Apple ID其实就是申请一个苹果账号，这个账号必须没有申请过开发者。这个Apple ID必须开启 双重认证 。2 申请邓白氏码网站：https://developer.apple.com流程：https://www.jianshu.com/p/31b7aa616f78流程参照以上网址就可以了。这里补充一下：当时我在 查找您的D-U-N-S 编号 页面里填写信息的时候，它说只支持罗马字符，上面的流程说是填英文，但我填了还是不能提交（报未知错误），后来我试着把空格都去掉，就可以提交
2020-10-27 16:01:07
452
原创 ios微信小程序canvas动态给宽高的bug
最近在用小程序新版canvas写分享海报的时候，发现ios有bug。刚开始把canvas的宽高直接写死，测试是没问题的。<canvas type="2d" id="shareImg" style="width: 530rpx; height: 943rpx;"></canvas>后来新增了个页面，也要用到分享海报，并且图片尺寸的比例不一样了，我就尝试将之前的分享海报封装成组件。内部就不展示了，宽度改成动态传入，高度也跟随改动。<canvas
2020-07-03 13:50:12
2182
1
原创 微信小程序 构建npm 提示operation not permitted
这个问题是在引入vant weapp之后，构建npm出现的。我本来是用自己的电脑开发的，之前构建npm是没问题的。最近公司终于给了我一台电脑，构建npm之后旧报错了，operation not permitted, rename 什么的，应该是重命名某个文件没有权限吧，刚开始我发现没什么问题，其实是我检查的页面都没引入vant的组件。后来做新页面的时候我引入了vant的组件，直接找不到该组件，我又点构建npm，这就出现了operation not permitted, rename这种报错。没有权限该
2020-06-18 14:47:46
1050
原创 swiper在ios中启用freeMode的bug
代码如下，常用于横向排列的菜单，当菜单项很多的时候，就需要横向滑动了。new Swiper('.swiper-container', { freeMode: true, slidesPerView: 'auto',});在安卓没有问题，回弹也很完美。但是在ios却出现了问题，回弹时会无故回弹多一次。百度找了一下，没有找到类似的问题。最后只能把回弹关闭了。代码如下：new Swip...
2020-04-28 16:20:38
726
原创 nuxt可以使用a标签代替nuxt-link
既然要服务端渲染，项目就不能是spa了，因为我的理解就是每个页面都要从服务端拿，所以一定是多页应用程序。不过，我在搞一个nuxt的demo的时候，发现了很神奇的事情。跳转页面我用了nuxt路由里介绍的nuxt-link，官方说和router-link功能一致，我也百度了一下，那这个nuxt-link就是局部刷新用的。既然是局部刷新，那么html源文件是不会变的，但是我点了这个链接，页面应该是局...
2020-03-31 19:54:42
2641
5
原创 swiper禁用滑动效果
swiper一般作为轮播图插件使用，滑动效果是最基础的，但如果不想要滑动效果呢？我就要突变，不要动效，哈哈哈，看了下文档，好像没有禁用动效的选项。但，还是被我发现了变通的方法，把speed选项改为0，也就是过渡时间改成0，就是突变了，哈哈哈哈。new Swiper('.swiper-container.course-container', { speed: 0, allowTouchMov...
2020-03-18 20:03:09
2502
原创 border-color的默认值
其实这个以前有看到过，不过我给忘了，今天在写边框样式的时候漏了border-color，结果我发现边框颜色的默认值居然和文字的颜色一致，也就是和color的值一致。哈哈，挺有趣的，以后如果有文字颜色和边框颜色一致的需求的时候，直接省略边框颜色即可。...
2020-03-12 11:54:56
973
原创 利用flex实现多列等高布局所踩的坑
其实没有标题说的多列啦，就是不同的两列，写的是普通的列表项，左边图片，右边一些文字而已。右边的文字稍稍复杂，分为上中下三行。想要实现的效果：我无意中使用了align-items: center，然后发现右边的文字挤在一起了，用flex-direction: column配合justify-content: space-between无法将他们分开，可以确定的是空间足够，肯定是产生了一些问题...
2020-03-07 00:25:52
1773
原创 禁止网页中的图片或文本被选中
背景由于我最近在开发一个互动小游戏，碰到一个情况必须要用img标签来实现，平时我都是用div再给它背景的方式实现的。（为什么小游戏还要用dom？用游戏引擎不行吗？我太菜了，不会游戏引擎，只能用原生js和jQuery实现了，反正我接触到的游戏都不是很复杂，用css实现一些动效还挺简单的）。遇到的问题其实我一开始就是用img来添加物品到场景中的，后来测试发现图片会被选中，并且某些浏览器甚至会打开...
2020-02-11 13:12:08
1992
原创 谷歌浏览器无法显示上传视频的预览图
要实现的功能一个和上传图片极其相似的功能，只不过换成了上传视频，选择完文件后也要有预览图。问题本来以为没什么问题的，因为网上有许多关于视频预览图的文章，核心就是使用canvas的drawImage功能来绘制视频，这样默认就是绘制第一帧。但我总是绘制失败，经过不断的测试，我发现视频根本就绘制不到canvas上，官方文档说可以绘制。后来我换了浏览器，发现360浏览器和QQ浏览器都可以，我又试了...
2020-01-02 16:50:13
1180
1
原创 同一个页面中 100vw与100% 的值不一致
今天在写一个企业官网的时候，由于页面的一个地方要保证宽度占满整个屏幕，且随着屏幕分辨率的改变比例也不改变，所以我想到了用vw单位来写。而页面的其他部分还是传统的宽度100%来写，本来100vw和body的100%应该没什么不同，但是页面却出现了横向滚动条，滚动后发现用了100vw的那个div与其他普通的100%宽度的div格格不入，100vw的比普通的多出了刚好是一个滚动条的宽度，于是我上网搜索...
2019-12-19 18:33:39
5627
2
原创 深渊巨坑！！！ios h5 页面弹出键盘把页面顶上去下不来
今天折腾了几个小时，就是解决了这个bug。刚开始，我们调一个获取不到数据的bug，我安卓没有任何问题，他的苹果怎样都拿不到数据，找着找着，我们发现连从页面取值都取不了。这里就折腾了好久，期间同事不断提示我ios的键盘弹起来，页面底部会出现很大一片空白，是页面变形后不会自动恢复的问题，我当时觉得这个只是小问题，把大问题解决了再说吧。后来我们进一步排查错误，最后发现，ios居然连点击事件都不触发，...
2019-12-10 21:09:53
1693
原创 微信小程序不能判断数据类型
今天想判断一个表单中获取的值是否为数字的时候，使用了typeof === 'number'，但却没有生效。百度了一下发现微信小程序不支持这个功能，只能自己利用正则实现，参照了网上的代码：function isNumber(val) { var regPos = /^\d+(\.\d+)?$/; //非负浮点数 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9]...
2019-09-22 17:10:23
1931
原创 巨坑！关于Vue组件命名的问题
没想到组件的命名也有这么大的坑，今天在看Vue的官方文档的时候，我还是没有完全抄官方的源码，自己模仿着写，而且在使用组件的时候，还特意使用了驼峰命名的标签，以及单标签，自己还洋洋得意。没想到，巨坑出现了。<!-- 原来错误的代码 --><AnimatedInteger />就像上面这样，然后由于例子的需要，我连续定义了三个这样的组件，但最终只渲染了一个，我找了许久的...
2019-08-27 14:57:11
644
原创 Vue的函数式组件的巨坑
今天在看官网的文档，看到可复用的过渡的时候，官网上说可以用函数式组件代替，如下：Vue.component('my-special-transition', { functional: true, render: function (createElement, context) { var data = { props: { name: 'very-...
2019-08-26 17:15:16
1377
原创 html5中一些用得比较少的标签（文本类标签） 持续更新。。。
smallsmall 为行内元素small 表示细则一类的旁注（side comment），“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。”注意用 small 标记页面的版权信息是一种常见的做法。不过，small 只适用于短语，因此不要用它标记长的法律声明，如“使用条款”和“隐私政策”页面。根据需要，应该用段落或其他语义标签标记这...
2019-08-22 17:33:39
250
原创 html5语义化标签笔记
header标签一个页面中可以使用多个header，如果可以用h1~h6完成的就不要使用header。nav标签一个页面可以使用多个nav，仅对全站性质的导航添加nav标签，不要滥用它们。main标签一个页面只能使用一个main，代表页面的主要内容。article标签根据其称，你大概会猜想 article 用于包含像报纸文章一样的内容。不过， article 并不局限于此。在 HT...
2019-08-22 11:46:53
122
原创 html5的header标签
html5的header标签可以给header添加role属性，值为banner，代表是页面级的页眉。<header role="banner">...</header>
2019-08-22 11:00:35
1089
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人