leeenx

` PIXI.utils.TextCache` instead of `PIXI.loader.resource`?

7

I thought every texture that Pixi create, will be stored in PIXI.utils.TextCache. But as use `PIXI.loader`, Pixi’s development team recommends use `PIXI.loader.resources`. I am confused aboute it. So, I make...

今天发现有个组件的 componentDidMount 周期未被触发。具体的情况如下： 组件A 调用 组件B，组件B中调用组件C。组件C的 componentDidMount 未触发。不知道是不是组件的层级太深造成的 使用的版本是：nervjs 1.3.9

1. 内联样式对象不支持「-wekit-/-moz-/-ms-」等特性 2. 内联样式对象不支持「!important」加权关键字 在实际使用过程中发现存在以上两个问题。虽然在代码中不建议使用「!important」，但不代表它可以不要，希望后续版本支持一下。 当前版本号：1.3.9

手Q分享接口 - 填坑篇

14

## 引子 *为什么需要了解手Q的分享接口的坑呢？* *理由如下：* 1. 制作手Q的活动页面相对比较少，如果遇到分享再来研究会影响到开发进度 2. 当前（2015.05.24）手Q页面的公共分享方法已经不可以分享出去了，目前需要自己手动写分享方法 3. 了解了分享接口的bug，可能对以后其它bug的借鉴作用 **如果读者还不知道手Q分享是如果实现的，请先阅读[手Q分享接口总结 - 基础篇](https://github.com/o2team/H5Skills/issues/55 "手Q分享接口总结") ** **手Q取分享信息的优先级** >mqq.ui.shareMessage < mqq.data.setShateInfo < meta信息 < title标签和body内容 这里不得不吐槽一下，MobileQQ API 提供给开发者的分享接口或与之相关的接口在ios下百分之九十九都存在bug。 ## 1. mqq.data.setShareInfo有同域污染的bug ###...

png 转 webp 的正确姿势

2

## png图片压缩 常用的压缩工具：[tinypng](https://tinypng.com/) 或 [腾讯智图](http://zhitu.isux.us/) 等。 图片经过多次压缩后会达到极限，并且压缩后的图片可能受损以至无法使用！如下： png的极限压缩并不能带来高质量的图片，适应压缩才是王道。 想得到高质量低体积的图片，可以考虑使用 webp。 ## webp > WebP（发音 weppy，项目主页），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。 来源:...

手Q分享接口 - 基础篇

4

最近有个在手Q上的活动，需要使用到手Q的分享功能。手Q分享我用过的有两类四种方法可以实现 ## 1. 不使用手Q接口 不使用手Q接口有两种方法可以实现： - 在meta标签中添加分享信息 - 在body内容的最开始处添加分享描述和分享图片 使用meta标签，可以使用下面三个标签来传递“分享title”，“分享描述”，“分享图片” ```html ``` *此时的分享地址，将会取当前页面的url* 当然也可以直接在body的最开始处，写一个隐藏的div，把“分享描述”和“分享图片”写上去。如下： ```html 京东六一送大礼！积木、泰迪熊、遥控汽车、早教机，5000元旅游基金免费领哟！动动手指就有机会获得~ ``` *此的分享地址，也将是当前页面的url，页面分享抬头将会是页面的抬头`...`* 很明显，不使用手Q接口的进行分享操作，限制太大了，只能实现最基础的分享。想实现更多的分享操作，就需要调用手Q的api。 *ps：除了上面的两类四种方式，还有web页分享接口* ## 2.使用MobileQQ JS API接口实现分享 - 使用mqq.data.setShareInfo - 使用setTitleButtons,setOnShareHandler和shareMessage等多接口联合定制实现 ### mqq.data.setShare...

实现 inline-block 与文本的垂直居中

5

## 背景 我以前是认为「vertical-align: middle」是垂直居中的意思，并还吐槽为什么浏览器都没有做到这一点。最近才发现，原来不是这样的。 来看一下 vertical-align: middle 的官网解释： >middle >Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent....

如何抗rotate剧齿

2

有时候，我们需要transform的rotate方法来使元素倾斜，但是角度倾斜会给元素带来意料之外的效果--锯齿。 ## 如何在IOS下对抗rotate造成的锯齿 **在IOS中，搞锯齿的方法很简单，只要开启元素的3d属性既开启了GPU加速后，能有效的实现抗锯齿。如果在开启了GPU后，ios页面仍出现锯齿现象，使用安卓的最终解决方案可以起最后的搞锯齿作用**。 而安卓就比较复杂了，下面就如何在安卓下有效抗做一次梳理。 *以下都是针对简单的方块模块（即一块div）进行研究* *这里研究的安卓系统都是4.0以上的，2.3不做研究（因为份额几乎快没了）* ## 如何在安卓下对抗rotate造成的锯齿 为了方便描述，把被rotate的元素简单地划分成两类： 1. 图片（即标签的元素） 2. 带背景的div 本人已经通过验证了，以纯色作背景的div和以图片作背影的div在锯齿的表现上是一样的，所以把二者统一成一类。 ### 图片rotate后抗锯齿方法 **保证img在一个容器(如div)内，并使rotate作用于容器上，此时只要开启容器的GPU，和为容器添加一个透明border即可** 如下： rotate-blur2.html: ```html rotate锯齿 - 图片 html,body{width: 100%; height: 100%; margin: 0;...

行内块元素如何无缝平铺

1

## 非safari环境 利用行内块元素(inline-block)可以比较优雅地替代浮动做块平铺显示，也可以避免浮动带来的一些负面影响。如下： ```css .container{ width: 600px; height: 60px; margin: 0 auto; font-family: -apple-system; } span{ display: inline-block; width: 60px; height: 60px; background: #333; color: #fff; } ``` ```html 1...

对象解构赋值无显式声明报错分析

1

ES6 是要求变量需要声明后才能使用。不过，解构赋值是个例外： ```javascript {a, b} = {a: 1, b: 2} ``` 相当于 ```javascript let {a, b} = {a: 1, b: 2} ``` 并不会报错。 这个似乎是一个漏洞，因为如果等号右边不是一个字面量，而是一个对象名，那么如果不加声明关键字就会报错如下： ```javascript let c = {a: 1,...