这是一个创建于 2622 天前的主题，其中的信息可能已经有所发展或是发生改变。
前几天被新浪的一位程序员刷屏了，婚礼现场还要跑去修 bug，这事得赖鹿晗。看到之后想起我的婚礼，那是一年前也是在国庆。距婚礼还有一个月的时候，心想这可是一辈子的大事，在众多亲朋好友面前搞点比较 cool 的事情，这样会不会让大家印象深刻点。
怎样会比较 cool
希望你看到这个标题不要以为是让基友拉着我私奔😱。让现场所有宾客都能参与进来，对，这应该比较 cool。根据以往参加别人婚礼的经验，流程大概是：主持人引导新郎新娘进场，新郎新娘立下海誓山盟，新郎新娘双方父母登台，然后全场一起举杯祝福新人，最后一直吃到婚礼结束。宾客除了那一次举杯，全程都是路人，参与感非常低。有的婚礼会有些互动，这完全看主持人的个人风格了。
要调动现场，站在台上撒红包这种土豪的做法显然不适合木讷的我。眼下几乎人人都有智能机，人人都有微信，于是就想能不能借助微信让大家参与进来。大家可以发祝福上墙，然后现场大屏以弹幕形式将大家祝福展示出来。大家发完祝福可以在大屏上看到自己的头像以及祝福的话，内心是不是有一丝丝的满足。
一开始是想搞一个公众号，大家可以直接在输入框发祝福，后面觉得这样还是太死板，没趣，放弃了。
搞个微信 web 吧，不用关注也能访问，而且把 web 页面做成请柬的形式，还可以提前分享给大家暖暖场。那还等什么，干呀。
撸起袖子就是干
传统请柬三要素：时间地点和人物，我的请柬三要素：签到地图和弹幕。吭哧吭哧，花了两周的业余时间，期间媳妇也帮忙处理了图片，成品长这样：
技术栈
倒是没什么吊炸天的技术，因为开发时间有强制的 deadline，我可不想因为开发这个而错过我的婚礼😂。所以挑的技术都是一些比较熟悉而且开箱即用的。
后台：Mysql、Nodejs、Sails、Sequelize、Bluebird ；
前端：WeUI、jQuery、jquery.fullPage、slick、CommentCoreLibrary(CCL 弹幕)、高德地图、iconfront。
弹幕数据实时更新是用的最简单的短轮询，没别的，就一个稳字。
如果你有打开体验，看了几张背景照片你会发现，不管照片中人物主体的位置是偏左还是偏右，在你的视觉中一定是居中显示的，这样保证打开后一眼就能看到我们😘。这个也不是什么高大上的技术，就是提前测量好每张照片人物主体中心线的偏移量，然后写在图片标签的属性里。如下图所示，白色代表照片，绿色代表手机屏幕，两个圆圈代表照片上的人物主体。
遇到的一些坑
微信的坑
做好后是部署在我自己的服务器上，域名也没备案，刚分享出去一切都挺顺利。可后面逐渐就有人反馈打不开或打开空白的情况，经过抓包才发现微信会把分享的网址在打开前做拦截，如果域名没有备案那就只能 say goodbye。
微信还会在输入框获取焦点时，提示用户注意安全，谨防泄密。这个也挺烦人的，发个祝福还要注意安全😥。不过这个在公众号可以设置域名白名单，当然前提也是域名要备案。
弹幕的坑
CCL 弹幕库之前默认的渲染方式是 left、top，目的是为了向下兼容。但是在手机端的性能简直不忍直视，当时有个版本 v0.10.0-rc 在测试使用 css3 的渲染方式，切过去效果直逼 PC 端，就马上用上了。现在 CCL 默认的渲染方式就是 css3，不用再踩这个坑了。
输入法的坑
使用中文输入法的时候，输入框底部和键盘顶部无法完美贴合。这个坑到现在也一直没有填，这篇文章《移动端输入框填坑系列（一）》似乎给了解决办法。
干完只是开始
产品开发完成并不是结束，而是开始。怎么引流，生产环境有 bug 等等这些问题接踵而来。
如何让大家现场访问
在入口迎宾处扫码？这样只能一次性加入，退出了就很难再进来。
在现场加群，在群里发链接？这样看似是个好办法，但宾客有绝大多数是年纪比较大，能用微信扫码就了不起，现场加群这种操作还是难为他们了。
二维码投在大屏上？这影响大屏的美感，而且后场扫码几乎是不可能的。
最后想了一个土办法将二维码打在小卡片上，每个桌上发几张。于是随便设计了小卡片的样式，在 TB 上找了家打印店印了 100 多张，成本还是比较低的。
卡片上的二维码现在依然有效，只是现在不抽奖了😂，可以用微信扫一扫体验下。
婚礼结束后统计了下，现场总共有 300 多人，发祝福的有 150 多人，这个转换率还是可以的。
如何搞定现场大屏
上面只讲了微信 web 端，其实完成整个互动，还有一个重要组成部分——现场大屏。酒店的大屏多是 LED 拼接大屏，这可不像电脑的显示器，有明确的分辨率。当时打电话问酒店前台大屏分辨率是多少，他们也是一脸懵逼。后面咨询做大屏的朋友才知道，他们根本不讲分辨率，只讲尺寸，叫我等比例走就行，于是我也一脸懵逼了。不管啦，做了多个响应式尺寸以防万一。
大屏端的交互就没那么多了，都是一些自动播放或静态展示的东西。
如何抽奖
大屏端有个抽奖界面，这个抽奖环节还是需要主持人和幕后人员配合的。主持人发口令，幕后人员根据口令控制抽奖开始与结束。在婚礼前与主持人沟通过程中，主持人表示赞叹：主持了十多年婚礼，第一次见到这么有趣的形式。此时我内心喜悦而又惶恐，担心现场搞砸。
关于抽奖算法，就是简单的完全随机抽取，那句“据说颜值高的和祝福多的都更有机会中奖”，仅仅是促进大家发祝福的小玩笑（好像有点贱，逃~~）。候选人则是所有签到在现场的宾客，扫了上面小卡片上的二维码就可以自动签到在现场，这样也省去宾客需要多余的操作。
其他一些未完成的想法
在微信端完成后，我就分享到朋友圈。一会儿收到了很多祝福，为了感谢大家，就在弹幕里发了一个口令红包，浏览量瞬间爆棚，小水管服务器都有点抗不住了。这给了我一个很好的启发，于是想后台设置个定时任务，在婚礼现场来场震撼的口令红包雨。不过这个想法后来被其他事耽搁了，没有加上，也是有点小遗憾。
One more thing
在本文发布的同时，也打算把这个尘封一年的项目开源出来。祝愿所有的 forker 有情人终成眷属。
项目地址：iammapping/wedding
 |
1
iammapping OP  3
我的婚礼是在一年前，如今宝宝快要出生啦，和媳妇正在为宝宝取名字发愁，各位大大能否给点意见啊🙏，我姓梅。Ps. 这是个严肃的话题，像没关系、没文化之类的名字憋在肚子里，求你不要说出来。
|
 |
2
cxd44 2017-10-22 22:59:40 +08:00 via Android
@iammapping 梅超风，梅超锋
|
|
3
iammapping OP @cxd44 可有九阴真经？
|
 |
4
Luzifer 2017-10-22 23:26:29 +08:00 1
求名帖都这么有技术含量了？
十一前放出来就好了 男女宝宝？ 梅伯稷 梅魁彦 |
|
5
cxd44 2017-10-22 23:38:57 +08:00 via Android
@iammapping 这个名字是不错的，起码通俗易懂，朗朗上口，你一说名字，人家就记得了
|
 |
6
xupefei 2017-10-22 23:43:48 +08:00
起名贴怎能没有杨不悔？
|
 |
7
Baymaxbowen 2017-10-22 23:49:29 +08:00 via Android
其实那个页面可以直接在聊天中置顶就好了
|
 |
8
iridescent0rsy 2017-10-22 23:54:58 +08:00 via Android 14
梅 bug
|
 |
9
uuair 2017-10-23 00:09:25 +08:00
我觉得这个婚礼可以全程不需要人，只要联网就好了，哪怕不在现场，都可以参与。。。。只不过婚礼没人来，好么？
|
 |
10
brickyang 2017-10-23 00:39:40 +08:00 via iPhone 2
@uuair 我希望我的婚礼所有人都不用来，包括我自己…大家拉个群说说吉利话发发红包，躺床上一天就过去了，挺好
|
 |
11
kingcos 2017-10-23 01:33:16 +08:00 via iPhone 3
梅桦璐😂开个玩笑…
|
 |
12
dobelee 2017-10-23 01:41:08 +08:00 via Android
这个有趣。
|
|
13
iammapping OP @brickyang 😲躺床上一天，你这婚礼入洞房的环节占比有点高呀😁。
|
|
14
iammapping OP @uuair 是可以不在现场，我同事当时就远程刷弹幕，关键是现场抽奖还抽到了她
|
|
15
iammapping OP @iridescent0rsy 这只能是一个美好的愿望
|
 |
16
carlclone 2017-10-23 07:21:03 +08:00 via Android
梅关西
|
 |
17
jmy 2017-10-23 08:17:49 +08:00
以前认识一个男生 叫 梅银玉 男生 😓
|
 |
18
cnTangLang 2017-10-23 08:30:24 +08:00 via Android
为楼主赞一个，这才是有能力有行动的技术男！
|
 |
19
hzwjz 2017-10-23 08:35:39 +08:00 via Android
梅长苏
|
 |
20
fox0001 2017-10-23 08:39:58 +08:00
婚庆公司又有收费点了
|
 |
21
zjqzxc 2017-10-23 08:46:27 +08:00
类似的东西在人人网还活着的时候就有了。。
|
 |
22
tongz 2017-10-23 08:47:00 +08:00
非常 nice，已 star ！
|
 |
23
bear2017 2017-10-23 09:10:33 +08:00 1
很 cool，能设计自己的婚礼，这算是程序员的浪漫了吧。
 看楼主是想给宝宝取个比较有文化涵养（惊艳）的名字吧，女孩取名看《诗经》，男孩取名看《楚辞》。认真脸.jpg 或者去知乎搜有《有哪些惊艳到你的名字》 比如叫梅若华，梅秋水。开玩笑啦  |
 |
24
newbieo0O 2017-10-23 09:11:35 +08:00 1
@iammapping 梅川酷子
|
 |
25
yingfengi 2017-10-23 09:11:45 +08:00 via Android
拼接屏有分辨率啊，系统集成路过。。。
|
|
26
yingfengi 2017-10-23 09:15:24 +08:00 via Android 1
关于取名字，女《诗经》男《楚辞》
|
|
27
newbieo0O 2017-10-23 09:16:24 +08:00
正经的：女娃叫梅花
|
 |
28
gamexg 2017-10-23 09:27:43 +08:00 via Android
@yingfengi +1 第一次配置屏幕时必须输入像素尺寸的，软件不知道屏幕实际尺寸，只知道像素尺寸。
可以自己数一下一个箱体有多少灯组，乘以箱体数量就是整个屏幕分辨率。 如果 led 软件还是默认密码，也可以进配置查看尺寸。 |
 |
29
luozisha 2017-10-23 09:28:33 +08:00 1
梅琛，梅琳
|
 |
30
kinwa 2017-10-23 09:39:42 +08:00 via Android
有个女同事叫梅瑰，
|
 |
31
prozhong 2017-10-23 10:07:03 +08:00
人多的话 wifi 或者运营商的网络可能会便秘……
|
 |
32
privil 2017-10-23 10:10:47 +08:00
梅露露啊！星辰小魔女梅露露！！！
|
 |
33
amon 2017-10-23 10:17:34 +08:00 1
梅威瑟
梅懋秉 |
 |
34
fhefh 2017-10-23 10:22:15 +08:00 1
梅依依
|
 |
35
crossoverJie 2017-10-23 10:23:19 +08:00
已经 star，结婚时想不出更好的点子可以试试这个。
|
 |
36
4074 2017-10-23 10:31:15 +08:00 1
梅雨
|
 |
37
raptor 2017-10-23 10:33:00 +08:00
我上次结婚的时候搞过类似的花头，最后还不是离婚。供参考
|
 |
38
yylzcom 2017-10-23 10:54:04 +08:00 1
梅希
梅熙 |
 |
40
ssoftlns 2017-10-23 10:58:54 +08:00
@iammapping 梅超疯 梅瑰金
|
 |
41
likuku 2017-10-23 11:44:21 +08:00
梅八歌
|
|
42
iammapping OP |
|
43
iammapping OP @raptor 心疼你 3 秒钟 😥
|
 |
44
ayang23 2017-10-23 12:47:12 +08:00
梅赛德斯
|
 |
45
dumb 2017-10-23 12:53:15 +08:00 via Android
厉害了
|
|
46
newbieo0O 2017-10-23 12:56:03 +08:00 1
@iammapping 梅花、梅雨，没有歧义，好记，一看就记住了。
|
 |
47
qiumaoyuan 2017-10-23 12:56:56 +08:00 1
梅石楠
|
|
48
iammapping OP 1
@ayang23 哈哈，我怕到时大家发出发动机般的笑声
|
 |
49
dreamwar 2017-10-23 13:25:17 +08:00 1
梅文悌
|
 |
50
ivenvd 2017-10-23 13:34:27 +08:00
梅闻花，梅骰瑙。
|
 |
51
hsuan 2017-10-23 13:36:25 +08:00 via Android
梅力坚
|
 |
52
yechengzhe 2017-10-23 13:47:10 +08:00 via Android
这个赞
|
 |
53
xxdd 2017-10-23 13:48:34 +08:00
已经有婚庆公司再搞了
微信扫码关注 可以发现场图片 可以抽奖 可以发祝福语（大屏滚动 |
 |
54
ycmchong 2017-10-23 13:58:01 +08:00 1
看你希不希望将来孩子上课经常被点名爬黑板之类的，想被点次数多就起个好记有意思的，不想就起个复杂难读的，多数老师看到不会的字就不好意思念出来
|
 |
55
iFlicker 2017-10-23 14:02:24 +08:00
六月底在上海参加一个婚礼用的就是你这种思路，大屏幕上弹幕祝福 可好玩，不过有审核，不雅的不显示
|
 |
56
donglongfei2008 2017-10-23 14:23:00 +08:00 1
女宝的话，梅若澜
|
 |
57
hoythan 2017-10-23 15:05:38 +08:00
哈哈哈，结婚所有人低着头看手机
|
 |
58
ppwangs 2017-10-23 15:13:56 +08:00
我们这代人结婚办酒席基本就是为了给父母还愿。
自己则能简就简。 |
 |
59
shulen 2017-10-23 15:14:25 +08:00
九江人？
|
 |
60
talen666 2017-10-23 15:23:11 +08:00
梅寂寂
|
 |
61
debugjoker 2017-10-23 15:26:12 +08:00 via Android
有现成的叫 hi 现场的东西呀
|
 |
62
irexy 2017-10-23 15:34:34 +08:00 1
赞同 ycmchong
个人经历来看，名字简单有趣的一般人缘都不错，点一次名大家都认识了，老师也喜欢。 像那种复杂生僻的有晦涩含义的一般都不好融入。 |
 |
63
sobigfish 2017-10-23 15:41:00 +08:00
赞，但其实只要涉及发布到到大屏就要有审核机制，因为你挡不了有人犯贱的。
|
 |
64
HuangLibo 2017-10-23 15:58:57 +08:00 1
梅杰超
|
 |
65
yaoxuwang 2017-10-23 16:01:34 +08:00 via iPhone
很棒啊 技术解决实际问题
|
 |
66
aksoft 2017-10-23 16:06:51 +08:00
你做这有用？最能调动人的还是钱！发红包比这简单有效
|
 |
67
cdwyd 2017-10-23 16:37:37 +08:00
当然是：梅我帅
|
 |
68
xman99 2017-10-23 17:17:41 +08:00
很好， 今晚回去看看
|
 |
69
Acheron 2017-10-23 17:22:55 +08:00
梅钱
|
 |
70
haofly 2017-10-23 17:57:38 +08:00
有用
|
 |
71
youyang 2017-10-23 18:23:23 +08:00
梅我吊
|
 |
72
chnyang 2017-10-23 18:28:02 +08:00
梅哲
|
 |
73
vjnjc 2017-10-23 19:16:35 +08:00
哇马克，等我有了老婆应该用的上
|
 |
74
hhhtang 2017-10-23 21:18:27 +08:00
梅问题，梅怡（溢）初（出）
|
|
75
iammapping OP |
|
76
iammapping OP @shulen 是啊，老乡？
|
|
77
iammapping OP @aksoft 有用啊，加上我两个同事已经有三个成功案例啦。其实这个就是换个形式发红包
|
|
78
sobigfish 2017-10-23 21:41:11 +08:00
我也来个
梅（眉）飞扬 |
|
79
shulen 2017-10-23 22:52:00 +08:00
@iammapping 握爪子，星子
|
 |
80
Magician 2017-10-23 23:42:02 +08:00 via iPhone
楼主我也姓梅 宝宝也快要生了 名字用同样的吧 哈哈哈哈
|
 |
81
Ultraman 2017-10-24 02:15:31 +08:00 via Android
两个小时前看完这个帖子 刚刚打开 chrome 就看到 chrome 给我推送了这个 repo，，，
|
 |
82
chenyu8674 2017-10-24 09:59:36 +08:00
梅落坂
当有人跨娃的名字梅瓣落地饱含诗意时，娃就可以淡定地说：不好意思，中间那个字读 lao |
 |
83
StephenChow 2017-10-24 12:23:19 +08:00 via Android
订阅号没有获取基本用户信息的权限😂😂，没法破
|
|
84
iammapping OP @chenyu8674 这时应该飘来墨镜，雪茄，金链子。这个有点意思，哈哈
|
|
85
iammapping OP @StephenChow 这比较麻烦，可以用一个测试公众号，然后扫码关注后，自动回复链接地址给关注人，打开地址访问，不过这有 100 人上限。成本稍高的做法是淘宝上找人代认证。或者你们公司有的话借来用一下，没啥影响，我就是这么干的。
|
 |
86
justfan 2017-10-24 14:08:26 +08:00
梅东 梅南 梅北
|
 |
87
NullException 2017-10-24 16:38:20 +08:00
梅氏
|
 |
88
mizuki 2017-10-24 17:29:40 +08:00 1
梅雪，Michelle
|
 |
89
awfe 2017-10-25 14:02:03 +08:00
|
|
90
iammapping OP @awfe 大写的服
|
 |
91
deyu 2017-10-26 16:52:00 +08:00
女:梅静娴 男:梅宇 哈~随便想的
|
 |
92
tuding 2017-10-28 22:11:27 +08:00
我结婚也是自己写了个 JS 来抽奖(头一天把名字录入系统), 而且没有司仪, 全场我和我老婆主持的. 朋友们都说我搞得像晚会
|
|
93
Magician 2017-11-09 23:52:39 +08:00
男孩：
梅蓝署(90 分) 梅艺溯(90 分) 梅文怀(91 分) 梅随怀(99 分) 梅钧捷(92 分) 梅力听(92 分) 梅杰钧(92 分) 梅议兴(90 分) 梅登驿(91 分) 梅恩加(91 分) 梅倡通(100 分) 梅捷翔(92 分) 梅及舰(91 分) 梅议匀(100 分) 梅记溪(100 分) 梅高瑄(100 分) 梅倬名(91 分) 梅恒以(91 分) 梅宝中(100 分) 梅饶玹(94 分) 梅胜珺(92 分) 梅顺元(95 分) 梅跃耀(99 分) 梅随谱(99 分) 梅宬滔(100 分) 梅续滔(90 分) 梅允舰(91 分) 梅津用(91 分) 梅力鸣(95 分) 梅雄盛(92 分) 梅艺宝(99 分) 梅尧胜(92 分) 梅祖观(87 分) 梅蓝德(90 分) 梅洪嘉(100 分) 梅澜高(94 分) 梅原充(91 分) 梅严天(100 分) 梅倬冬(91 分) 梅特齐(100 分) 女孩： 梅智元(95 分) 梅展翠(100 分) 梅展荣(100 分) 梅雅景(92 分) 梅惠中(95 分) 梅瀛萱(90 分) 梅耘蜚(100 分) 梅玲慈(100 分) 梅益好(91 分) 梅时囡(91 分) 梅珊示(91 分) 梅真荣(100 分) 梅珉示(91 分) 梅耀锐(90 分) 梅迪景(92 分) 梅宸安(91 分) 梅为岚(92 分) 梅瀚元(100 分) 梅轩羽(91 分) 梅恒滋(100 分) 梅桐诚(100 分) 梅腾萱(90 分) 梅哲菲(100 分) 梅鹤维(90 分) 梅恩滔(100 分) 梅玹任(91 分) 梅越匀(95 分) 梅敞惠(92 分) 梅益睻(100 分) 梅景茗(92 分) 梅淼绚(92 分) 梅尧捷(92 分) 梅莺娟(94 分) 梅轩巧(91 分) 梅伦宇(91 分) 梅淑钧(92 分) 梅纾巧(91 分) 梅珊连(100 分) 梅时慈(100 分) 梅丝清(92 分) 楼主居然不回我 (逃............. |
Select Language