A few days ago, a sina programmer flooded the screen, the wedding scene had to run to fix the bug, this matter is due to Lu Han. After seeing it, I remembered my wedding, which was a year ago and also on National Day. A month away from the wedding, I thought this is a lifetime event, in front of many friends and relatives to do something cool, so will let everyone impress.
How would it be cool
Hope you see this title do not think is to let gay friends pull me to elope 😱. It’s cool to let all the guests in on the show. According to the experience of attending other people’s wedding, the process is like: the host guides the bride and groom to enter, the bride and groom make vows, the parents of the bride and groom come on stage, and then the whole audience toasts to bless the couple, and finally eat until the end of the wedding. Except for one toast, the guests were all passers-by, and the sense of participation was very low. Some weddings have some interaction, depending on the host’s personal style.
To mobilize the scene, stand on the stage to scatter red envelopes of this kind of tuhao practice is obviously not suitable for wooden me. Now almost everyone has a smartphone, everyone has wechat, so I wondered if I could use wechat to get everyone involved. You can send blessings on the wall, and then the scene of the large screen in the form of bullet screen will show you the blessing. After sending blessings, you can see your head picture on the big screen and blessing words, the heart is not a trace of satisfaction.
At the beginning is to make a public number, we can directly send blessings in the input box, behind that it is still too rigid, boring, give up.
Make a wechat Web, do not need to pay attention to also can access, and make the Web page in the form of invitations, but also can be shared in advance to everyone warm up. What are you waiting for? Go ahead.
Roll up your sleeves
Traditional invitation three elements: time, place and people, my invitation three elements: sign-in map and barrage. I spent two weeks in my spare time, during which my daughter-in-law also helped to process the pictures. The finished product looks like this:
Technology stack
I don’t want to miss my wedding because there is a mandatory deadline for development 😂. So pick the technology is some more familiar and out of the box.
Backend: Mysql, Nodejs, Sails, Sequelize, Bluebird;
Front-end: WeUI, jQuery, jquery.fullPage, slick, CommentCoreLibrary(CCL barrage), Amap, Iconfront.
Real-time update of barrage data is the simplest short poll, nothing more, just a stable word.
If you have the open experience and look at a few background photos, you will find that no matter the position of the subject in the photo is left or right, it must be centered in your vision, so that you can see us 😘 at first glance. This is not a fancy technique, but the offset of the center line of the subject in each photo is measured in advance, and then written in the attributes of the image tag. As shown below, white represents the photo, green represents the phone screen, and two circles represent the subject of the person in the photo.
Encountered some pits
WeChat pit
After finishing, it is deployed on my own server, the domain name is not recorded, just shared out everything is quite smooth. Later, however, some people gradually reported that they could not open it or opened the blank. After capturing the packet, THEY found that wechat would block the shared url before opening it. If the domain name was not recorded, they could only say goodbye.
Wechat also prompts users to pay attention to safety and guard against leaks when the input box gets focus. This is also very annoying, send a blessing to pay attention to safety 😥. But this in the public number can set the domain name whitelist, of course, the premise is the domain name to record.
Barrage of pit
The default rendering mode of CCL barrage library is left and top, for the purpose of backward compatibility. But in the mobile end of the performance is unbearable to look at, at that time there was a version of V0.10.0-RC in the test using CSS3 rendering mode, cut past the effect of the PC end, immediately used. Now the default CCL rendering mode is CSS3, no need to step on this hole.
Input method pit
When using Chinese, the bottom of the input box doesn’t fit perfectly to the top of the keyboard. This hole has not been filled up until now, this article “Mobile terminal input box pit filling series (1)” seems to provide a solution.
Finish is just the beginning
Completion of product development is not the end, it is the beginning. How to drainage, production environment bugs and so on these problems one after another.
How to get people to visit
Scan at the entrance reception? So you can only join once, quit it is difficult to come back.
Add groups in the field, post links in the group? This seems to be a good way, but the vast majority of guests are older, and it is great to be able to scan the code on wechat, but it is still difficult for them to add groups on the spot.
Qr code on the big screen? This affects the aesthetics of the larger screen, and backfield scanning is almost impossible.
Finally, I thought of a soil method to play the TWO-DIMENSIONAL code on the small card, a few pieces of each table. So I randomly designed the style of small cards and printed more than 100 pieces in a print shop on TB. The cost is relatively low.
The QR code on the card is still valid, but now there is no lottery 😂, you can use wechat to scan the experience.
After the wedding statistics, the scene has a total of 300 people, send blessings of more than 150 people, the conversion rate is ok.
How to handle large screen
Only the wechat Web side is mentioned above. In fact, to complete the whole interaction, there is also an important part — the big screen on site. The large screen of the hotel is mostly LED splicing large screen, which is not like a computer monitor, there is a clear resolution. When I called the front desk to ask what the resolution of the large screen was, they were also confused. After consulting a friend who made a large screen, they didn’t talk about resolution at all, only about size, and asked me to go with proportion, so I was also confused. Anyway, I made multiple responsive sizes just in case.
There’s not as much interaction on the larger screen, it’s all autoplay or static display stuff.
How to draw
Big screen end has a lottery interface, the lottery link or the host and behind-the-scenes personnel cooperation. The host gives the password, and the behind-the-scenes personnel control the beginning and end of the lottery according to the password. In the process of communication with the host before the wedding, the host expressed admiration: hosted more than ten years of wedding, the first time to see such an interesting form. At this moment, I am happy and afraid of the scene is messed up.
As for the lottery algorithm, it is simple and completely random drawing, the sentence “it is said that the high level of appearance and blessings are more likely to win the lottery”, just a little joke to promote everyone to send blessings (seems a little cheap, escape ~~). The candidates are all the guests who check in at the scene. By scanning the QR code on the small card above, the guests can automatically check in at the scene, which also saves the unnecessary operation of the guests.
Some other unfinished ideas
After I finished it on wechat, I shared it in moments. For a while received a lot of blessings, in order to thank you, in the bullet screen issued a password red envelope, the traffic burst, small pipe server are a little resist. This gave me a very good inspiration, so want to set up a regular task backstage, in the wedding scene to shock the password red envelope rain. However, this idea was later delayed by other things, and it is a little pity that it was not added.
One more thing
At the same time as this article is published, it is also intended to open source the project, which has been dormant for a year. Wish all forker lovers a happy ending.
Project address: Iammapping/Wedding