情人节用来给女朋友送礼物的抽奖小工具

每日分享 7个月前 虾米
346 0

由@kkkyrieliu程序员开发的小工具,用来给女朋友送礼物的抽奖小工具,反馈非常不错

  1. 支持自定义页面文案
  2. 支持自定义礼物
  3. 支持指定中奖的礼物

扫码查看 demo

情人节用来给女朋友送礼物的抽奖小工具
(仅支持微信内访问,请用微信扫描二维码查看示例)

使用方式(手把手教学)

如果是前端程序员应该不需要怎么教了,但还是写了非常详细的使用指南( README )给有需要的非前端专业人员。

Giftie 是一个用来搞定「送礼问题」的终极解决方案
采用「自定义文案」+「自定义礼物」+「抽奖」的形式,让礼物的接收方(母亲/妻子/女友)感受到来自于你的真心和爱意。

使用指引和源代码都在下面这个地址里了:
项目地址:https://github.com/KKKyrie/giftie

Giftie 将一切可以 DIY 的变量都放在了配置文件 gift.setting.js 中,每个字段上都标记了详细的注释,这里我们可以快速的过一下关键字段:

// 控制项目全局状态的关键 key,如非特殊情况或覆盖使用,则不用修改
export const GLOBAL_KEYS = {
  EXIST_KEY: \'HAS_GIFT\',
  NAME_KEY: \'GIFT_NAME\',
  IMAGE_KEY: \'GIFT_IMAGE_URL\',
};

// 是否允许对方在抽奖结束后重新抽奖
// 建议调试的时候保留,给对方使用时去掉
export const IS_SHOW_RESTART = false;

// 首页配置(主要是文案,暂不支持修改主题)
export const homeConfig = {
  // 主标题
  title: \'520送礼抽奖\',
  // 留言,数组的每一项代表一行
  messages: [
    { key: \'a\', wording: \'这是第一行文案\', },
    { key: \'s\', wording: \'这是第二行文案\', },
    { key: \'d\', wording: \'然后,这里是第三行文案\', },
  ],
  // 最终解释权归属人
  owner: \'XXX\',
  // 抽奖转盘的动画时间,单位毫秒
  timeout: 5000,
  // 指定中奖的礼物下标,从 0 开始
  targetGiftIndex: null,
};

// 礼物清单
// 字段 key 不用改,只要保证每个礼物的 key 字段是不同的即可
// 图片放在 public/images 中,建议是正方形,否则影响视觉体验
// name 是礼物的全称;alias 是礼物的简称(用来显示在抽奖方格里)
export const gifts = [
  { key: \'q\', name: \'Dior双飞套装\', alias: \'Dior双飞\', image: \'/images/1.png\',  description: \'「经典迷人色彩,彰显奢华魅力」\' },
  { key: \'w\', name: \'腾讯视频终身VIP\', alias: \'VIP\', image: \'/images/2.png\',  description: \'“为你承包一辈子的 VIP”\' },
  { key: \'e\', name: \'兰蔻小黑瓶套装\', alias: \'小黑瓶套装\', image: \'/images/3.png\',  description: \'「强维稳,快修护」\' },
  { key: \'r\', name: \'520红包\', alias: \'520\', image: \'/images/6.png\',  description: \'“想给你唱一百首情歌”\' },
  { key: \'t\', name: \'Dior星空套装\', alias: \'Dior星空\', image: \'/images/5.png\',  description: \'「百变唇妆,精美雕琢」\' },
  { key: \'y\', name: \'1314红包\', alias: \'1314\', image: \'/images/6.png\',  description: \'“从今往后,我都会在你旁边”\' },
  { key: \'u\', name: \'UR购物券:¥1,000\', alias: \'UR\', image: \'/images/7.png\',  description: \'“UR!买!”\' },
  { key: \'i\', name: \'Dyson美发套装\', alias: \'戴森\', image: \'/images/8.png\',  description: \'「不同造型需求,全面满足」\' },
];

注意,配置礼物时请自行找礼物图片,为了保障视觉体验,请选用正方形且已经过体积压缩的图片。

修改完配置检查没问题后,就可以上线了。
Build 后的文件直接放在自己的服务器上即可。如果没有自己的服务器,推荐使用腾讯云的静态网站托管服务

版权声明:虾米 发表于 2022年3月6日 am6:01。
转载请注明:情人节用来给女朋友送礼物的抽奖小工具 | 四粒米导航

相关文章

暂无评论

暂无评论...