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

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

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

缘起 gR\-%<42  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 M|DVFC  
l+HF+v$  
~>-MVp  
介绍 K}e:zR;;^  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 E 8LA+dKN:  
JVxGS{Z  
'h.:-1# L  
微信端 /: aTLu7C\-e  
IMcuoQ5  
微信端 -'%>Fon  
ta+MH,  
$LkTu  
大屏端 /wall (上下方向键切换不同屏): cM 5V%w  
1=U NA :t<  
e !2SO*O  
大屏端欢迎页 [@;q#.}Z  
j0`)mR}  
E>I\m!ue  
安装 w _ONy9  
下载本项目 kH'zTO1  
0aM&+j\q}  
 Qo$j'|lD  
> git clone https://github.com/iammapping/wedding iO@UzD #v  
到项目根目录初始化:npm install kWMz;{I5*w  
#UesXv  
|w].*c}Z  
安装 sails j/p1/sJ[y  
z)Gd3C  
r7^oqEp@B  
> npm install sails -g XT%\Ce!  
启动:sails lift,生产环境加上 --prod 参数。 'B\7P*L"p  
 PrqyJ  
C2}f'  
配置 N3(.7mxo  
配置微信公众号 Aw$+Ew[8 2  
W"n0x8~sV  
LE}V{%)xD  
> vi config/weixin.js Lm3~< vP1e  
module.exports.weixin = { W+Q^u7K  
  // 微信公众号相关设置 Rn$[P.||  
  appid: 'xxx', zvbO q  
  secret: 'xxx', pv]2"|]V)  
  // 微信公众号设置的回调地址 z50P* eS  
  redirectUri: 'http://xxx/home/resolve' .]w=+~h  
}; BIh^b?:zU  
配置数据 aqEmF  
$a'}7Q_  
8I[=iU7]l  
导入表结构 %#x l+^  
BUS4 T#D  
?DGg.2f  
mysql> create database wedding; i_(6} Y&  
mysql> source wedding.sql; v>0I=ut  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) q ;"/i*+3  
,@kLH"a0  
0b G#'.-  
> vi config/connections.js 3Fw7q"  
sequelizeServer: { k8c(|/7d  
  user: 'xxx', ^r~O*  
  password: 'xxx', k+BY3a  
  database: 'wedding', +ib&6IU  
  options: { hdeI/4 B  
  dialect: 'mysql', {T-=&%||  
  dialectOptions: { fjCFJ_  
    charset: 'utf8mb4' n^|SN9 _r  
  }, {)(Mkm +d  
  host: '127.0.0.1', 2HO2  
  port: 3306, 6of9lO:  
  logging: true, f0879(,i  
  timezone: "+08:00", (8baa.ge  
  } dVg'v7G&V(  
} *q"1I9zvT  
修改图片素材 0avtfQ +f  
Y-lwS-Ii  
orOq5?3  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 *cZ7?  
fZoQQ[s  
v"o_V|  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> m>|7&l_  
... Cp+tcrd_s  
data-width:图片宽度 jn`5{ ]D  
data-height:图片高度 T"t.t%(8  
data-center-offset:图片主体中线 x 轴位置 >{l b|Vx  
大屏端在 assets/styles/wall.css 中修改 Ii# +JY0k  
YC$>D? FW  
5g.w"0MkY  
#slide1 { !1%Sf.`!_  
  background-image: url(/images/1-740.jpg); 3,EtyJ3[Bh  
} \TYVAt] ?  
... cY Qm8TR<  
修改背景音乐 65nK1W`i  
XD" 4t4~>  
B`gH({U  
在 assets/js/home.js 中修改 gW^4@q  
tt CC] Q  
@^J>. g  
PM.bgm = new PM.BGM($('#bgm-audio'), { EG|_YW7  
  src: '/audios/pm_bgm2.mp3', *CbV/j"P?  
  autoplay: false Ms5R7<O.7  
}); xB]^^ NYE=  
修改地图位置 _T7XCXEk   
F(ZczwvR  
.|Yn[?(  
在 assets/js/pm.js 中修改 =p7id5"  
sCmN|Q  
m=Gb<)Y  
var map = new AMap.Map('pnl-map',{ 2Q7X"ek~[  
  zoom: 17, ~]`U)Aw  
  center: [115.977634, 29.709759] kem(U{m  
}); m. \JO  
var marker = new AMap.Marker({  D F=Rd#  
  position: map.getCenter() <>Ha<4A =E  
}); vT @25  
marker.setMap(map); dc_2nF  
HIt9W]koO  
ic4hO>p&  
// 设置label标签 xn@oNKD0  
marker.setLabel({ ]"?<y s  
  offset: new AMap.Pixel(-75, -30), B9Wd '  
  content: "PM Infinity婚礼于10月5日晚" US"UkY-\  
}); c4r9k-w0E  
center 修改中心坐标,content 修改坐标说明的文字。 C rl:v8  
fU\;\  
&Nw|(z&$  
修改婚礼日期 pSEaE9AX%  
:h/v"2uDN  
'H4?V  
在 assets/js/home.js 中修改 ]"htOO  
}f% Qk0^  
ZR"qrCSw`  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); vlipB}  
彩蛋 ,7DyTeMpN  
|5&7;;$  
;Bw3@c  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 R~|(]#com  
 c,M"a  
"`%UC#  
微信调试 %`\Qtsape  
1. 申请开发测试号 <OJqeUo+*\  
M'oZK  
=vriraV"  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 6+"gk(  
4L4u<  
y@7CY-1  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 rOj(THoc{  
s8qpK; O  
- DYH>!  
2. 设置网页服务授权的回调域名 ='C;^ Bk  
1,U)rx$H  
"(kiMo g-  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 ]1|7V|N6  
a40>_;}:x  
qK~]au:C  
3. 修改项目中的配置文件 C@-cLk  
(?lT @RY/  
BQeg-M  
module.exports.weixin = { ,OP\^  
  // 微信公众号相关设置 {0AlQ6.@>  
  appid: '第 1 步拿到的 appID', Gl6:2  
  secret: '第 1 步拿到的 appsecret', D$rn?@&g  
  // 微信公众号设置的回调地址 5lM 3In@  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' 7 n^1H[q  
}; sb1tQ=u[  
4. 使用微信 web 开发者工具测试 >?G!>kw  
No+BS%F5  
!1]jk(Z  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 QA)"3g   
P=9UK`n  
}g|9P SbJ  
项目地址:https://github.com/iammapping/wedding Sco'] ^#(  
osLEH?iKW  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
批量上传需要先选择文件,再选择上传
 
验证问题: 阿里云官网域名是什么? 正确答案:www.aliyun.com
上一个 下一个