为什么要二次开发

最重要的一个问题还是效率问题，团队需要整体的UI风格，相同的配色，相同的功能组件，如果每个人独自开发那就大大浪费人力。虽然vant已经封装的不错了，但距离业务需求还差一点距离。第二点是设计师视觉走查的时候特别耗时，扣像素级别的问题，因此避免前端开发同学多次被折磨，做成统一的完事儿，同时也提升了走查的效率。归根结底，效率是第一生产力！

阅读剩余部分 ->

预加载和自动播放问题

本以为预加载是一件理所应当的事情，有的音频文件这么大，不可能要等到用户点击播放按钮的时候才去加载，这肯定会存在延时问题。

Note: The preload attribute is supported in Safari 5.0 and later. Safari on iOS never preloads.

苹果官方技术文档解释：只有等到用户真正的点击页面才会去加载资源文件。用户触摸之前永远不会加载音乐文件或元数据。这是为了确保网页不会要求在移动设备上下载大量音乐或数据，这可能会占用大量移动数据。因此，无论您的代码有什么，预加载标签在移动 Safari 中基本上总是设置为“无”。

所以这里唯一的解法就是在交互上做一点处理，毕竟用户的网速不可控，在音频可播放之前显示loading状态，一直等到可播放为止。 那有什么事件说明可以播放了呢？一顿搜索，canplaythrough事件可以满足！

当终端可以播放媒体文件时触发该canplaythrough事件，估计加载足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容。 caniuse 一查，主流大部分系统版本都支持。

当用户点击按钮后，发现还不能播放，那就loading等，一直等。如果播放播到一会儿网络卡了那么就在waiting事件监听。

神奇的currentTime

iphone手机下，如果在不恰当的时机设置currentTime（播放会跳跃到指定的位置），会导致后续设置currentTime无效。一定要在onCanPlay回调事件后设置currentTime才不会导致问题。

audio总时长

插播一个Android手机的问题，乐视手机出的一个bug

获取不到音频的总时长，以下方法没有一个能获取到

@canplay="onCanPlay"
@timeupdate="onTimeUpdate"
@loadedmetadata="onLoadedMetaData"
@ended="onEnded"
@loadstart="loadstart"
@durationchange="durationchange"
@canplaythrough="canplaythrough"
@loadeddata="loadeddata"

在用户没有主动点击播放按钮前，无论怎么样都拿不到，即使是setInterval 也不行。所以只能是在play后再显示总时长。audio的duration属性就是总时长，但产品功能上略有瑕疵，默认状态下显示不了总时长。

最近两年时间都花在可视化编程上，谈谈对它的一些思考。

最近几年少儿编程正在风口，很可惜我们团队的目标并不是这个，不然也能融上一笔钱，我们自己的产品在同类来看并不会太差。国外比较知名的产品就数scratch这个产品，前些时间由于内容风控问题，被国内墙了。那么只有一家独大的编程猫，其他的机构并无太知名，做的事情也只是偏培训，而非产品本身。

这是我们最近两年都在做的事情，小游戏可视化制作工具。我们的目标是让不会写代码的人能够做出游戏，这个目标会比编程猫的难做的多。毕竟成品的游戏和教少儿“编程”是两件很不一样的事情。后者更注重教，需要的是课堂，课件，老师，对产品本身的要求并不会那么高。老师和学生只需要在这个平台上能够产生内容，而对内容本身的品质是不需要高要求的。但让人做出游戏这个事就远飞那么简单，希望用户能创作出作品，真实可玩的线上游戏。而游戏制作本身就是一件非常专业的事情。

阅读剩余部分 ->

下图是Laya官方的一张介绍图片，游戏引擎涵盖的东西比较多，掌握游戏开发必须要掌握这些东西，这次讲讲一些游戏中的基本概念。

一、游戏引擎

市面上的H5游戏引擎好多，国内外比较知名的有Egret、Cocos、Laya、Phaser、Three.js等等，各引擎实现上有区别，但游戏里面的一些基本概念都差不多。触类旁通，切换引擎的成本就只在于对引擎API的熟悉。

阅读剩余部分 ->

protobuf对于后台开发来说应该是在熟悉不过了，google定义的协议。这次我们要拿它在前端干点事，它定义了后台的数据结构，那么如果前后台的数据是一一对应的，protobuf就能为前端所用。尤其是在前后台同时开发的时候。通过gulp-protobufjs来解析protobuf文件，生成对应的JSON文件。

在使用的过程中，刚开始一切都很顺利，直到遇到了这个错误：

Error (gulp-protobufjs): cannot determine import root

这个错误让人一脸懵逼啊，字面意思是import依赖出错。后来检索到关键字出打log，发现依赖google/protobuf/descriptor.proto的时候这个错误就出现了，其他情况相当的正常。

gulp-protobufjs这个gulp插件最终是依赖了protobuf.js这个来处理，核心逻辑全在这里面。在他的issues里面找到一个差不多的错误，依赖没有解决的思路。根据google/protobuf关键字搜索到这个项目的readme。事情终于出现了转机：

Though it’s possible to include them:

1. You may explicitly reference them by providing a relative or absolute path in your .proto files. E.g. use ./google/protobuf/descriptor.proto and bundle the file with your application.

2. If you use the proto2js command line utility with the -legacy option and the descriptor namespace is explicitly referenced, it is included in the generated output.

readme 里面说的意思是说，默认是没有把google/protobuf/descriptor.proto解析进来，但提供了两种方式把他加进去。一直是写相对或者绝对路径，而是通过legacy配置。

通过阅读源码：node_modules/protobufjs/cli/pbjs.js，发现处理legacy命令的地方，他的描述也确实如此。那么他实际对应的就是options。

legacy: {
                alias: "l",
                describe: "Includes legacy descriptors from google/protobuf/ if\nexplicitly referenced.",
                default: false
            },

剩下的问题就是在配置项加上这个。有点坑爹的是，gulp-protobufjs插件把这个配置项堵死了，对外的接口压根没有设置这个参数的。无奈之下，只能去修改他的源文件了node_modules/gulp-protobufjs/options.js

options = {
    encoding: encoding,
    input: input,
    target: target,
    path: options.path,
    ext: extension,
    noErrorReporting: noErrorReporting,
    showStack: showStack,
    legacy: true // 这里增加一个参数
};

对应源文件的42行，加上此就能愉快的转换了。后面再介绍整体的pb2json整体的流程。发现这个还是挺有用，除了mock后台返回的数据，在做前端页面适配，xss测试等等都能够有很大的用处，前端可以变得更加自动化，节省人力，提高效率。

最近在翻阅《编程珠玑》第二版，真的是字字珠玑。在看到第二章的“啊哈，算法”的一道题目，将字符串反转。将一个具有n个元素的一维向量x向左旋转i个位置。例如，将 abcdefg 向左旋转 3 个位置之后得到 defgabc。要求是花费与n成比例的时间以及尽可能少的空间来完成这个操作。看到此题后的第一想法就是临时数组，下面来看下具体代码：

阅读剩余部分 ->

内存快照工具

profiles的翻译是轮廓的意思，在chrome中可以理解为程序内部剖面的意思。就是可以看到内部到底是怎么运转的。
最新版本的开发工具已经改名为Memory，右侧我们可以看到profiles，这里的意思是内存的一个剖面分析。

阅读剩余部分 ->

先看遇到的问题，在PC的微信开发工具上，调试开发我们的小程序。然后用手机扫描在手机上预览，这时候发现后台数据并不能成功返回。

也就是说在PC切换手机的时候，登录态是失效的。

阅读剩余部分 ->

一直发现小程序好慢，尤其是第一次打开的时候。因为第一次会涉及到登录的授权，官方文档是这么说的：

通过 wx.login() 获取到用户登录态之后，需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识，而应该自己派发一个 session 登录态（请参考登录时序图）。

阅读剩余部分 ->

研究SVG源于给女朋友做一个小礼物，这个创意也是从我同事那里抄袭过来的。当时看到就非常震撼，是个很不错的idea。

阅读剩余部分 ->