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

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

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

缘起 ~lqGnNhh 7  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 m > (h_j  
).C!  
t i^v%+r1  
介绍 )7GLS\uf<%  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 _I_?k+#WFe  
pYl{:uIPN8  
]TgP!M&q  
微信端 /: V wVQ|UH  
EWIc|b:  
微信端 [fi'=Cb  
2BDan^:-Av  
[Cj}nld   
大屏端 /wall (上下方向键切换不同屏): drKjLo[y  
tRnW%F5  
K3:|Tc(  
大屏端欢迎页 t*d >eK`:N  
s;2/Nc   
HI\f>U  
安装 ZuvPDW%  
下载本项目 `%M-7n9Y  
{R-82%X  
X@qk>/  
> git clone https://github.com/iammapping/wedding Zknewv*sS4  
到项目根目录初始化:npm install 1@^Ek8C  
c5E#QV0&v~  
i9eyrl+!  
安装 sails iv:/g|MBI&  
F|?'9s*;6G  
kAN;S<jSE  
> npm install sails -g "6N~2q,SW  
启动:sails lift,生产环境加上 --prod 参数。 q{cp|#m#G  
'B (eMnLg  
cZr G:\A  
配置 QW~5+c9JJ  
配置微信公众号 Q_aqX(ig  
/^LH  
P$18Xno{  
> vi config/weixin.js d)0LVa(  
module.exports.weixin = { ^'&iYV  
  // 微信公众号相关设置 zD2.Q%`IM  
  appid: 'xxx', N pXgyD  
  secret: 'xxx', R+E_#lP_$  
  // 微信公众号设置的回调地址 :,NFFN  
  redirectUri: 'http://xxx/home/resolve' - LiPHHX<  
}; ?Z Rkn+;  
配置数据 H+VO.s.a  
0aC 2 Pym^  
LgP>u?]n  
导入表结构 @1v3-n=  
O:;OR'N9  
[O7w =  
mysql> create database wedding; 2"leUur~rO  
mysql> source wedding.sql; O xT}I  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) ;h9-}F  
| "Jx  
SbS$(Gt#Bv  
> vi config/connections.js & =73D1A  
sequelizeServer: { ?aFr8i:)M  
  user: 'xxx', 4<T*i{[  
  password: 'xxx', 9DOkQnnc  
  database: 'wedding', Cs:+93w  
  options: { "H>r-cyh  
  dialect: 'mysql', eC6>yD6D  
  dialectOptions: { m7r j>X Y  
    charset: 'utf8mb4' HKTeqH_:  
  }, -RG8<bI,  
  host: '127.0.0.1', ]8$#qDS@  
  port: 3306, R2}kz.  
  logging: true, `]`=]*d  
  timezone: "+08:00", J?UA:u  
  } E?Zb~xk  
} {ExII<=6  
修改图片素材 t_jyyHxoZ:  
k SB  
6FL?4>MZ  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 X"h%tsuw  
(U|)xA]y!  
8P,l>HA  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> ^Xs%.`Gv/  
... -$+,]t^GV  
data-width:图片宽度 -xJX_6}A  
data-height:图片高度 N'I(P9@  
data-center-offset:图片主体中线 x 轴位置 (VgNb&Yo9  
大屏端在 assets/styles/wall.css 中修改 [IiwNqZ[~  
\un sh^M  
oW0gU?Rr)u  
#slide1 { pw@`}cM=  
  background-image: url(/images/1-740.jpg); m6b$Xyq[  
} %'N$l F"]  
... Y [W6Sc  
修改背景音乐 w{PUj  
sffhPX\I  
B@ -|b  
在 assets/js/home.js 中修改 kMM'[w  
s(teQ\  
8tU>DJ}0  
PM.bgm = new PM.BGM($('#bgm-audio'), { tcZa~3.  
  src: '/audios/pm_bgm2.mp3', R.K?  
  autoplay: false 0HqPyM13Q  
}); Di:{er(p  
修改地图位置 G.E[6G3  
~i% -WX  
p"2m90IO  
在 assets/js/pm.js 中修改 tl|ijR  
 KyTuF   
Z a! gbt  
var map = new AMap.Map('pnl-map',{ AcKU^T+  
  zoom: 17, yq?]V7~  
  center: [115.977634, 29.709759] H nK!aa  
}); e,(a6X  
var marker = new AMap.Marker({ h\(B#SN  
  position: map.getCenter() 'xIyGDe  
}); 0Z"s_r}h  
marker.setMap(map); sm0fAL  
"?35C !  
FQ`(b3.   
// 设置label标签 )IHG6}<  
marker.setLabel({ qe<Hfp/p  
  offset: new AMap.Pixel(-75, -30), K4:  $=  
  content: "PM Infinity婚礼于10月5日晚" ,]ga[  
}); YxXq I  
center 修改中心坐标,content 修改坐标说明的文字。 {Ur7# h5  
Hfh!l2P  
&=X.*H%  
修改婚礼日期 \/ErPi=g  
V^WU8x  
YScvyh?E  
在 assets/js/home.js 中修改 |#k@U6`SG  
\Wr,<Y  
J/ vK6cO\  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); +1QK}H ~  
彩蛋 b?8)7.{F{  
R:M,tL-l  
,!Q]q^{C:W  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 QOH<]~3J  
cL G6(<L  
?^}_j vT  
微信调试 &dr@6-xaq  
1. 申请开发测试号 Or8kp/d  
2Q@Y^t   
$5NKFJc  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 eklgLU-+fW  
[*Uu#9  
BJk Z2=  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 I-kWS 4  
rOcg+5  
1y(UgEg   
2. 设置网页服务授权的回调域名 t0Mx!p'T  
eVJ^\z:4  
bWmw3w  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 #$E)b:xj  
LHkQ'O0  
[ c~kF+8  
3. 修改项目中的配置文件 Ls}7VKl'   
u-3:k  
!Ms[eB  
module.exports.weixin = { 0^3+P%(o@  
  // 微信公众号相关设置 ]{GDS! )  
  appid: '第 1 步拿到的 appID', `XKVr  
  secret: '第 1 步拿到的 appsecret', 'V (,.'  
  // 微信公众号设置的回调地址 Z"y=sDO{  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' D +RiM~LH8  
}; %\Wf^6Y^  
4. 使用微信 web 开发者工具测试 }Wh6zT)  
GpI!J}~m  
G8J*Wnwu[K  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 WQ6"0*er  
yK%ebq]  
Uz dc  
项目地址:https://github.com/iammapping/wedding "@/62b  
=0    
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

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