小部件常见问题 FAQ

1、DOM 操作

小部件使用了 Web Components 进行加载，小部件开发不能使用常规的 DOM 选择器 document.querySelector()等对 DOM 进行操作，否则开发时显示正常，打包后会查找不到元素。需要使用以下方式，在 index.html 标签上通过 ref 属性定义标签名，即可在 index.js 中的 mounted 函数中 通过 this.$refs.xx 访问到 DOM ，效果等同于 document.querySelector()

<div class="widget-container" ref="myContainer">
  <div class="title" ></div>
</div>

Widget({
  async mounted () {
    await this.$nextTick()
    console.log('offsetHeight', this.$refs.myContainer.offsetHeight)
  }
})

2、按需引入组件

组件和样式要在 index.js 和 index.css 中分开引入。否则在打包后，样式无法生效。例如

import OkButton from '@21cnfe/vui/dist/lib/components/ok-button/index'

index.css

@import "~@21cnfe/vui/dist/lib/components/ok-button/index.css";

3、样式文件引入

样式文件需要在 index.css 中引入，如果在 index.js 中引入打包后不生效
index.css

@import "./assets/css/index.css";

4、ECharts 、Swiper 等与 DOM 相关的组件，打包后无法正常显示问题

需要在 this.$nextTick() 后再执行代码初始化函数。
传 DOM 元素的参数，需要使用 this.$refs.xx 的形式，不能传 className 等，示例如下：
CSS 样式需要在index.css中引入，不能在js中引入，否则打包后不生效

Swiper 的使用可参考如下示例：

index.html

<div class="widget-container">
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">slider1</div>
      <div class="swiper-slide">slider2</div>
    </div>
  </div>
</div>

index.js

import Swiper from 'swiper'
Widget({
  async mounted () {
    await this.$nextTick()
    const swiper1 = new Swiper(this.$refs.swiper)
  }
})

index.css

@import "~swiper/dist/css/swiper.min.css";

5、一个卡片适配多尺寸时，获取卡片当前显示尺寸的方法

Widget({
  props: {
    size: {
      // 在开发者工具中，需手动调整卡片的 width、height 参数进行调试，
      // 在大屏运行时，会自动写入卡片实际尺寸。注意：使用 SON.stringify() 序列化
      default: () => JSON.stringify({
        width: 400,
        height: 380
      })
    }
  },
  data () {
    return {
      widgetSize: {
        width: 400,
        height: 380
      }
    }
  },
  created() {
    this.widgetSize = JSON.parse(this.size)
  }
})

小部件常见问题 FAQ