![](images/qrcode.png)4. 二维码图片记得扫描测试 有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示: QQ内的温馨提醒 这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。
举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。5. 使用 Gulp 拼合图片 如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写 CSS 的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。
举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100% 的宽度)内会将其他图片显示出来,这不是我们想要看到的。6. 关于链接的分享-QQ 如果将页面链接直接复制分享给其他人,在手机上接收链接消息的用户可能会看到链接的相关信息,如页面标题、描述和图片。相关信息设置方式如下:
name='description' content='QQ中链接的描述由此处获取'> itemprop='image' content='http://*.*.com/static/images/share.png' />可参考 手机QQ接口文档:setShareInfo。 问题:即使使用了如上的 image 设置方法,还是没能显示预期图片? 解决:确定下你发送的链接格式,会不会有所省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,才能正确解析到图片。 如果是打开链接后,在QQ内置浏览器里选择将页面分享出去,那一般不会出错。 7. 图片压缩 使用自动化工具 gulp-imagemin(教程) 来压缩图片,效果举例:101 KB => 80.7 KB。后来我使用了在线工具 Tinypng 又进行了一次压缩,效果举例:(上面使用 gulp-imagemin 压缩过的图片)80.7 KB => 38.1 KB,可见光使用自动化工具来压缩是不够的,大部分图片仍存在较大的压缩空间,可以再扔到 Tinypng 里压缩一下看看。 在线的 Tinypng 可以无限次使用,如果想要使用其 API 来进行压缩自动化的话,可以使用 gulp-tinypng 等插件,但是有每月压缩图片数量限制,每月前500张图片免费,其他收费情况参考官网说明。使用其 API 还需要获取 API Key,这里可以获取。 个人觉得想要免费的话使用 API 会有数量限制,时刻惦记着数量有点心累,不如直接使用在线工具,也不麻烦~ 8. Loading 代码段分享,拿走即用~
function loading(){ function Load(){} Load.prototype.loadImgs = function(urls,callback) { this.urls = urls; this.imgNumbers = urls.length; this.loadImgNumbers = 0; var that =this; for(var i=0;i<urls.length;i ){ var obj = new Image(); obj.src = urls[i]; obj.onload = function(){ that.loadImgNumbers ; callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100)); } } }; var loader = new Load(); loader.loadImgs([ // 将所有需要加载的图片地址写于此处 'http://domain/site/dist/img/XX.png', 'http://domain/site/dist/img/XX.png', 'http://domain/site/dist/img/XX.png', 'http://domain/site/dist/img/XX.png', 'http://domain/site/dist/img/XX.png', 'http://domain/site/dist/img/XX.png', 'http://domain/site/dist/img/XX.png' ],function(percent){ // 假设显示百分比的元素为 $('.percent') $('.percent').text(percent '%'); // 加载结束后,隐藏相应的 loading 或遮罩 if(percent==100) { $('.mask').css('display','none'); } }); } // 执行 loading 方法 loading();9. CSS 动画属性前缀 webkit 使用 CSS3 来制作动画效果的话,webkit 前缀一定记得加,要不然在某些手机下动画效果是没有的。 如下:
-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } }推荐使用自动化工具来处理未加前缀的 CSS 文件,如 gulp-autoprefixer。
联系客服