阿里云
阿里云大学认证0元起
发表主题 回复主题
  • 182阅读
  • 0回复

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

级别: 论坛版主
发帖
370
云币
639

缘起 ?ZTB u[  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 <@JU0Z"a=  
c^Wm~"r  
.P =!M  
介绍 ;R 2(Gb  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 yMo@ka=v  
E62*J$wN@  
t{?_]2vl  
微信端 /: K VQZ  
*}[@*  
微信端 w`!Yr:dU  
~x4Y57  
UAcABL^2  
大屏端 /wall (上下方向键切换不同屏): &1w,;45  
>"`:w  
.3ic%u;|D  
大屏端欢迎页 h[XGFz  
[oKB1GkA  
V!ajD!00  
安装 QFX|ZsmK  
下载本项目 PN\2 ^@>_  
Q{$2D&  
`P# h?tZ  
> git clone https://github.com/iammapping/wedding 8, B9y D  
到项目根目录初始化:npm install '}!dRpx  
xmVK{Q YT$  
D_, 2z  
安装 sails }>tUkXlhJ<  
#p_ ~L4iW  
E"w7/k#3}C  
> npm install sails -g kkd<CEz2IM  
启动:sails lift,生产环境加上 --prod 参数。 cDAO5^  
g$]9xn#_[  
=x[`W9.D  
配置 BF]b\/I  
配置微信公众号 =(hEr=f>7  
Zu+Z7@$}/  
?!A{n3\<  
> vi config/weixin.js +,PBhB  
module.exports.weixin = { Y$,]~Qzq  
  // 微信公众号相关设置  ;xry  
  appid: 'xxx', koAc-o  
  secret: 'xxx', b,{?+8  
  // 微信公众号设置的回调地址 X1" `0r3  
  redirectUri: 'http://xxx/home/resolve' 4~1_%wb  
}; Ymn0?$,D1=  
配置数据 7v=Nh  
nQ/El&{  
. e]!i(5I  
导入表结构 dc:|)bK M  
<M 7WWtmx  
-4V1s;QUZ  
mysql> create database wedding; ' ;$2j~  
mysql> source wedding.sql; %tpt+N?  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) -5E%f|U  
#_Tceq5  
3RGVH,  
> vi config/connections.js M6g!bK2l  
sequelizeServer: { rJg! 2  
  user: 'xxx', [81k4kU  
  password: 'xxx', ZT|E1[Q  
  database: 'wedding', C>j"Ck^<  
  options: { }_Jai4O  
  dialect: 'mysql', \:O5,wf2  
  dialectOptions: { /Nxy?g|,  
    charset: 'utf8mb4' .|_+>){$w  
  }, ``zg |h  
  host: '127.0.0.1', w3B*%x)  
  port: 3306, FK+jfr [  
  logging: true, dGHRHXi  
  timezone: "+08:00", =f{r+'[;^  
  } ^i@tOtS  
} ]D<r5P%  
修改图片素材 ,qaIdw[  
<5q:mG88  
("IRv>} 0  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 YY$K;t{dk  
f}#pKsX.  
^oPf>\),C  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> \Mt(9jNK  
... ssoe$Gr7>  
data-width:图片宽度 .D>%-  
data-height:图片高度 GHH1jJ_[7  
data-center-offset:图片主体中线 x 轴位置 E Sb  
大屏端在 assets/styles/wall.css 中修改 \{abyi;  
=|am=Q?Q  
N}zQ)]xz+r  
#slide1 { <.RgMPi  
  background-image: url(/images/1-740.jpg); ,AACE7%l  
} FFP>Y*v(  
... OTalR;:]r  
修改背景音乐 y{5ZC~Z<!  
He&dVP  
!`Bb[BTf  
在 assets/js/home.js 中修改 t'FY*|xk  
zFwp$K>{QY  
Q9?/)&3Bu  
PM.bgm = new PM.BGM($('#bgm-audio'), { /GfC/)1_  
  src: '/audios/pm_bgm2.mp3', Hz*!c#  
  autoplay: false 3'*SSZmnOB  
}); [V}I34UN  
修改地图位置 >qCUs3}C{*  
ZZ?=^g  
b pExYyt  
在 assets/js/pm.js 中修改 YVqhX]/   
(g4.bbEm  
p@>_1A}qh_  
var map = new AMap.Map('pnl-map',{ JdFMSmZ@  
  zoom: 17, Dj #G{X".  
  center: [115.977634, 29.709759] =Tb~CT=  
}); }.MJVB3  
var marker = new AMap.Marker({ rhwY5FD?  
  position: map.getCenter() MQw{^6Z>1  
}); (&+ ~hW5d  
marker.setMap(map); A2$:p$[  
)\'U$  
RcMW%q$dG  
//