- 博客(24)
- 收藏
- 关注
RSS订阅原创 jest单元测试， import css模块时报错： SyntaxError: Unexpected token ‘{‘
在我的.ts文件中我引入了weui的样式库。import 'weui';在用jest进行单元测试，进行npm run test的时候，一直报错。尝试了提示的几种方案都不行。具体配置可以看官方文档：https://jestjs.io/zh-Hans/docs/webpack#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6，猜测是jest并不知道import "weui"导入的是css文件。解决方法：1、将weui样...
2021-05-12 21:06:07
2744
原创 js怎么判断当前手机是不是iphone x系列的底部有touch bar的机型？
export function isIphonex() { // 判断是不是X类型手机 // X XS, XS Max, XR，11， 11pro，11pro max，12mini，12， 12 pro，12 pro max const xSeriesConfig = [ { devicePixelRatio: 3, width: 375, height: 812, }, { deviceP.
2021-03-10 19:27:53
955
原创 ios客户端按钮添加按钮点击态无效解决方案
有的时候，设计会要求给H5页面，点击的按钮增加点击态，一看，这其实是个很简单的需求，给点击的按钮加上-webkit-tap-highlight-color的css属性即可：-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);cursor: pointer; 加完之后电脑上妥妥的，没有问题，但是在不同的手机上会有差异，比...
2020-03-31 18:00:11
546
原创 H5页面的“显示”和“隐藏”的监听
之前微信新版本推出了新的页面浮窗功能，突然想到了一个问题，H5页面可以监听到浮窗的行为吗？H5有类似于小程序的onShow方法来监听页面的显示和隐藏吗？ 搜索了一下，H5 有标准的监听事件： pagehidepageshow或visibiltychange 测试了一下，visibiltychange 确实监听到了页面的显示和隐藏。...
2019-10-17 16:47:28
3591
原创 小程序cover-view组件fixed时定位异常
我们的页面上有个echarts的图表，然后需要在页面底部放置一个底部导航，由于canvas原生组件层级最高且页面布局要求很高（详见微信小程序canvas元素悬浮，不随父组件滚动的问题），所以只能使用可自定义层级的cover-view组件来作为fixed在底部的元素组件。 但是后面发现cover-view虽然设置了bottom：0，但是在ios上偶现的会浮在页面上的其他...
2019-09-12 10:49:20
3374
1
原创 微信小程序框架wepy引入echarts插件（已解决）
看到很多种方法，但是都没有很好的兼容，有的只支持绘制一个canvas图表，下面这种方法亲测有效，wepy中可以成功用小程序版本echarts绘制图表，并且在用一个页面绘制多个canvas图表。首先，在微信小程序版本echarts作者官方github下载插件（https://github.com/ecomfe/echarts-for-weixin），保存在本地然后创建一个.wpy文件，下...
2019-03-09 18:03:25
2765
6
原创 微信小程序canvas元素悬浮，不随父组件滚动的问题
1、首先现根据官网的tips，看看自己是不是把canvas写在这个组件里了2、看看自己是不是在config里设置了config = {"disableScroll":true}，如果设置了就去掉。3、看看是不是给最外层标签page定义了height：100%的属性或者overflow相关的属性，如果是的话去掉。4、如果上面的方法都用过了还没有解决，那么检查你的canvas的所有父...
2019-03-06 21:57:29
15255
13
转载 CSS BEM 书写规范
BEM命名约定使用 BEM 命名规范，理论上讲，每行 css 代码都只有一个选择器。BEM代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。在选择器中，由以下三种符号来表示扩展的关系：- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线：双下划线用来连接块和块的子元素_ ...
2019-02-25 14:42:20
222
原创 带心跳的webSocket的使用和封装
一、webSocket简介 webSocket是一种网络通信协议，由于HTTP只能实现客服端向服务器的单向通信，即只能客户端主动给服务器发请求，服务器却没有办法主动“联系”客户端，所以全双工通信的webSocket应运而生，以便任何一方都能把数据推给另一方，大大提高了工作效率。 1、创建方法url为请求的webSocket接口地址，第二个参数 protocol 是可选的，指定...
2019-01-23 17:11:13
2659
原创 canvas进阶(2):canvas与事件处理
一、鼠标事件：将鼠标坐标转换为Canvas坐标 有时候，我们需要给canvas增加事件监听，然而 浏览器通过事件对象传递给监听器的鼠标坐标，是窗口坐标，而不是相对于canvas自身的坐标。大部分情况下，开发者需要知道的是发生鼠标事件的点相对于canvas的位置，而不是在整个窗口中的位置。这个时候就需要我们去做一些转换。<!DOCTYPE html><htm...
2019-01-10 17:04:44
822
原创 canvas进阶（1）：Canvas元素大小与绘图表面大小的区别
接下来，需要介绍一下什么是canvas元素的大小和绘图表面的大小。 我们一般通过canvas元素的width和height属性来改变元素的大小，我们也可以通过CSS来设置canvas元素的大小。但是，两种设置方式效果是不一样的。 使用CSS来设置canvas元素的大小与直接设置属相相比，其差别是基于这样一个事实：canvas元素实际上有两套尺寸。...
2019-01-10 14:36:47
2930
原创 canvas基础：canvas的属性、方法以及基本运用
一、canvas元素的属性属性 描述 默认值 width canvas元素绘图表面的宽度。在默认情况下，浏览器会将canvas元素的大小设定成与绘图表面大小一致。然而，如果在css中覆写了元素的大小，那么浏览器则会将绘图表面进行缩放，使之符合元素尺寸 300 height canvas元素绘图表面的高度。浏览器可能会将绘图表面缩放至与元素相同的尺寸。具体请...
2019-01-09 17:23:22
5011
原创 js事件兼容处理（不同浏览器的事件兼容处理）
var EventUtil={ addHandler:function(element,type,handler){//绑定监听事件 if(element.addEventListener){ //DOM2级 console.log('addEventListener') element.addEventListener(t...
2018-12-03 11:14:42
893
原创 IE浏览器，点击子元素不触发子元素的click事件，而是触发父元素的click事件（button子元素的click事件无法触发）
<button class="radioContent" v-if="scope.row.audioclipUrl" @click="showAudio(scope.$index,scope.row)"><span>查看</span> <div class="radio" :data-index="scope.
2018-12-03 10:52:16
1643
1
原创 js实现继承的方式
一、原型链function Parent1(name){ this.name=name; this.role='father'; this.play=[1,2,3];}function Child1(name){ this.name=name; this.role='child';}Child1.prototype=new Parent1()...
2018-10-10 11:31:11
228
转载 arguments学习小记
在函数内部，有两个特殊的对象：arguments和this。arguments他是一个类数组对象，包含着传入函数中的所有参数。虽然arguments的主要用途是保存函数参数，但是这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。function f(num){ if(num<=1){ return ...
2018-10-08 11:23:33
113
原创 node.js学习小记
一、作者选择JavaScript的原因：1.作者Ryan Dahl的最初目标是写一个基于事件驱动、非阻塞I/O的Web服务器；2.JavaScripot比C的开发门槛低，比Lua的历史包袱少，且在为后端没有市场，可以说历史包袱为0，为其导入非阻塞I/O可以说阻塞为0；3.JavaScript在浏览器中有广泛的事件驱动方面的应用，当时，第二次浏览器大战也逐渐分出高下，Chrome浏览器的...
2018-09-29 14:41:20
186
原创 原型和原型链知识点整理
根部一些网上和平时学习的内容整理的，希望可以帮到大家，共同学习。一、原型的规则1、所有的引用类型（数组，对象，函数），都具有对象属性，即可自由扩展属性（null除外)；2、所有的引用类型（数组、对象、函数），都有一个__proto__属性（__proto__是隐式原型），属性值是一个普遍的对象；3、所有的函数，都有一个prototype属性（prototype是隐式原型），属性值也...
2018-09-28 17:36:32
478
原创 node静态资源服务器的搭建----访问本地文件夹（搭建可访问静态文件的服务器）
我们的目标是实现一个可访问静态文件的服务器，即可以在浏览器访问文件夹和文件，通过点击来查看文件。1.先创建一个文件夹anydoor，然后在该文件夹里npm init一个package.json文件，按如下图所示创建文件夹和文件（node_models，package-lock.json是安装生成，不用自己创建）。为了方便管理，我们把一些设置性和公共的参数放在defaultConfig.js里，...
2018-08-30 17:33:41
12041
1
转载 react native http的图片在ios上不显示
https://segmentfault.com/a/1190000002933776详细请看这篇文章怎么解决。
2018-08-07 09:21:02
1433
原创 使用react-navigation时 报错 undefined is not an object(evaluaing 'context._currentValue =currentValue')
我安装的reactive-native的版本是0.55.0，react-navigation用的是^2.9.3,不知道你遇到的问题是否跟我一样，但是可以试试我的解决方法。方法一：将package.json里的"react"的版本降到16.3.0（及以下），然后npm install一下，我的问题就解决了；方法二：如果这样还不能解决你的问题，可以把"react-navigation"的版本降...
2018-07-31 17:08:06
1091
原创 Node.js怎么调试？（Node.js怎么用浏览器调试）
方法一：chrome浏览器调试1.打开chrome浏览器，在标题栏输入chrome://inspect,会看到如下界面2.进入到你要调试的代码所在的文件夹，使用cmd.exe或者git，进入文件所在目录，运行调试文件：node --inspect-brk fileName.js现在再看浏览器就会看到如下界面3.点击inspect进入调试页面，此时会停在代码的第一行，...
2018-07-18 15:10:33
959
原创 一年左右工作经验及小白前端面试问题总结（1）有关css（或样式）的常见面试问题(2)js相关
一、有关css（或样式）常见问题1.relative和absolute的区别？relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝...
2018-07-18 14:20:35
2033
原创 怎么让图片在一个正方形div中不变形展示？且超出部分截取（隐藏），且截取图片的中间位置
.divContent{ width:200px; height: 200px; border:1px solid red; overflow:hidden;}.divContent img{ margin:0; padding:0; width:100%; height: 100%; object-fit: cover;//重要}.yuanImg{ width:20...
2018-07-13 14:34:05
3679
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人