程序员必备经验之从项目中来与到项目中去

程序员必备经验之从项目中来与到项目中去

0. 前言

很多朋友问我最近在忙什么?我很奇怪为什么他们能一眼就看出我在“忙”。后来仔细想想,认为这和我的生活习惯很有关系。
平时自由散漫惯了,等到一有事情的时候就手忙脚乱,天天板着脸,看上去像天塌了一样。
哦不,至少对前几天的我来说,是“天就要塌了”。
多变的需求,紧凑的时间,打的我措手不及。
恨不得一天掰成两天用,一台电脑劈成两台电脑用,一个人分身成两个人用。

1. 从这个项目开始

几天前开始和小伙伴合伙做一个关于“新年计划”的项目。这是一个涉及到微信开发的项目,目标公众号是已认证的订阅号。

2. 多样化的需求是促使程序员进步的养料

程序员的确需要各种各样变换的需求来刺激自己的思维。各种各样看似“不可能”、“被XX限制而无法实现”的需求,可能通过另一种方式或者其他形式的“黑科技”就可以实现。

2.1 例一

客户需要实现的一个功能:在网页上获取到用户信息。这难倒了之前没有做过复杂微信开发的我。在开发者文档里写着,订阅号没有“网页上授权获取用户信息”的权限,这可怎么办?
左思右想,发现微信公众号里的关注用户具有唯一标识符"OpenId",而后端又可以通过"OpenId"向微信服务器获取到一些简单的用户信息,这样就可以绕过“授权”,直接获取到用户信息。
那么,现在问题被简化成了如何获取到用户的OpenId。用户的OpenId主要是在用户与公众号发生互动之后由腾讯服务器推送给后端的。那么需求可以再一次化简成“如何让用户与公众号发生互动”。
什么是互动?腾讯这样定义互动“关注/取消关注/点击自定义菜单/向公众号发送消息”
关于“如何让用户与公众号发生互动”,就不仅仅得从一个程序员的角度去思考问题了。这里面需要考虑用户体验,用户习惯等各种问题。最终我们团队选择了“点击自定义菜单”和“关注”这两个互动。
此时,需求的简化路线为:
“网页上获取到用户信息” -> "如何获取OpenId" -> "让用户与公众号发生互动" -> "让用户点击自定义菜单/关注" -> "后端接收到微信的推送,根据OpenId获取用户信息"
而“根据OpenId获取用户信息"是明明白白的写在文档里的,非常容易实现。
这样,一个看似无法实现的需求,就通过一步一步的分析得到了当前条件下最恰当的实现方式。

2.2 例二

设计师的设计稿里有一个视频,是需要在首页,在原生Web(不是弹出播放器)上自动播放。
然而微信有一个限制,不允许视频自动播放,视频的播放事件必须写在用户事件内。比方说,在JS代码中

document.querySelector("video").play();

这样是失效的,视频不会播放。但是

document.querySelector("button").addEventListenr("click", function() {
    document.querySelector("video").play()
});

这样是可以的,视频会播放。
那么,怎么将这个思路运用到项目里呢?
我们团队参考了各种H5页面,发现许多H5页面都具有一个”点击开始”的按钮,点击之后会进行网页的各种动效处理。此时,我们的灵感也随之浮现。
我们可以设计一个友好的“loading page”,假装正在处理数据,处理完成后需要用户点击一下再继续展开页面。
总的来说,就是设计一个“友好”的按钮,欺骗用户去点击。用户点击之后只会以为自己进入了一个页面,而根本不会意识到,这个按钮实际上是一个让视频播放的按钮。
// plus: 用户的流量也随着这次点击哗哗的扣着~
然而,这样做的体验并不是很好。因为微信的限制,视频不能预先加载(其实微信这点做的很好,是为用户的流量考虑的),而是只有触发播放事件之后才会开始加载并播放。而对于我们的项目来说,我们需要视频能很流畅的即时播放出来,这怎么办?
经过分析,我们发现,在微信架构内,暂停的视频是会继续加载的。这就给了我们很大的启示。我们的设计团队马上拿出了一套方案:“在loading page上点击了那个按钮之后,先播放一段3.7s的gif动画,再开始播放视频。视频在这3.7s内进行加载”。
最终,我的实现代码大概是这样的。

document.querySelector("button").addEventListenr("click", function() {
    var video = document.querySelector("video")
    video.play();
    video.pause();
    // gif.play()  伪代码,表示gif播放
    // 加载一些资源
    setTimeout(function() {
        // 处理一些动效
        video.play();
    }, 3700)
});

看上去非常zz…但是的确实现了预加载,在网络良好的情况下,视频也能较流畅的播放。
需求变化链是:
“视频自动原生Web播放” -> "展示一个page,用户点击按钮之后视频开始播放" -> "展示一个page, 用户点击之后播放gif, 此时视频开始加载,3.7s之后开始播放视频"
可以看出,设计/需求 并不是死的,很多被限制的功能完全可以通过另一种方式(设计/诱导/"欺骗")来完成。
loading page

例三例四例五…省略

3. 及时吸取项目经验是程序员升级的阶梯

项目是做完了就扔的吗?显然不是。从一个项目里我们往往可以学到很多。
比方说,你学会了Java的SSH三大框架,就能马上上手一个后台管理系统了吗?明显不能。因为此时你的项目经验不足,换句话说,坑踩的少。而 往往坑踩的越少的人,越能挖坑。此时就需要你从小项目开始着手,一步一步开始向大项目前进。
而很多人说小项目学的东西少。我不这么认为。做小项目往往是练手的时候,此时不应该把它当做是一个“练手小项目”,而应该把他当做一个“将来会有500W人来使用的巨型项目”来制作,小到接口设计,大到架构设计,里面都藏满了无尽的学问(坑),等着你去挖掘(跳)。
而在这个项目里,我确确实实的学到了许多关于微信开发的知识。之前只做过一次基于订阅号的弹幕墙系统,从未做过认证订阅号的微信网页设计,所以在接项目的时候还有点担心有点紧张。
然而在开发过程中,坑踩的多了,就会发现
噫,无非就那样儿~
demo

===

评论区伙伴有提到几种解决微信的播放限制的方案…但是无一例外全部失败。
如果大家能想到更多的解决方案,不妨一起讨论一下!