更新记录

1.0.6（2025-05-26） 下载此版本

fix: 自动定位计算优化

1.0.5（2025-05-23） 下载此版本

feat: 支持配置相对定位容器containerRect配置，popover将相对这个容器进行定位计算 refactor: popover计算算法优化

1.0.4（2025-05-21） 下载此版本

feat: popover溢出处理优化-增加边界间距boundaryPadding属性

平台兼容性

uni-app(4.06)

uni-app x(4.06)

wxml2canvas

wxml-to-canvas文档

传送门

组件

render-wxml-to-canvas

需要提供两个必要属性 custom-wxml 和 custom-style，支持的标签和样式都有限制，需要查阅 wxml-to-canvas 插件。

渲染后通过 ref 访问组件示例，调用 toGenerateImage 方法生成图片。

示例

<template>
    <view>
        <render-wxml-to-canvas ref="renderWxmlRef" :custom-wxml="wxml" :custom-style="style"></render-wxml-to-canvas>
        <button open-type="share">分享</button>
    </view>
</template>

<script setup>
    import { onShareAppMessage } from '@dcloudio/uni-app';
    import { ref } from 'vue';
    const wxml = ref(`
    <view class="container" >
      <view class="item-box red">
      </view>
      <view class="item-box green" >
        <text class="text">yeah!</text>
      </view>
      <view class="item-box blue">
          <image class="img" src="https://expo.obs.cn-gdgz1.ctyun.cn/mini-app/v3/arrow1.png?v=5"></image>
      </view>
    </view>
    `)

    const style = ref({
      container: {
        width: 300,
        height: 200,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#ccc',
        alignItems: 'center',
      },
      itemBox: {
        width: 80,
        height: 60,
      },
      red: {
        backgroundColor: '#ff0000'
      },
      green: {
        backgroundColor: '#00ff00'
      },
      blue: {
        backgroundColor: '#0000ff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      text: {
        width: 80,
        height: 60,
        textAlign: 'center',
        verticalAlign: 'middle',
      },
      img: {
        width: 40,
        height: 40,
        borderRadius: 20,
      }
    })

    const renderWxmlRef = ref(null);

    onShareAppMessage((res) => {
        return {
            title: '分享',
            path: 'pages/wxml-to-canvas/wxml-to-canvas',
            promise: new Promise((resolve, reject) => {
                console.log('111')
                if (renderWxmlRef.value) {
                    renderWxmlRef.value.toGenerateImage()
                        .then(imageUrl => {
                            console.log('>>>imageUrl', imageUrl)
                            resolve({
                                title: '分享',
                                path: 'pages/wxml-to-canvas/wxml-to-canvas',
                                imageUrl,
                            })
                        }).catch(err => {
                            reject(false)
                        })
                } else {
                    reject(false);
                }
            })
        }
    })
</script>

注意

• 同一个页面不适合同时存在多个组件，容易引起canvas-id重复。
• 如果模版使用的图片资源异常，会直接中断整个流程（内部canvas绘制图片使用downloadFile执行下载）
• 部分样式不生效，具体需要查看插件说明
• canvas字体不生效，需要全局注册字体