jclarry
jclarry
  • 发布:2019-03-25 13:51
  • 更新:2021-06-18 16:32
  • 阅读:2865

【报Bug】uniapp canvas无法动态canvas_id

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)
[内容]

重现步骤

[步骤] 当我在canvas标签中动态加载canvas_id时无法正常创建canvas对象。但是我使用微信小程序进行同样操作可以。下面贴出两遍代码比较。

//小程序代码  
Page({  
  data: {  
    cid:"aa"  
  },  
  onLoad: function () {  
    const bb = wx.createCanvasContext('bb')  
    this.draa(bb);  
    const ctx = wx.createCanvasContext('aa')  
    this.draa(ctx);  
  },  
  draa(ctx) {  
    ctx.setFontSize(20)  
    ctx.fillText('Hello', 20, 20)  
    ctx.fillText('MINA', 100, 100)  

    ctx.draw()  
  }  
})  
<canvas canvas-id="bb"></canvas>  
<view>----------分隔线-----------</view>  
<canvas canvas-id="{{cid}}"></canvas>  

//uniapp代码  
<template>  
    <view class="content">  
        <!-- <board id="board" board_id="hello"></board> -->  
        <canvas canvas-id="bb"></canvas>  
        <view>----------分隔线-----------</view>  
        <canvas :canvas-id="cid"></canvas>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                cid: "aa",  
            }  
        },  
        onLoad() {  
            const bb = uni.createCanvasContext("bb")  
            this.draa(bb);  
            const aa = uni.createCanvasContext("aa")  
            this.draa(aa);  

        },  
        methods: {  
            draa(ctx){  
                ctx.setFontSize(20)  
                ctx.fillText('Hello', 20, 20)  
                ctx.fillText('MINA', 100, 100)  

                ctx.draw()  
            }  
        }  
    }  
</script>

[结果]
微信小程序可以渲染出两个,但是uniapp动态属性的就没有办法渲染了。
[期望]
请看附件图片

IDE运行环境说明

[HBuilder 或 HBuilderX] HbuilderX
[IDE版本号] 1.7.0.20190314
[mac版本号] 10.14.3

uni-app运行环境说明

[运行端是h5或app或某个小程序] 微信小程序
[运行端版本号] 1.02.1902010

联系方式

[QQ] 75811329

2019-03-25 13:51 负责人:无 分享
已邀请:
jclarry

jclarry (作者)

没有人关注这个问题?

DCloud_uniAD_HDX

DCloud_uniAD_HDX

HBuilderX 1.7.2 以上 在manifest.json 中配置

"mp-weixin": { /* 小程序特有相关 */  
    "usingComponents": true //启用新框架编译,默认为false    
}
h***@163.com

h***@163.com

遇到同样的问题,楼主解决了么

该问题目前已经被锁定, 无法添加新回复