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

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

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

缘起 @KJmNM1]V  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 s"~,Zzy@j  
"#pN  
'1d0 *5+6k  
介绍 BF"eVKA  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 u3DFgl3-7  
"9Br )3  
waG &3m  
微信端 /: SN`L@/I  
AP9\]qZ(7  
微信端 `.wgRUhFH;  
}ee3'LUPX  
(~(FQ:L %U  
大屏端 /wall (上下方向键切换不同屏): (1'sBm7F  
gL1r"&^L  
%v^qQWy=*  
大屏端欢迎页 c~6ywuq+M`  
TC ;Aj|)N  
6K >(n  
安装 9gZS )MZ  
下载本项目 ,pW^>J  
YL[y3&K  
\_+Af`  
> git clone https://github.com/iammapping/wedding YT@N$kOg_  
到项目根目录初始化:npm install k;.<DN  
|+=ctpx9&  
!m9g\8tE  
安装 sails $:?=A5ttuo  
7/\SN04l  
Nt[&rO3s  
> npm install sails -g (e3?--~b6  
启动:sails lift,生产环境加上 --prod 参数。 l%`~aVGJ  
5jTA6s9zA  
x/ P\qI  
配置 `?T8NK  
配置微信公众号 Q}#H|@  
,qhv(  
P?y{ 9H*  
> vi config/weixin.js Ll^9,G"Tt  
module.exports.weixin = { > 'JWW*Y!  
  // 微信公众号相关设置 KpO%)M!/Z#  
  appid: 'xxx', >JN[5aus  
  secret: 'xxx', @2 SL$0!QA  
  // 微信公众号设置的回调地址 yF^)H{yx  
  redirectUri: 'http://xxx/home/resolve' 5}_,rF?cX  
}; hPUYq7B  
配置数据 2K2jko9'a  
l`{JxVg  
xCm`g {  
导入表结构 ~|e H8@o  
Pu!%sGjD  
`ln= D$  
mysql> create database wedding; r$Y% 15JV  
mysql> source wedding.sql; N,`<:'  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) y#e<]5I  
C#.d sl  
6z+*H7Qz  
> vi config/connections.js 'gz@UE1  
sequelizeServer: { v>mr  
  user: 'xxx', bC]GL$ph9*  
  password: 'xxx', rjT!S1Hs  
  database: 'wedding', %:.00F([r  
  options: { ekuRGG  
  dialect: 'mysql', [Uu!:SZ  
  dialectOptions: { C$EvcF% 1  
    charset: 'utf8mb4' i52:<< 8a  
  }, A*hc w  
  host: '127.0.0.1', KP!ctlP~  
  port: 3306, JxLD}$I  
  logging: true, YPsuG -is  
  timezone: "+08:00", :+|os"  
  } \~ h7  
} $+ ?A[{JG  
修改图片素材 Z(-@8=0  
{\f`s^;8{  
F>A&L8  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 [.`#N1-@M  
20H$9M=}  
AW:WDNQh8n  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> ~*h` ?A0  
... <CUe"WbE)  
data-width:图片宽度 `l95I7  
data-height:图片高度 q#N8IUN}4  
data-center-offset:图片主体中线 x 轴位置 @[4Tdf  
大屏端在 assets/styles/wall.css 中修改 I8 {2cM;  
?$xZ$zW  
kyc Z  
#slide1 { zy9# *gGq  
  background-image: url(/images/1-740.jpg); C0F#PXU y  
} {'#^  
... 29E9ZjSK  
修改背景音乐 $=GZ"%ED  
4#m"t?6!  
4X2/n  
在 assets/js/home.js 中修改 w%[ `'_[  
N8| ;X  
^w XXx=Xf  
PM.bgm = new PM.BGM($('#bgm-audio'), { 8j} CP  
  src: '/audios/pm_bgm2.mp3', S 5Q$dAL  
  autoplay: false cM;& $IjCt  
}); iS^IqS  
修改地图位置 V[Jd1T  
&Q[Y&vNn  
PXk+Vi,%k  
在 assets/js/pm.js 中修改 PZRm.vC)k  
iQ9jt  
yU~OfwQ  
var map = new AMap.Map('pnl-map',{ lk6*?EJ  
  zoom: 17, nJ`JF5tI  
  center: [115.977634, 29.709759] J:,>/')n  
}); H|H!VPof]  
var marker = new AMap.Marker({ Kd _tjWS  
  position: map.getCenter() UJ_E&7,L  
}); ~bCn%r2  
marker.setMap(map); >uuP@j  
:mU,g|~55  
(DCC4%w"  
// 设置label标签 VrA9}"1x~*  
marker.setLabel({ ;N4b~k)  
  offset: new AMap.Pixel(-75, -30), \$2E  
  content: "PM Infinity婚礼于10月5日晚" 8Vj]whE  
}); y_$=Pu6H  
center 修改中心坐标,content 修改坐标说明的文字。 iO;q]  
Q9N=yz  
/I3#WUc;![  
修改婚礼日期 |*0oz=  
a3L]'E'*#  
#e0tT+  
在 assets/js/home.js 中修改 zm}4=Kz}  
^IuHc_  
lM C4j  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); w8*+l0  
彩蛋 <`sVu  
:<w3.(Z  
6>)]7(B<d  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 >De\2gbJ  
HHD4#XcU  
I.j`h2  
微信调试 e =Vu;  
1. 申请开发测试号 Re('7m h~  
uAR!JJ  
8w~I(2S:#  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 iLn)Z0<\o  
="RDcf/  
v8,+|+3  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 I+w3It  
A5tY4?|  
^q@.yL  
2. 设置网页服务授权的回调域名 k/O|ia 6  
B5u0 6O  
,)XT;iGQe  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 D{h1"q  
Lw?4xerLsb  
* I`, L/  
3. 修改项目中的配置文件 v I@Wuu:  
bV&/)eqv  
tt,MO)8 VD  
module.exports.weixin = { uh%%MhTjv  
  // 微信公众号相关设置 1b E$x^P  
  appid: '第 1 步拿到的 appID', 3'O+  
  secret: '第 1 步拿到的 appsecret', s<|.vVi"  
  // 微信公众号设置的回调地址 DIH.c7o  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' _(3VzI'G  
}; V{@<Z8sW#  
4. 使用微信 web 开发者工具测试 \szx.IZT  
M5HKRLt  
AYd7qx:~  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 P*T 'R  
xaX3<V@S  
#tKc!]m  
项目地址:https://github.com/iammapping/wedding tfvX0J  
Byyus[b'A  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

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