health901 / uni-luck-draw

🍟🍟🍟 uni-app【大转盘 / 九宫格】抽奖插件，🚧 目前支持 H5 / App / 微信 / QQ 小程序，其中 APP 端的 IOS 较为流程, 安卓和 QQ 小程序比较卡顿

uni-luck-draw 抽奖组件

一个基于 uni-app 的 ( 大转盘 / 九宫格 ) 抽奖插件

官方文档 & Demo演示

中文：https://100px.net/usage/uni-app.html

• 在 js / jq 中使用 lucky-canvas

• 在 vue 中使用 vue-luck-draw

• 在 react 中使用 react-luck-draw

• 在 uni-app 中使用 uni-luck-draw

• 在 taro 中使用 taro-luck-draw

• 在 微信小程序 中使用 mini-luck-draw

在 uni-app 中使用

1. 安装插件

• 你可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499

• 也可以选择通过 npm / yarn 安装

# npm 安装：
npm install uni-luck-draw

# yarn 安装：
yarn add uni-luck-draw

2. 引入并使用

<view>
  <!-- 大转盘抽奖 -->
  <LuckyWheel
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <LuckyGrid
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
</view>

// npm 下载会默认到 node_modules 里面，直接引入包名即可
import LuckyWheel from 'uni-luck-draw/lucky-wheel' // 大转盘
import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格

// 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
// import LuckyWheel from '@/components/uni-luck-draw/lucky-wheel' // 大转盘
// import LuckyGrid from '@/components/uni-luck-draw/lucky-grid' // 九宫格

export default {
  // 注册组件
  components: { LuckyWheel, LuckyGrid },
}

3. 我提供了一个最基本的 demo 供你用于尝试

由于 uni-app 渲染 md 的时候会出问题，所以我把 demo 代码放到了文档里

• https://100px.net/document/uni-app.html

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star ☜(ﾟヮﾟ☜)

友情链接

• 🎁 h5-Dooring 一款功能强大，高可扩展的H5可视化编辑器