vue框架开发，嵌套到苹果手机上的webview中，老虎机中的奖品图片显示不出来

[BingGuanqi]

• 你当前是什么框架(必填)：vue

• 你使用的是哪个包(必填)：@lucky-canvas/vue

• 你当前插件的版本(必填)：0.1.11

• 当前环境是小程序还是浏览器(选填)：app端嵌套的webview

• 详细描述你的bug：老虎机：苹果手机上不显示奖品图片，安卓手机上没问题

• 问题代码(重要)：

// 代码开始, 别再放歪了行吗
width: '4.7rem',
height: '2.4rem',
blocks: [
  { padding: '10px', background: '#869cfa' },
  { padding: '10px', background: '#e9e8fe' },
],
slots: [
  { order: [0, 1, 2, 3, 4, 5, 6], speed: defaultSpeed },
  { order: [1, 2, 3, 4, 5, 6, 0], speed: defaultSpeed },
  { order: [2, 3, 4, 5, 6, 0, 1], speed: defaultSpeed },
],
prizes: [
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-shouji.png'),
      },
    ],
  },
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-gangmeigu-vip.png'),
      },
    ],
  },
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-jifen.png'),
      },
    ],
  },
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-jinniu-ji.png'),
      },
    ],
  },
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-jinniu-nian.png'),
      },
    ],
  },
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-kweb.png'),
      },
    ],
  },
  {
    imgs: [
      {
        width: '1.26rem',
        height: '1.66rem',
        src: require('../assets/images/prize-zhangtingzhushou.png'),
      },
    ],
  },
],
defaultConfig: {
  rowSpacing: '0.6rem',
  colSpacing: '0.1rem',
},
// 代码结束

[buuing]

估计报错了, canvas超出最大限制

[buuing]

奇怪的是, 6个奖品, 应该不至于超长才对, 你是苹果几啊

[buuing]

rowSpacing 调小点试试

[BingGuanqi]

iphoneX和iphone 6p 都试了 都不行 = = 我还特意把官网上的配置拿下来试了下，配置如下：

width: '240px',
height: '180px',
blocks: [
  { padding: '10px', background: '#869cfa' },
  { padding: '10px', background: '#e9e8fe' },
],
slots: [
  { speed: 1 },
  { speed: 4 },
  { speed: 20 },
],
prizes: [
  {
    imgs: [
      {
        width: '100%',
        height: '100%',
        src: 'https://unpkg.com/[email protected]/demo/cell-80.png'
      },
      {
        width: '60%',
        top: '20%',
        src: 'https://unpkg.com/[email protected]/demo/prize.png'
      }
    ]
  },
  {
    imgs: [
      {
        width: '100%',
        height: '100%',
        src: 'https://unpkg.com/[email protected]/demo/cell-80.png'
      },
      {
        width: '60%',
        top: '20%',
        src: 'https://unpkg.com/[email protected]/demo/active.png'
      }
    ]
  }
],
defaultConfig: {
  rowSpacing: '10px',
  colSpacing: '10px'
}

这个配置在iphone上还是显示不出来奖品图片。。。 安卓上好好的。。

[buuing]

??? 你是说, 你没报错, 只是奖品图片没显示?

[BingGuanqi]

是的 没有报错 就是图片没显示

[BingGuanqi]

如果设置了背景色 背景色也可以正常显示，调用开始转动后，也可以正常转，就是奖品图片出不来。。。

[buuing]

那是挺奇怪的, v2还是v3

[BingGuanqi]

vue2.6

[buuing]

你试试大转盘引入图片, 在ios上显示吗

[BingGuanqi]

大转盘上可以显示诶

[buuing]

唔...老虎机使用了离屏canvas, 该不会是你这个weiview容器有bug吧哈哈哈

[BingGuanqi]

额... 那有没有没有用离屏canvas的版本 我试一下 = =

[buuing]

大转盘和九宫格就是没用离屏canvas的抽奖

[BingGuanqi]

但现在产品要用老虎机的形式。。。那我是不是只能放弃用这个库 自己手撸了。。 感觉时间来不及了ggg

[buuing]

我感觉可能是兼容问题, 你那个webview容器的兼容有问题

[BingGuanqi]

webview容器是ios客户端那边提供的 也找不到资源帮忙排查 自己手撸个老虎机的逻辑靠谱嘛。。

[buuing]

关键是我也测不了你们那个webview, 要不你试试源码包lucky-canvas看看老虎机显示吗

[BingGuanqi]

引入了lucky-canvas 版本是1.7.26 我看老虎机的代码样例 引入时是 import { LuckyCanvas } from 'lucky-canvas'; 但是报错了 说lucky-canvas里没有 export LuckyCanvas

[buuing]

代码不对, 老虎机是SlotMachine

import { SlotMachine } from 'lucky-canvas';

[BingGuanqi]

试了一下 还是在网页和安卓手机上能正常显示，ios上不行。。

[buuing]

嗯, 那就确认是兼容问题了

[BingGuanqi]

是库的兼容问题还是我这边ios webview的兼容问题呀

[buuing]

1. 有可能是webview对离屏canvas的兼容有问题
2. 也可能是我在老虎机里使用了某些es6/7的语法, 导致 webview 不识别这个语法

[buuing]

之前一个网易app的webview就这样....不识别数组的includes方法报错

至于你这个问题在哪, 恐怕还得慢慢调试才能得出结论

[BingGuanqi]

好的吧 感谢帮忙排查~

[woshicixide]

同碰到一样现象的问题，共3个奖品，在iphone微信小程序里的webview，老虎机图片展示不了，关键就一截图，现在用户也联系不上，连哪个机型都无法确认，难受，感觉只能等下个用户来反馈了