班会第 45 期

[ufologist]

• 技术

  • 2016 年 10 个最佳的 CodePen 作品

    CodePen是前端开发者们约“码”的天堂. 年终盘点向来是各大网站、社区的重头戏。当然，与往年一样 CodePen 也出了期名为《The Most Hearted of 2016》的专题。专题中盘点了 2016 年 100 个最受欢迎的 Pens，让我们在惊叹前端开发者创造力的同时，也能够学习一些新的技术，捕捉一些新的想法。

    Flexbox 游乐场

  • 移动端H5页面注意事项

    • 单个页面内容不能过多

      设计常用尺寸：750 * 1334 / 640 * 1134，包含了手机顶部信号栏的高度。

      移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ等。

      使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。

    • 标题简短

      移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。

    • 二维码图片使用 img 标签引入/二维码图片记得扫描测试

      有时候扫描二维码之后，会跳转至某个地址，不幸的话QQ或者微信会对这个地址进行温馨提醒，如下图所示：

    • 关于链接的分享-QQ

      <title>QQ中链接的标题由此处获取</title>
      <meta name="description" content="QQ中链接的描述由此处获取">
      <!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 -->
      <meta itemprop="image" content="http://*.*.com/static/images/share.png" />

      可参考 手机QQ接口文档：setShareInfo

  • 浏览器中唤起native app || 跳转到应用商城下载

    前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。

    我们最开始就面临2个问题

    • 如何唤起本地app

      ios与Android都支持一种叫做schema协议的链接, 例如: newsapp://xxxxx. 我们只需要将协议放在a标签的href属性里，或者使用location.href与iframe来实现激活这个链接。而location.href与iframe是解决这个需求的关键

      在ios中，还支持通过smart app banner来唤起app

      我们还需要知道的一点是，微信里屏蔽了schema协议。除非你是微信的合作伙伴之类的，他们专门给你配置进白名单。否则我们就没办法通过这个协议在微信中直接唤起app。因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。

    • 如何判断浏览器是否安装了对应app

      很无奈的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。

      我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，第一时间尝试唤起app，如果200ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。当本地app被唤起，则页面会隐藏掉，就会触发pagehide与visibilitychange事件

      Universal links: Apple为iOS 9发布了一个所谓的通用链接的深层链接特性, 一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。

      微信没有屏蔽这个协议。因此如果我们的app注册了这个协议，那么我们就能够从微信中直接唤起app。

      实际上实现这个功能要考虑许多上下文细节，比如已安装app和未安装app时的不同情况，微信里ios9以上需要使用universal link，没有实现的话，需要提示浏览器打开，如果下载地址是应用宝，又不应该让他在浏览器打开等等等等，包括android成千上万台机型的兼容性。所以最好一家第三方做deeplink工具的公司，直接用他们的产品，国外的有branch metrics,国内的有魔窗

  • Webpack 2最终版本发布，聚焦文档内容提升

    流行的JavaScript模块和资源打包工具webpack 2最终版本已经发布，该版本可以实现对ES2015的本地支持，并大大改善了文档内容。但是，新版本是否能显著改进构建时间和文件大小还有待观察。

    Webpack2 升级指南和特性摘要: 整理和翻译了由webpack1升级到2所需要了解的API变更和注意事项

    webpack2，升还是不升？: 感觉 webpack2 最大的改进是 ES6 modules 和 Tree Shaking，其他都是文档和配置方面的

    结论: 暂不升级，等 webpack2 社区完善以及性能提升吧。

  • 第三方免费加固横向对比

    基于java开发的android应用由于其语言的特性，所以很容易被反编译，虽然android提供了proguard，但是也只是增加了源码阅读的难度，其中业务逻辑依旧可以分析得出。有些人通过各种破解手段将apk文件破解、反编译，然后加入广告、病毒代码，重新打包投入市场，不明真相的用户将带病毒广告的apk下载下来，甚至因此造成利益损失。

    一些个人开发者，小企业等并不会有这么多的资源精力投入在应用的安全方面，因此一些第三方的加固服务也应运而生，它们通过加壳、加密、逻辑混淆、代码隐藏等各类安全加固方法，增加移动安全应用的安全防护等级，防止移动App被逆向分析，反编译，以及防止二次打包潜入各类病毒、广告等恶意代码，并且应用加固是针对移动应用的安装包直接加固，无需开发者修改源代码或进行二次开发。

    • 阿里聚安全
    • 腾讯云应用乐固
    • 360加固保
    • 梆梆加固
    • 爱加密

    总结

    • 体积（体积小的为优）：360 > 腾讯 > 爱加密 > 阿里 > 梆梆
    • 兼容性： 阿里 > 腾讯 > 360 = 梆梆 > 爱加密
    • 启动速度（时间短为优）： 阿里 > 爱加密 > 360 = 梆梆 > 腾讯
    • 漏洞： 腾讯 > 爱加密 > 360 > 梆梆 > 阿里

    app加固的好处是进一步保护了自己的核心代码，提升了盗版的难度，但同时也影响的应用的兼容性，程序的执行效率，还有部分的市场会拒绝加壳后的应用上架。所以请大家结合自身的情况来选择。

• 产品

  • Material Design 中文版

    Google I/O 2014 发布 Material Design 为用户创造了崭新的视觉设计语言。与此同时，新的设计语言除了遵循经典设计定则，还汲取了最新的科技，秉承了创新的设计理念

    • 动画
    • 样式
    • 布局
    • 组件
    • 模式