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

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

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

缘起 ?n)r1m  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 |$@/ Z +  
9{@#tx  
z5IHcZ  
介绍 Q >[*Y/`I  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 e:}8|e~T  
.E:[ \H"  
(x,w/1  
微信端 /: GgkljF@{}  
U*F|Z4{W  
微信端 F_;oZ   
^ a%U *>P  
,\Gn  
大屏端 /wall (上下方向键切换不同屏): a*JM2^,HO  
/=Bz[ O  
w#[Ul9=?6  
大屏端欢迎页 ?l#9ydi?  
6ae  
cC w,b]  
安装 3N6U6.Tqb  
下载本项目 D3Lu]=G  
EJY[M  
Ib.`2@ o&  
> git clone https://github.com/iammapping/wedding G?12?2  
到项目根目录初始化:npm install ie+&@u  
<b"ynoM.A  
vc o/h  
安装 sails \V`O-wcJ]S  
m! &bK5+*  
Pi::cf>3  
> npm install sails -g _H@s^g  
启动:sails lift,生产环境加上 --prod 参数。 , M$*c  
,pir,Eozg  
%lNWaA  
配置 mtuq  
配置微信公众号 6u/3"A]'  
^T"9ZBkb  
K !8+~[  
> vi config/weixin.js 1Lwi?~!LI  
module.exports.weixin = { zNRoFz.  
  // 微信公众号相关设置 'dM &~L SQ  
  appid: 'xxx', _=B(jJZ   
  secret: 'xxx', xtf]U:c  
  // 微信公众号设置的回调地址 gVCkj!{  
  redirectUri: 'http://xxx/home/resolve' Gdnk1_D>  
}; l)D18  
配置数据 FOpOS?Cr'  
eJ)Bs20Q  
&5/`6-K  
导入表结构 //KTEAYyy#  
H? N!F7s  
,0[8/)$M  
mysql> create database wedding; |Z6rP-  
mysql> source wedding.sql; k#`.!yI,  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) =Y|TShKk  
G,>tC`!  
Zb-TCS+3l  
> vi config/connections.js ZA>hN3fE'  
sequelizeServer: { FB@c +*1  
  user: 'xxx', 0 sVCTJ@  
  password: 'xxx', 1 Y@6oT  
  database: 'wedding', ^R1 nOo/  
  options: { *rp@`W5  
  dialect: 'mysql', J5k \R+\H  
  dialectOptions: { 00?^!';  
    charset: 'utf8mb4' *kgbcUf8  
  }, N<Rb<p%  
  host: '127.0.0.1', 1W8[ RET  
  port: 3306, 9g >]m 6  
  logging: true, e{Om W  
  timezone: "+08:00", sq*R)cZ  
  } Po&gr@e.V  
} :::"C"Ge  
修改图片素材 Y%p"RB[  
b'Z#RIb  
v;el= D  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 eL^,-3JA(]  
V;=SncUb  
%&Z!-k(  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> LH]nJdq?)  
... mn*.z!N=  
data-width:图片宽度 _zJY1cr  
data-height:图片高度 h\C  
data-center-offset:图片主体中线 x 轴位置 ub}t3#  
大屏端在 assets/styles/wall.css 中修改 e.\d7_T+  
T$GhE  
)eY3[>`  
#slide1 { Eo)Q> AM  
  background-image: url(/images/1-740.jpg); J.?6a:#bU/  
} }_3<Q\j  
... Sq-mH=rs]  
修改背景音乐 ff?:_q+.N  
<bXfjj6YJ@  
>\^:xx Tf  
在 assets/js/home.js 中修改 `DC)U1  
~k+-))pf  
d;:+Xd`  
PM.bgm = new PM.BGM($('#bgm-audio'), { 7tUl$H;I/R  
  src: '/audios/pm_bgm2.mp3', zYYc#N/  
  autoplay: false 4B-v\3Ff  
}); 0kQAT #  
修改地图位置 @/`b:sv&*  
wB?;3lTS  
!R[o6V5T  
在 assets/js/pm.js 中修改 87>\wUJ  
jv5p_v4%O  
O>Xyl4U  
var map = new AMap.Map('pnl-map',{ n_v|fxF1  
  zoom: 17, ]. IUQ*4t  
  center: [115.977634, 29.709759] i=o<\ {iV:  
}); ^WVH z;  
var marker = new AMap.Marker({ y_Bmd   
  position: map.getCenter() @Ej{sC!0T  
}); jQj`GnN|  
marker.setMap(map); `V$i*{c:#  
0KHA5dt  
teg LGp@_  
// 设置label标签 U5Q `r7  
marker.setLabel({ &xj?MgdNL  
  offset: new AMap.Pixel(-75, -30), 7-'!XD!  
  content: "PM Infinity婚礼于10月5日晚" [L{q  
}); ,+oQ 5c(f  
center 修改中心坐标,content 修改坐标说明的文字。 cIw)ScY  
]Yp;8#:1  
E/Q[J.$o  
修改婚礼日期 GW]Ygf1t  
tOn/r@Fd^E  
|/Ggsfmby  
在 assets/js/home.js 中修改 8)\ ?6C  
0AZ Vc  
Pn[-{nz  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); X) owj7U;  
彩蛋 ~Z=Q+'Hu0  
'Wn'BRXq3  
MQG(n+c  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 sPyq.oG  
4@u*#Bp`|  
VA&_dU]*  
微信调试 f 0~<qT?:n  
1. 申请开发测试号 ;*BG{rkr  
k^w!|%a[  
K63OjR >H  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 Ovxs+mQ  
4[44Eku\  
etMQy6E\  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 @>}!g9c  
yTm/P!1S  
F/tGk9v  
2. 设置网页服务授权的回调域名 IE+{W~y\  
fZw/kjx@  
9{RCh 9  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 6ey{+8  
5/F1|N4  
)"/.2S;  
3. 修改项目中的配置文件 i%_W{;e  
 l+HmG< P  
J$F 1sy  
module.exports.weixin = { JfGU3d*c  
  // 微信公众号相关设置 fd! bs*\X  
  appid: '第 1 步拿到的 appID', HL]8E}e\"  
  secret: '第 1 步拿到的 appsecret', j #G4A%_  
  // 微信公众号设置的回调地址 S~()A*5  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' <'N"GLJ  
}; MKPxF@N(  
4. 使用微信 web 开发者工具测试 6hp>w{+  
aO)Cq5  
*eL&fC  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 o9\J vJk  
GVR/p  
L|ZxB7xk  
项目地址:https://github.com/iammapping/wedding {P')$f)  
6i'GM`>w  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 阿里云官网域名是什么? 正确答案:www.aliyun.com
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)