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

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

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

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

===

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

  • 生活

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

    228 引用 • 1450 回帖
  • 前端

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

    247 引用 • 1347 回帖
  • Java

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

    3165 引用 • 8206 回帖

相关帖子

欢迎来到这里!

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

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

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

  • 其他回帖
  • someone

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

    1 回复
  • 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>
    
  • SUNLin

    吃饭
    睡觉
    打豆豆

  • 查看全部回帖