開源多端小程序上使用插件制作大轉盤，九宮格

星河滾燙，你是人間理想。人海冷漠，你是人間熾熱。皓月清涼，你是人間曙光。萬物生長，你是四月朝陽。世間糜漫，你是明月繁星。滿眼星河，你是清夢滿船。萬世浮沉，你是人間歸遍

今天突然看到一個問題是說如何在小程序上使用插件制作大轉盤，九宮格互動內容；起初我是不敢討論的，因為技術拳拳不夠

突然想到很久之前有某網站可以在線配置互動內容，但是源碼又不在自己手里，后面劃水看到有一個開源的插件

上手

以微信端為學習對象，建立一個項目后打開調試器下的終端

輸入

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