开源多端小程序上使用插件制作大转盘，九宫格

星河滚烫，你是人间理想。人海冷漠，你是人间炽热。皓月清凉，你是人间曙光。万物生长，你是四月朝阳。世间糜漫，你是明月繁星。满眼星河，你是清梦满船。万世浮沉，你是人间归遍

今天突然看到一个问题是说如何在小程序上使用插件制作大转盘，九宫格互动内容；起初我是不敢讨论的，因为技术拳拳不够

突然想到很久之前有某网站可以在线配置互动内容，但是源码又不在自己手里，后面划水看到有一个开源的插件

上手

以微信端为学习对象，建立一个项目后打开调试器下的终端

输入

npm init -y

在输入 安装 npm 包

npm install @lucky-canvas/mini@latest

安装成功之后目录会多出一个目录node_modules，在菜单栏中找到工具—构建NPM，他会多出一个目录miniprogram_npm

在首页引入json文件引入

{
  "usingComponents": {
    "lucky-wheel": "/miniprogram_npm/@lucky-canvas/mini/lucky-wheel/index",
    "lucky-grid": "/miniprogram_npm/@lucky-canvas/mini/lucky-grid/index",
    "slot-machine": "/miniprogram_npm/@lucky-canvas/mini/slot-machine/index"
  }
}

wxml中使用

<view>
  <lucky-wheel
    id="myLucky"
    width="600rpx"
    height="600rpx"
    blocks="{{blocks}}"
    prizes="{{prizes}}"
    buttons="{{buttons}}"
    bindstart="start"
    bindend="end"
  />
</view>

js中使用

const app = getApp()
Page({
  data: {
    blocks: [{ padding: '13px', background: '#617df2' }],
    prizes: [
      { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
      { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
      { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
    ],
    buttons: [
      { radius: '50px', background: '#617df2' },
      { radius: '45px', background: '#afc8ff' },
      {
        radius: '40px', background: '#869cfa',
        pointer: true,
        fonts: [{ text: '开始\n抽奖', top: '-20px' }]
      },
    ],
  },
  start () {
    // 获取抽奖组件实例
    const child = this.selectComponent('#myLucky')
    // 调用play方法开始旋转
    child.lucky.play()
    // 用定时器模拟请求接口
    setTimeout(() => {
      // 3s 后得到中奖索引 (假设抽到第0个奖品)
      const index = 0
      // 调用stop方法然后缓慢停止
      child.lucky.stop(index)
    }, 3000)
  },
  end (event) {
    // 中奖奖品详情
    console.log(event.detail)
  }
})

跑起来之后长这样

学习

文档中有很多修改文档以及案例，但是没有小程序代码所以只能动手修改，我们修改开始抽奖指针

我们只需要在js中添加imgs属性即可

但是这里有要注意的地方是图片地址，他的目录层级要从下方目录开始算

miniprogram_npm/@lucky-canvas/mini/lucky-wheel

学习结束

地址

git：https://gitee.com/ldq404/lucky-canvas

文档：https://100px.net/docs/wheel.html