乐趣区

关于前端:bingoNutUI-抽奖组件库来了

jiezi 
NutUI-Bingo 是由 NutUI 前端团队基于 Vue 3.0 打造的挪动端组件库，实用于营销流动和小游戏场景的抽奖组件库。
源码领先看：https://github.com/jdf2e/nutui-bingo
bingo 首页：https://nutui.jd.com/bingo

开发背景

随着业务需要的迭代更新，营销场景也越来越丰盛，很多产品通过设定的一些玩法来与用户交换，减少用户的粘性，进步用户的转化率。比方新注册的用户，在新人专区会有相似的流动工作类的互动；日常促销，在结算实现商品后进行抽奖；逢年过节等推出的促销流动 … 诸如此类场景下都须要与用户“交换”。

为丰盛这种场景的需要，让用户玩的更“有意思”，咱们将营销场景的案列及玩法进行梳理剖析。业务倒退丰盛了咱们的技术和组件，咱们也对业务进行反哺，于是整合了一套笼罩大多数场景的抽奖组件库 — NutUI-Bingo。

开发设计

咱们本着提效的理念进行开发，心愿可能笼罩更多的场景需要，技术上能与时俱进。所以咱们的架构与 NutUI 保持一致，并沿用其脚手架。

咱们对组件优先进行 Vue3 版本的开发，保障组件稳固的状况下逐步适配微信小程序，保障组件的兼容适配，现阶段咱们布局并开发了 12 个组件。

每个组件用户可进行更自在的配置，可设置奖品池、中奖奖品、自定义款式等，提供开始、完结等回调函数，当然也包含一些动画的工夫、运行频率等。

咱们尽可能具体地介绍组件的应用阐明，包含组件的引入办法，组件反对的 api 等。为了更直观的介绍组件应用办法以及成果，每个组件咱们都提供了简略实现的 demo，让开发者能更疾速的应用组件的各项性能。

轻松上手

bingo 组件的应用与其余组件库的应用形式一样，能够应用 npm 或者 yarn 的模式装置。

npm i @nutui/nutui-bingo

下载实现之后，记得在入口文件，引入应用 

import {createApp} from "vue";
import App from "./App.vue";
import NutBig from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
createApp(App).use(NutBig).mount("#app");

下面的形式是全副引入，咱们也能够按需加载，应用特定的组件。

import {createApp} from "vue";
import App from "./App.vue";
import {Turntable} from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
createApp(App).use(Turntable).mount("#app");

玩转小游戏

转转转~~

咱们先来玩一个抽奖大转盘，首先咱们在页面中引入并应用。

import {createApp} from 'vue';
import {Turntable} from '@nutui/nutui-bingo';
const app = createApp();
app.use(Turntable);

在页面中间接应用 

<nutbig-turntable
  class="turntable"
  :prize-list="prizeList"
  :turns-number="turnsNumber"
>
</nutbig-turntable>

其中 prize-list 是咱们的奖品列表，以数组的模式进行配置；turns-number 是设置咱们的转盘要滚动多少圈进行，还有 turns-time 滚动工夫的设置，两者可联合应用。

const prizeList = ref([
  {
    id: 'xxx',
    prizeName: 'xxxx',
    prizeImg: '图片链接'
  },
]);

翻翻翻~~

翻牌抽奖也是比拟常见的玩法，能够配置奖品名称，奖品图片，翻牌背景图片等，还反对开发者自定义设置用户是否中奖，提供翻牌点击事件，以及用户点击两头开始和返回事件，比方中奖 prize-id 的设置。

猜猜猜~~

传统戏法“三仙归洞”，大家并不生疏，明天咱们也能够表演一番了。

咱们也能够神不知鬼不觉的移形换位，turns-number 灵便调整替换次数，也能够管制碗的挪动速度 turns-frequency，设置中奖地位也是必须的 prize-index，同时开始、完结回调也可做响应的逻辑解决。

当初，你是不是想要理解更多的组件玩法，还在等什么，快来试试吧 👉 https://nutui.jd.com/bingo/

咱们的价值

效率晋升

绝对这种场景下的需要开发是比拟快的，可能升高开发成本，咱们为大家提供了开箱即用的组件和性能，如果感觉不合乎你的业务需要，能够向咱们提出你的倡议，或者退出咱们一起开发。

新技术

咱们应用 Vue3 技术栈进行组件库开发，保障开发者的技术不落伍，咱们紧跟技术倒退的方向，目前组件库应用的 Vue3 开发，vite 构建工具，开发效率大幅晋升。

技术支持

如果咱们的组件库没有你想要的哪一款，那能够向咱们倡议并提出你的设计想法，咱们会依据状况为你开发一款或大家共建。

将来瞻望

NutUI-Bingo 组件库的内容会一直的迭代更新，丰盛更多的玩法。同时咱们会逐渐的适配小程序开发，让大家可能兼容更多的场景。

NutUI-Bingo 致力打造一套成熟丰盛抽奖组件库，装备良好的技术服务和灵便的可扩大能力，期待您的应用与反馈，如您喜爱，来点个 Star ❤️ 反对咱们一下吧 ~

退出移动版