登录 注册

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

本贴最后更新于 2855 天前，其中的信息可能已经物是人非

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

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

===

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

  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖 • 1 关注
杭州 位置
1 关注
8 回帖
3
2
2.6k 14 143 634 609 210 1 198 749

相关帖子

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

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • SUNLin •

    吃饭
    睡觉
    打豆豆

  • qa52666 •

    这帖子有意思。

  • wizardforcel •

    能不能用 DOMContentLoaded 事件播放视频呢。。

  • someone •

    不行…微信的浏览器截断了这类事件内的视频播放功能。只能通过用户触发的事件像“click,touchend”这类来播放…(iOS)

    1 回复
  • wizardforcel •

    那如果 load 事件调用 button.click，然后 click 事件再调用 video.play 呢？

    2 回复
  • zjhch123 •
    作者

    我做了简单的测试，发现是不行的，这是我的测试代码，我们可以一起再讨论一下

    <!doctype html>
<html>
<head></head>
<body>
<video src="video.mp4" controls="controls">
</video>
<button id="play">play</button>
</body>
<script>
document.querySelector("#play").addEventListener("click", function() {
	document.querySelector("video").play();
})
window.onload = function() {
	document.querySelector("#play").click()
}
</script>
</html>
  • zjhch123 •
    作者

    还有一段

    <!doctype html>
<html>
<head></head>
<body>
<video src="video.mp4" controls="controls">
</video>
<button id="play">play</button>
</body>
<script>
document.querySelector("#play").addEventListener("click", function() {
	document.querySelector("video").play();
})
document.addEventListener('DOMContentLoaded',function(){
	document.querySelector("#play").click()
},false);
</script>
</html>
    1 回复
  • wizardforcel •

    而且我发现手机端的 Chrome 也不行。

请输入回帖内容 ...
zjhch123
未来的事无人知晓，所以才有无穷可能。 杭州
回帖
188
 帖子
72
 积分
3369