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

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

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

缘起 Oc;0*v[I  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 ~\c]!%)o  
DT_HG|  
7CzZHkTg  
介绍 jZcjiOX  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 `Njv#K} U  
:Xv3< rS<  
@ba5iIt  
微信端 /: UB]} j^  
^.F@yo2}  
微信端 <D4.kM  
<`sVu  
: 2?J#/o  
大屏端 /wall (上下方向键切换不同屏): 6>)]7(B<d  
b+\jFGC%6=  
qx<`Kc4  
大屏端欢迎页 4w^B&e%  
_JA.~edqM  
VY$hg  
安装 ^u#!Yo.!(  
下载本项目 *A`hKx  
NjVuwIm+  
ehI*cf({  
> git clone https://github.com/iammapping/wedding zr?%k]A%UO  
到项目根目录初始化:npm install Dg/&m*Yl  
Xvm.Un< N  
w-R>g dm  
安装 sails "g\  
{j[[E/8N!y  
}%[TJ@R;  
> npm install sails -g D Y($  
启动:sails lift,生产环境加上 --prod 参数。 Y4}!9x  
[a\:K2*'  
>fI<g8N D  
配置 %up ]"L&i  
配置微信公众号 M~;mamTP  
gpsEN(.w  
(1fE^KF@f  
> vi config/weixin.js kg7oH.0E  
module.exports.weixin = { s<|.vVi"  
  // 微信公众号相关设置 DIH.c7o  
  appid: 'xxx', tS8*l2Y`   
  secret: 'xxx', V{@<Z8sW#  
  // 微信公众号设置的回调地址 \szx.IZT  
  redirectUri: 'http://xxx/home/resolve' M5HKRLt  
}; AYd7qx:~  
配置数据 x:O?Fj  
xaX3<V@S  
U2=5Nt5  
导入表结构 tfvX0J  
<)n1Z[4  
j./3)  
mysql> create database wedding; li8l+5d q  
mysql> source wedding.sql; "2)<'4q5)  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) WZ'8{XY8  
Il%LI   
m'XzZmI  
> vi config/connections.js FAJ\9  
sequelizeServer: { "2}04b|"  
  user: 'xxx', Xz4!#,z/  
  password: 'xxx', 9kuL1tcY  
  database: 'wedding', 1]aM)},  
  options: { WmP"u7I4  
  dialect: 'mysql', PQ<""_S||  
  dialectOptions: { "'p:M,:  
    charset: 'utf8mb4' 1Wtr_A  
  }, )TFaG[tj  
  host: '127.0.0.1', DbP!wU lqR  
  port: 3306, *oL?R2#7  
  logging: true, O9oYuC:q  
  timezone: "+08:00", dE^:-t  
  } z*>"I  
} g+t-<D"L5  
修改图片素材 EA|*|o4)  
q|b#=Af]g  
hU3c;6]3  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 jxL} tS{j  
!fZ\GOx  
<w` R ;  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> MzL^u8  
... .C$S DhJ~  
data-width:图片宽度 0=#:x()e  
data-height:图片高度 Xa=oryDt  
data-center-offset:图片主体中线 x 轴位置 *%7[{Loz  
大屏端在 assets/styles/wall.css 中修改 CeSr~Ikg|  
a$yAF4HR<  
s]50Y-C  
#slide1 { u\ro9l  
  background-image: url(/images/1-740.jpg); L3GA]TIf  
} +%7v#CY &  
... P}29wrIZ  
修改背景音乐 4='Xhm  
_VGAh:v  
:m]~o3KRy  
在 assets/js/home.js 中修改 3_|<CE6  
JFH3)Q  
5. 5<.")  
PM.bgm = new PM.BGM($('#bgm-audio'), { _8A  
  src: '/audios/pm_bgm2.mp3',  a?S5 =  
  autoplay: false p.6C.2q~s]  
}); G2qv)7{l2  
修改地图位置 H xs'VK*  
waI?X2  
/Cy4]1dw  
在 assets/js/pm.js 中修改 #(swVo:+E  
r5 tn'  
B-^r0/y;  
var map = new AMap.Map('pnl-map',{ #lAC:>s3U  
  zoom: 17, ^POHQQ  
  center: [115.977634, 29.709759] z^lcc7  
}); fF6bEJl3  
var marker = new AMap.Marker({ Ov8^6O  
  position: map.getCenter() r$[`A_  
}); fi%)520  
marker.setMap(map); ')N[)&&Q{  
Zt_~Zxn3  
X*cDn.(I  
// 设置label标签 hL4T7`  
marker.setLabel({ Cj%n?-  
  offset: new AMap.Pixel(-75, -30), [ Y+Ta,  
  content: "PM Infinity婚礼于10月5日晚" 6am g*=]  
}); r7)qr%n  
center 修改中心坐标,content 修改坐标说明的文字。 $RH.  
BP4xXdG  
Hr_5N,  
修改婚礼日期 <%o9*)F  
AH{#RD  
_aeIK  
在 assets/js/home.js 中修改 !4-4i  
80zpRU"  
{J1iheuS}  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); 9tX+n{i  
彩蛋 Ptz## o'{5  
b)@D@K"5  
^@3,/dH1 t  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 &~Pk*A_:  
(dfC}x(3h  
IyI0|&r2A  
微信调试 e|?eY)_  
1. 申请开发测试号 lb$_$+@Vr  
3&>0'h  
G^N@ r:RS  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 U?an\rv  
| p!($  
Vpne-PW  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 /o%VjP"<  
?"*JV1 9  
7O'.KoMw  
2. 设置网页服务授权的回调域名 O2\(:tvw  
*L9v(Kc  
pmUf*u-  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 VP>*J`'H  
`vMhrn  
S :8  
3. 修改项目中的配置文件 @J&korU  
v+"4YIN  
g\fj6  
module.exports.weixin = { }rI:pp^KS  
  // 微信公众号相关设置 9M;t4Um  
  appid: '第 1 步拿到的 appID', Bp_R"DS7A  
  secret: '第 1 步拿到的 appsecret', {@ vnKyf^K  
  // 微信公众号设置的回调地址 Oo@o$\+v  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' i ? ~-%  
}; eFG(2OVg}M  
4. 使用微信 web 开发者工具测试 <|4$T H^ t  
EC;>-s  
Mn(iAsg  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 g/JF(nkP  
jZzTnmm&?  
.a]#AFX  
项目地址:https://github.com/iammapping/wedding 29,ET}~  
?}Zt&(#  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
批量上传需要先选择文件,再选择上传
 
验证问题: ECS是阿里云提供的什么服务? 正确答案:云服务器
上一个 下一个