找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小工具

关注:14

所属分类: 微信开发 微信公众号开发资源 微信小工具

微信公众号开发过程可能会用到的各种小工具,例如一些python、js写的脚本,涵盖微信支付、微信抓包、微信通信、公众号辅助等等源码下载

婚礼大屏互动,微信请柬一站式解决方案

[复制链接]
查看: 1167|回复: 8
最佳答案
0 

4

主题

4

帖子

199

积分

新人求带

积分
199
 楼主| 发表于 2017-12-12 14:35:41 | 显示全部楼层 |阅读模式
婚礼互动,让你们的婚礼飞起来

缘起

这个项目就是在我婚礼前一个月左右,心血来潮,想在婚礼上搞点事情,给大家留个深刻的印象。最终婚礼上的反响还不错,近期想着与其让这个项目尘封,倒不如开源出来,祝愿所有的 forker 有情人终成眷属。

介绍

项目分为微信端和大屏端。微信端可以作为电子请柬提前分享给大家,部署的服务器域名最好有备案,不然容易被屏蔽。大屏端是放在婚礼现场的大屏幕上,现场的宾客可以刷弹幕上墙,并且有照片播放页,迎宾页,抽奖页面。另外微信端也作为现场互动的入口,扫码签到可参与抽奖,发弹幕送祝福上大屏幕。

微信端 /:
687474703a2f2f73656c662d73746f726167652e62302e7570616979756e2e636f6d2f323031372f.png

大屏端 /wall (上下方向键切换不同屏):
687474703a2f2f73656c662d73746f726167652e62302e7570616979756e2e636f6d2f323031372f.png

安装

下载本项目
  1. > git clone https://github.com/iammapping/wedding
复制代码

到项目根目录初始化:npm install

安装 sails
  1. > npm install sails -g
复制代码

启动:sails lift,生产环境加上 --prod 参数。

配置

配置微信公众号

  1. > vi config/weixin.js
  2. module.exports.weixin = {
  3.   // 微信公众号相关设置
  4.   appid: 'xxx',
  5.   secret: 'xxx',
  6.   // 微信公众号设置的回调地址
  7.   redirectUri: 'http://xxx/home/resolve'
  8. };
复制代码

配置数据库

导入表结构

  1. mysql> create database wedding;
  2. mysql> source wedding.sql;
复制代码

修改连接参数(使用 Sequelize 替代了 Sails 框架中默认的 Waterline)
  1. > vi config/connections.js
  2. sequelizeServer: {
  3.   user: 'xxx',
  4.   password: 'xxx',
  5.   database: 'wedding',
  6.   options: {
  7.   dialect: 'mysql',
  8.   dialectOptions: {
  9.     charset: 'utf8mb4'
  10.   },
  11.   host: '127.0.0.1',
  12.   port: 3306,
  13.   logging: true,
  14.   timezone: "+08:00",
  15.   }
  16. }
复制代码

修改图片素材

微信端在 views/homepage.ejs 中修改,公告也在此文件修改
  1. <img class="disable-tilt" src="/images/1-740.jpg" data-width="1500" data-height="1000" data-center-offset="740" />
  2. ...
复制代码

  • data-width:图片宽度
  • data-height:图片高度
  • data-center-offset:图片主体中线 x 轴位置

大屏端在 assets/styles/wall.css 中修改
  1. #slide1 {
  2.   background-image: url(/images/1-740.jpg);
  3. }
  4. ...
复制代码

修改背景音乐

在 assets/js/home.js 中修改
  1. PM.bgm = new PM.BGM($('#bgm-audio'), {
  2.   src: '/audios/pm_bgm2.mp3',
  3.   autoplay: false
  4. });
复制代码

修改地图位置

在 assets/js/pm.js 中修改
  1. var map = new AMap.Map('pnl-map',{
  2.   zoom: 17,
  3.   center: [115.977634, 29.709759]
  4. });
  5. var marker = new AMap.Marker({
  6.   position: map.getCenter()
  7. });
  8. marker.setMap(map);

  9. // 设置label标签
  10. marker.setLabel({
  11.   offset: new AMap.Pixel(-75, -30),
  12.   content: "PM Infinity婚礼于10月5日晚"
  13. });
复制代码

center 修改中心坐标,content 修改坐标说明的文字。

修改婚礼日期

在 assets/js/home.js 中修改
  1. var remainDays = Math.floor((new Date(2016, 9, 5) - new Date())/(24*3600*1000));
复制代码

彩蛋

在链接中加上 ?state=present 可以直接签到在现场,可用于婚礼现场扫码签到。

微信调试

1. 申请开发测试号

不管公众号账号主体是个人还是企业,都可以通过接口测试号申请,申请好后可以拿到测试的 appID 和 appsecret。

扫码关注测试公众号,只有加入了测试用户列表才有相关的接口权限。

2. 设置网页服务授权的回调域名

在体验接口权限表 > 网页服务 > 网页帐号 >网页授权获取用户基本信息,修改授权页面回调域名,如:127.0.0.1:1337

3. 修改项目中的配置文件
  1. module.exports.weixin = {
  2.   // 微信公众号相关设置
  3.   appid: '第 1 步拿到的 appID',
  4.   secret: '第 1 步拿到的 appsecret',
  5.   // 微信公众号设置的回调地址
  6.   redirectUri: 'http://第 2 步设置的回调域名/home/resolve'
  7. };
复制代码

4. 使用微信 web 开发者工具测试

下载微信web开发者工具,微信(账号需已关注测试公众号)扫码登录该工具,然后在地址栏打开 http://127.0.0.1:1337,如果能正常授权并打开微信端首页,那就大功告成啦。

wedding-master.zip

5.86 MB, 下载次数: 37

评分

参与人数 1肥皂 +100 微币 +5 收起 理由
zhbjzhql + 100 + 5

查看全部评分

回复

使用道具 举报

最佳答案
0 

0

主题

6

帖子

53

积分

新人求带

积分
53
发表于 2017-12-12 18:02:24 | 显示全部楼层
不错@@!!!
回复

使用道具 举报

最佳答案
0 

0

主题

190

帖子

1391

积分

专家路上

积分
1391
发表于 2017-12-13 08:03:41 | 显示全部楼层
好不好用
回复

使用道具 举报

最佳答案
0 

0

主题

390

帖子

3208

积分

S1

积分
3208
发表于 2017-12-13 09:31:09 | 显示全部楼层
谢谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

11

帖子

118

积分

新人求带

积分
118
发表于 2017-12-13 10:35:42 | 显示全部楼层
淡定、淡定、淡定。。。
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

45

帖子

778

积分

专家路上

积分
778
发表于 2017-12-13 22:40:27 | 显示全部楼层

很好的创意,感谢楼主的无私分享!
回复 支持 反对

使用道具 举报

最佳答案
1 

3

主题

486

帖子

3953

积分

S1

积分
3953
发表于 2017-12-14 15:32:40 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

19

帖子

139

积分

新人求带

积分
139
发表于 2017-12-14 16:24:31 | 显示全部楼层
看看呢是什么
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

212

帖子

3884

积分

S1

积分
3884
发表于 2017-12-16 09:32:50 | 显示全部楼层

看看呢是什么
看看呢是什么
看看呢是什么
看看呢是什么
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com