更新记录

v0.0.10_4(2022-07-18) 下载此版本

  • 优化某些情况下图片绘制跨域报错

v0.0.10_3(2022-05-30) 下载此版本

  • 更新文档说明

v0.0.10_2(2022-05-30) 下载此版本

  • 打个广告~
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×


logo

lucky-canvas 抽奖插件

一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件

适配框架 npm下载量 CDN使用量
JS / JQ 中使用 downloads
Vue 中使用 downloads
React 中使用 -
UniApp 中使用 -
Taro3.x 中使用 -
微信小程序 中使用 -


官方文档 & Demo演示

中文https://100px.net

EnglishIf anyone can help translate the document, please contact me ldq404@qq.com


在 uni-app 中使用

1. 安装插件

# npm 安装:
npm install @lucky-canvas/uni

# yarn 安装:
yarn add @lucky-canvas/uni


2. 引入并使用

<view>
  <!-- 大转盘抽奖 -->
  <LuckyWheel
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <LuckyGrid
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
</view>
// npm 下载会默认到 node_modules 里面,直接引入包名即可
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格

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

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


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

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


4. 补充说明


5. 常见问题

  1. 转盘层级太高了, 我的弹窗盖不住怎么办?

答: 因为小程序里canvas是原生组件顶层渲染, 我无法控制canvas的层级, 如果你想盖住它也肯简单, 你可以百度搜索<cover>组件

  1. 你这些素材, 图片组件从哪下载?

答: 官网里的任何图片素材, 所使用到的图片资源均为学习交流使用, 请勿将其用于商业用途, 由此产生的任何商业纠纷我这边概不负责

  1. xxx属性怎么使用? xxx方法怎么调用?

答: 自己去看文档, 不然难道要我把代码给你写好吗?

  1. 这个属性的效果与官网的描述不一致?

答: 可能有bug, 你可以去github上的issues去提问 (请认真填写模板)

  1. 为什么这个插件不支持app和其他小程序

答: 没时间, 但是希望志同道合的同学来一起参与uniapp的兼容开发


作者留言: 为了使我自己保持心情愉悦, 低于5星的提问我用浏览器插件都屏蔽了

不要赞赏!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问