Nutui-bingo is a mobile component library built on Vue 3.0 by the NutUI front end team. It is a raffle component library suitable for marketing campaigns and mini game scenarios.Copy the code
Source preemptive look:Github.com/jdf2e/nutui…
Bingo home page:nutui.jd.com/bingo

Development background

With the iteration and update of business needs, the marketing scene is getting richer and richer. Many products communicate with users by setting some gameplay, increasing user stickiness and improving user conversion rate. For example, for newly registered users, there will be similar activities and tasks in the new area; Daily promotion, lucky draw after the completion of the settlement of goods; Festivals and other promotional activities launched… All of these scenarios require “communication” with the user.

In order to enrich the demand of such scenes and make users play more “interesting”, we combed and analyzed the case list and gameplay of marketing scenes. As the business grows and enriches our technology and components, we feed back into the business, integrating nutui-Bingo, a sweepstakes component library that covers most scenarios.

Development and design

We are in line with the concept of improving efficiency to develop, hoping to cover more scene requirements, technology can keep pace with The Times. So our architecture is consistent with NutUI’s and we use its scaffolding.

We give priority to the development of Vue3 version of the components to ensure that they are gradually adapted to wechat applet and compatible with each other under the condition of stability. At this stage, we have planned and developed 12 components.

Each component user can have more free configuration, can set the prize pool, winning prizes, custom styles, etc., provide start, end and other callback functions, of course, also including some animation time, running frequency, etc.

We go into as much detail as possible about how components are used, including how they are introduced, what apis they support, and so on. In order to more intuitive introduction to the use of components and effects, we have provided a simple implementation of each component demo, so that developers can use components more quickly.

Pick up

The Bingo component can be installed using NPM or YARN in the same way as other component libraries.

npm i @nutui/nutui-bingo
Copy the code

After downloading, remember to use the import file in the import file

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");
Copy the code

The above approach is all in, or we can load on demand, using specific components.

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");
Copy the code

Play a little game

Turn around ~ ~

Let’s start by playing a big lotto carousel, which we first introduced and used in the page.

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

Use it directly on the page

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

Where prize-list is our prize list, configured in the form of an array; The turn-number is used to set the number of turns we want to scroll to stop, and the turn-time is used to set the turn-time.

Const prizeList = ref([{id: 'XXX ', prizeName:' XXX ', prizeImg: 'XXX'},]);Copy the code

Flip flip ~ ~

Flip draw is also a common way to play, you can configure the prize name, prize picture, flip background picture, etc., but also support developers to customize the setting of whether the user wins the prize, provide the flip click event, and the user clicks on the middle start and return events, such as the winning prize-ID Settings.

Guess ~ ~

The traditional trick “three immortals return to the cave”, we are not unfamiliar, today we can also perform some.

We can also change shape and position without anyone noticing, the turn-number can flexibly adjust the exchange number, but also can control the bowl’s moving speed, the setting of the winning position is also a must prize-index, at the same time, the beginning and end of the callback can also do the logical processing of response.

Now, do you want to know more about the component play, still waiting for what, come and try 👉 nutui.jd.com/bingo/

Our values

efficiency

The requirement development in this scenario is relatively fast and can reduce the development cost. We provide you with out-of-the-box components and functions. If you feel that they do not meet your business needs, you can give us your suggestions or join us in development.

The new technology

We use Vue3 technology stack for component library development to ensure that the technology of developers does not fall behind. We closely follow the direction of technological development. At present, Vue3 development and Vite construction tools are used for component library development, which greatly improves the development efficiency.

Technical support

If our component library does not have what you want, you can suggest to us and put forward your design ideas, and we will develop one for you or build it together according to the situation.

future

Nutui-bingo component library content will be constantly updated to enrich more gameplay. At the same time we will gradually adapt to small program development, so that you can be compatible with more scenarios.

Nutui-bingo is committed to creating a mature and rich lottery component library, equipped with good technical services and flexible extensible capabilities, looking forward to your use and feedback, if you like, to the Star ❤️ to support us