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

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

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

缘起 57eA (uI  
这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。 )kiC/Y}k  
^u[n!R\  
:#=XT9  
介绍 ?* %J Gz_  
项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。 S>s{t=AY~  
?$&iVN^UA  
+Tug.[A  
微信端 /: Nn%[J+F  
D[ -Gzqh  
微信端 a J&)-ge  
=6N%;2`84  
c0%.GcF0{  
大屏端 /wall (上下方向键切换不同屏): lQSKY}h  
VS{po:]A  
Z*Fxr;)d  
大屏端欢迎页 ' *6S0zt  
..g?po  
e0ea2 2  
安装 nA#FGfZ{Ge  
下载本项目 :t36]NM  
X  !vBD  
KkJK5dZo  
> git clone https://github.com/iammapping/wedding B]o5 HA<k  
到项目根目录初始化:npm install ~T_4M  
L&WhX3$u  
Av#_cL  
安装 sails */ ~_3  
dfss_}R  
5A~lu4-q  
> npm install sails -g B7 ^*xskH  
启动:sails lift,生产环境加上 --prod 参数。 LR5X=&k  
A+:X  
P'dH*}H  
配置 4*K~6Vh  
配置微信公众号 ,W!v0*uxp&  
^s_BY+#  
=68CR[H  
> vi config/weixin.js $i^#KZ}-WK  
module.exports.weixin = {  9z9EK'g  
  // 微信公众号相关设置 ;E"TOC  
  appid: 'xxx', :UMtknV  
  secret: 'xxx', 1${lHVx]  
  // 微信公众号设置的回调地址 ws tH&^  
  redirectUri: 'http://xxx/home/resolve' ]~!jf  
}; VOj{&O2c  
配置数据 #fy#G}c  
v7i5R !  
Y ~|C]O  
导入表结构 eq|G\XJ  
o]#M8)=  
O[tOpf@s.  
mysql> create database wedding; x2^Yvgc-  
mysql> source wedding.sql; ]7*Z'E  
修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline) ^sWsP`DV  
)<.BN p  
HW{si]~q  
> vi config/connections.js `eF&|3!IYQ  
sequelizeServer: { m_ |:tU(t  
  user: 'xxx', tAPr4n!  
  password: 'xxx', ;oKN8vI#7  
  database: 'wedding', 63J_u-o  
  options: { bD&^-& G  
  dialect: 'mysql', )4[Yplo  
  dialectOptions: { AE_7sM  
    charset: 'utf8mb4' xHA6  
  }, 3Ishe"  
  host: '127.0.0.1', ),G?f {`!  
  port: 3306, sd@JQ%O  
  logging: true, 0I8w'/s_g9  
  timezone: "+08:00", !N`$`qAK  
  } lw.4O^  
} NA%(ZRSg(  
修改图片素材 QbF!V%+a's  
/EN3>25"#  
PRs[! EB6  
微信端在 views/homepage.ejs 中修改,公告也在此文件修改 (XQBBt  
sHk,#EsKH  
d)G' y  
<img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" /> 4K_fN  
... ;1S~'B&1Q  
data-width:图片宽度 cJ6n@\  
data-height:图片高度 {,Y?+F  
data-center-offset:图片主体中线 x 轴位置 )1PZ#  
大屏端在 assets/styles/wall.css 中修改 >)/,5VSE  
Z!@<[Vo6  
7J 0=HbH  
#slide1 { YLr<^G-v  
  background-image: url(/images/1-740.jpg); !`u  
} jTo-xP{lC  
... 6ty>0  
修改背景音乐 lJ+05\pE  
tBtG- X2  
On[:]#  
在 assets/js/home.js 中修改 \#(3r1(  
yfBVy8Sm  
{Vc%ga|E  
PM.bgm = new PM.BGM($('#bgm-audio'), { A!([k}@=j  
  src: '/audios/pm_bgm2.mp3', zp"Lp>i  
  autoplay: false kB|j N~  
}); k7rFbrL Z  
修改地图位置 JArSJ:}  
]0`*gKA  
_ >)+ u  
在 assets/js/pm.js 中修改 8MHYk>O~{G  
W6. )7Y,  
Nm{\?  
var map = new AMap.Map('pnl-map',{ nXgnlb=  
  zoom: 17,  %2 A-u  
  center: [115.977634, 29.709759] "N"$B~W*  
}); Vu @2  
var marker = new AMap.Marker({ VrV )qfG  
  position: map.getCenter() PI KQ}aq=  
}); m:kXr^!D  
marker.setMap(map); Ttr)e:  
l@;UwnI  
N$\'X<{  
// 设置label标签 vrRbUwL!  
marker.setLabel({ t)#8r,9c  
  offset: new AMap.Pixel(-75, -30), [i[*xf-B  
  content: "PM Infinity婚礼于10月5日晚" r[doN{%  
}); yyp0GV.x  
center 修改中心坐标,content 修改坐标说明的文字。 K|i:tHF]@  
06ndW9>wD)  
$Hw w  
修改婚礼日期 AcZ{B<  
LtIR)EtB]  
Rz sgPk  
在 assets/js/home.js 中修改 6MCLm.L  
5j8aMnvs  
sj9j 47y  
var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000)); / @v V^!#1  
彩蛋 Hw0S/ytY  
M =/+q  
gxKL yZO!  
在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。 ^sF/-/ {?U  
0W_olnZ  
Zz,j,w0 Z  
微信调试 DpRGPs  
1. 申请开发测试号 aru;yR  
v}cTS@0  
?l> <?i  
不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。 u=6LPwiI  
jv ;8Mm  
w@![rH6~F  
扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。 {4F=].!  
/` ;rlH*  
]$7yB3S,B  
2. 设置网页服务授权的回调域名 N*1{yl76x  
gzMp&J  
vE~>9  
在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337 Jkx_5kk/\  
>;K!yI?0  
5cF7w  
3. 修改项目中的配置文件 Y 9}ga4  
N,3 )`Vm  
v:IpZ;^  
module.exports.weixin = { On~w`  
  // 微信公众号相关设置 0Yk$f1g  
  appid: '第 1 步拿到的 appID', 9Ai 3p  
  secret: '第 1 步拿到的 appsecret', 20,}T)}Tm  
  // 微信公众号设置的回调地址 6M#}&Gv  
  redirectUri: 'http://第 2 步设置的回调域名/home/resolve' TpGnSD  
}; Z ~3  
4. 使用微信 web 开发者工具测试 y$K[ArqX  
\S_o{0ZY}  
t" $#KP<  
下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。 jmBsPSGIC  
[*K.9}+G_  
0sP*ChY5S  
项目地址:https://github.com/iammapping/wedding cK1 Fv6V#  
D &Bdl5g  
[ 此帖被寒喵在2018-12-31 23:18重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
验证问题: 61 - 38 = ?
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)