阿里云
阿里云多端小程序中小企业获客首选
发表主题 回复主题
  • 796阅读
  • 0回复

[网站运营]婚礼大屏互动,微信请柬一站式解决方案

级别: 论坛版主
发帖
371
云币
447

缘起 n~k;9`  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 ybcQ , e  
~%m-}Sxc  
|{<g-)  
介绍 1P@&xcvS\  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 =2# C{u.  
g.Z>9(>;Y  
E:L =>}  
微信端 /: rQ LNo,  
c"v#d9  
微信端 3T%WfS+  
/EA4-#uw  
fo^M`a!va0  
大屏端 /wall (上下方向键切换不同屏): Wl?*AlFlk  
ySL 31%  
gs7H9%j{U  
大屏端欢迎页 bw ' yX  
hT#[[md"  
k5P&F  
安装 dt<PZ.  
下载本项目 UXnd~DA  
8!'#B^  
x?VX,9;j  
> git clone https://github.com/iammapping/wedding H@.j@l  
到项目根目录初始化:npm install VrrCW/ o  
]@)X3}"!  
`[2nxP>w`  
安装 sails "n=`{~F  
w%g@X6  
3#j%F  
> npm install sails -g ZjF$zVk  
启动:sails lift,生产环境加上 --prod 参数。 HJ:s)As  
h)~KD%  
% Lhpj[C  
配置 kzMCI)>"  
配置微信公众号 /#GX4&z  
-yy&q9  
Y7zg  
> vi config/weixin.js C7[_#1Oz  
module.exports.weixin = { &gw. &/t  
  // 微信公众号相关设置 `_N8A A  
  appid: 'xxx', QS4sSua  
  secret: 'xxx', J$%mG*Y(  
  // 微信公众号设置的回调地址 ;$wS<zp6  
  redirectUri: 'http://xxx/home/resolve' N4}j,{#  
}; fILINW{Yk)  
配置数据 _>9|"seR  
k"uqso/  
xa[<k >r3  
导入表结构 bjmUU6VLT  
47ppyh6@  
:_~UO^*h  
mysql> create database wedding; Q.*qU,4);  
mysql> source wedding.sql; /J aH  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) tx;MH5s/V  
Z,M?!vK  
VLQDktj&  
> vi config/connections.js 3;zJ\a.+  
sequelizeServer: { 7[rn ,8@  
  user: 'xxx', 9OuK}Ssf  
  password: 'xxx', r :{2}nE  
  database: 'wedding', e#(0af8A  
  options: { dQVV0)z  
  dialect: 'mysql', 4_Tx FulX.  
  dialectOptions: { 8p,q9Ey  
    charset: 'utf8mb4' >9'G>~P~I=  
  }, };o6|e:2E  
  host: '127.0.0.1', W$O^IC  
  port: 3306, PspH[db  
  logging: true, 5"u-oE&  
  timezone: "+08:00", T^B&GgW  
  } MCD]n  
} >"q0"zrN,  
修改图片素材 {+r pMUs#  
BG_m}3j  
s-Q-1lKV,  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 `<i|K*u  
TviC1 {2  
>*(4evU  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> $~`a,[e<  
... PX65Z|~>_  
data-width:图片宽度 I& l1b>  
data-height:图片高度 nud,ag  
data-center-offset:图片主体中线 x 轴位置 pg1o@^OuL  
大屏端在 assets/styles/wall.css 中修改 yw^t6E  
%H75u 6  
lEIX,amwa  
#slide1 { 7Te`#"  
  background-image: url(/images/1-740.jpg); VQ5T$,&  
} \Si@t{`O  
... /Mb?dVwA  
修改背景音乐 5\8Ig f>  
;ob-'  
JM!rop^  
在 assets/js/home.js 中修改 M;OY+ |uA  
9a9<I  
pXL_`=3Q  
PM.bgm = new PM.BGM($('#bgm-audio'), { EgM.wQHR]  
  src: '/audios/pm_bgm2.mp3',  7m_Jb5  
  autoplay: false $%ZEP> ]  
}); b)J(0,9`G"  
修改地图位置 an={h,  
uy)iB'st&  
9_V'P]@  
在 assets/js/pm.js 中修改 h.>6>5$n  
y;<^[  
:A $%5;-kO  
var map = new AMap.Map('pnl-map',{ !31v@v:)  
  zoom: 17, wr,X@y%(!  
  center: [115.977634, 29.709759] I$xfCu  
}); VJ;n0*/  
var marker = new AMap.Marker({ QE[ETv  
  position: map.getCenter() Yf&x]<rkCp  
}); XFeHkU`C  
marker.setMap(map); NlXHOUw)u  
<\!+J\YTA  
Ug*:o d  
// 设置label标签 li;Np5P  
marker.setLabel({ jv<BGr=4;  
  offset: new AMap.Pixel(-75, -30), "gjy+eosY  
  content: "PM Infinity婚礼于10月5日晚" u'M \m7  
}); c7X5sMM,  
center 修改中心坐标,content 修改坐标说明的文字。 %$ |=_K)Ks  
= zW}vm }  
'qwFVP  
修改婚礼日期 cdVh_"[  
KZUB{Y^)  
sYM3&ikyHI  
在 assets/js/home.js 中修改 x~C%Hp*#  
0FD#9r  
ax0RtqtR&  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); (Em^qN  
彩蛋 ^M6xRkI  
E9TWLB5A)(  
zC #[  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 Fl<|/DCg  
+#7 e?B  
f#}P>,TP  
微信调试 (b%&DyOt  
1. 申请开发测试号 XcB!9AIO  
ce-5XqzY@  
Z8$n-0Ww  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 IoWh&(+KdH  
mu`h6?v  
<seb,> :  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 4%>iIPXi.(  
v MTWtc!6  
Y5 e6|b|  
2. 设置网页服务授权的回调域名 k2DT+}u7G  
k"X<gA  
g>)&Q >}=W  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 Y1?w f.  
qE?*:$  
]`39E"zY  
3. 修改项目中的配置文件 ?4v&TB@  
7.7P>U  
N9@@n:JT  
module.exports.weixin = {  Xr'Y[E [  
  // 微信公众号相关设置 cnJ(Fv_F$  
  appid: '第 1 步拿到的 appID', }tue`">h  
  secret: '第 1 步拿到的 appsecret', +EG?8L,z  
  // 微信公众号设置的回调地址 '&?cW#J?  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' >8h14uCk  
}; s8;/'?K  
4. 使用微信 web 开发者工具测试 bso l>M[<  
'jh9n7mH  
"cSH[/  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 6$]@}O^V  
{]Tb  
MNd8#01q`  
项目地址:https://github.com/iammapping/wedding ^y:!=nX^  
a{*r^m'N  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
批量上传需要先选择文件,再选择上传
 
验证问题: ECS是阿里云提供的什么服务? 正确答案:云服务器
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)