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

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

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

缘起 Bn.8wMB  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 1@am'#<  
m4EkL  
(b(iL\B$D=  
介绍 |Bjb  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 ;RR)C@n1  
6|zA,-=  
$V[ob   
微信端 /: TPrwC~\B/  
NTV0DkX  
微信端 =0Nd\  
H*Yy o ?  
d+_qBp  
大屏端 /wall (上下方向键切换不同屏): 0j*8|{|  
g;-CAd5  
|')Z;  
大屏端欢迎页 $zJ.4NA  
nF)|oA   
qp7>_B  
安装 J<'4(}^|  
下载本项目 8 }-"&-X  
MQhL>oQ  
5@i/4%S  
> git clone https://github.com/iammapping/wedding /@0wbA  
到项目根目录初始化:npm install $Q62 7  
+~7@K{6 q-  
$} ~:x_[  
安装 sails <jxTI%'f59  
myH#.$=A  
}v`5  
> npm install sails -g Oq[tgmf  
启动:sails lift,生产环境加上 --prod 参数。 aaLT%  
(}'0K?  
`a] /e  
配置 ibEQ52  
配置微信公众号 H Jwj,SL  
hMdsR,Iq  
J3C"W7 94}  
> vi config/weixin.js KN5.2pp  
module.exports.weixin = { Tf` ~=fg%  
  // 微信公众号相关设置 w J; y4  
  appid: 'xxx', JWC{"6  
  secret: 'xxx', `*N2x\+X  
  // 微信公众号设置的回调地址 eQA89 :j,  
  redirectUri: 'http://xxx/home/resolve' CJ?Lv2Td  
}; dKhDO`.s  
配置数据 >!?u8^C  
Jgb{Tl:r  
F?3a22Zg#  
导入表结构 N_h)L`  
>{V]q*[/;Q  
FSC74N/  
mysql> create database wedding; /=i^Bgh4  
mysql> source wedding.sql;  ^~?VD  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) YEQ}<\B\&  
0fwo8NgX  
$yBU ,lu}  
> vi config/connections.js .(ki(8Z N  
sequelizeServer: { "4zTP!Ow  
  user: 'xxx', zN0^FXGD  
  password: 'xxx', a8Nl' f*0  
  database: 'wedding', Kb#py6  
  options: { R=xT\i{4h  
  dialect: 'mysql', PohG y  
  dialectOptions: { N.l+9L0b  
    charset: 'utf8mb4' 9ssTG4Sa  
  }, 0PjWfM8%  
  host: '127.0.0.1', zvL;.U  
  port: 3306, %[l5){:05  
  logging: true, Tm 6<^5t  
  timezone: "+08:00", amK"Z<V F  
  } q{nNWvL  
} g/)mbL>=  
修改图片素材 1.6yi];6  
Ivmiz{Oii  
%A|9=x*  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 z1{kZk  
kl,I.2-  
n<+g{QHi  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> |@`F !bnLr  
... p Wa'Fd  
data-width:图片宽度 kj{z;5-dl  
data-height:图片高度 R?V s8?  
data-center-offset:图片主体中线 x 轴位置 0z1m!tr  
大屏端在 assets/styles/wall.css 中修改 JK) )Cuh  
JR] /\(  
>4 4A  
#slide1 { DO` K_B  
  background-image: url(/images/1-740.jpg); b{%p  
} M=:!d$c  
... V3r1|{Z(  
修改背景音乐 R/Y9t8kk  
`K5Lp>=R  
-FftEeo7  
在 assets/js/home.js 中修改  `S$zwot  
lQ(I/[qVd  
5tfD*j n  
PM.bgm = new PM.BGM($('#bgm-audio'), { zW.I7Z0^  
  src: '/audios/pm_bgm2.mp3', 5-qk"@E W  
  autoplay: false {BPNb{dBKr  
}); &\6Buw_  
修改地图位置 14>WpNN  
pn"TFapJA  
G8AT] =  
在 assets/js/pm.js 中修改 y.vYT{^  
kd55y  
>1uo5,wrF  
var map = new AMap.Map('pnl-map',{ @N+ }cej  
  zoom: 17, KTLq~Ru  
  center: [115.977634, 29.709759] W;L<zFFbU)  
}); .Z?@;2<l  
var marker = new AMap.Marker({ LL% Aw)Q`  
  position: map.getCenter() 'C[{cr.`  
}); Q+bZZMK5,U  
marker.setMap(map); fL$U%I3  
zP554Gr?  
0SS,fs<w3  
// 设置label标签 c?(;6$A  
marker.setLabel({ -nK\+bTL}  
  offset: new AMap.Pixel(-75, -30), s|HpN  
  content: "PM Infinity婚礼于10月5日晚" }`fFzb  
}); X 8/9x-E_  
center 修改中心坐标,content 修改坐标说明的文字。 7+]+S`p  
n<,:;0{  
4C:-1gu7  
修改婚礼日期 Q' b@5o  
<[l0zE5Z8'  
W0-KFo.'  
在 assets/js/home.js 中修改 uy'I#^Bt  
bv:M zYS  
S"=y >.#  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); RKi11z  
彩蛋 n3z]&J5fr  
}R&5Ye  
bT>1S2s  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 ob. Br:x  
I@/s&$H`l  
h/goV  
微信调试 }+@GgipyO.  
1. 申请开发测试号 x& a<u@[wa  
!+EE*-c1c  
faIHmU  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 eo [eN.  
/gH[|d  
[ !<  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 [,a2A  
e+~Q58oD  
\cx==[&(  
2. 设置网页服务授权的回调域名 EP'I  
-\|S=< g  
Spm0DqqR?  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 "3;b,<0  
S_ER^Pkg  
4\Q pS  
3. 修改项目中的配置文件 w,x'FZD  
Vh}F#~BrI  
%AJTU3=0  
module.exports.weixin = { al1Nmc #  
  // 微信公众号相关设置 !;, Dlq-}  
  appid: '第 1 步拿到的 appID', y# iQ   
  secret: '第 1 步拿到的 appsecret', &_dM2lj{  
  // 微信公众号设置的回调地址 MhL>6rn  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' f&2f8@  
}; pd\x^F`sk.  
4. 使用微信 web 开发者工具测试 V`& O`  
[XbNZ6  
mmvo >F"  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 YIn H8Ex  
MO-7y p:K  
9g~"Y[ ]  
项目地址:https://github.com/iammapping/wedding vp4NH]fJ  
nXJG4$G  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
验证问题: ECS是阿里云提供的什么服务? 正确答案:云服务器
上一个 下一个