使用uniapp編譯跨平臺(tái)項(xiàng)目會(huì)遇到不少兼容問(wèn)題，這里主要講canvas組件的，編譯到微信小程序會(huì)有兼容出錯(cuò)問(wèn)題，這里給講一下解決方案，希望有幫助。

常見(jiàn)問(wèn)題

draw無(wú)法繪制圖形

如果使用CanvasContext繪制，以下代碼，編譯到微信小程序上可能發(fā)現(xiàn)繪制不出來(lái)

const context = uni.createCanvasContext(canvasId,componentInstance);
//...

看canvas組件的屬性type="2d"是否有加，要去掉，因?yàn)樗?，?huì)導(dǎo)致無(wú)法繪制

<canvas canvas-id="canv" id="canv" type="2d"></canvas>

測(cè)試type="webgl"也會(huì)無(wú)法繪制

draw繪制后無(wú)回調(diào)

如果是類似以下代碼，調(diào)用draw(reserve,callback)繪制方法

draw(false, () => {
	//繪制完成后在這里執(zhí)行回調(diào)
})

調(diào)試時(shí)發(fā)現(xiàn)未執(zhí)行回調(diào)callback

這個(gè)原因未知，搜索網(wǎng)上的說(shuō)改使用以下方法看看能否解決

draw(false, setTimeout(() => {
	//這里執(zhí)行回調(diào)
	callback()
}, 258))

不建議用，編譯到其它平臺(tái)可能會(huì)報(bào)類型錯(cuò)誤

拋出錯(cuò)誤

uni.canvasToTempFilePath

這是將畫(huà)布導(dǎo)出成圖片的方法，

編譯在微信小程序上運(yùn)行報(bào)錯(cuò)內(nèi)容如下，使用uni.canvasToTempFilePath報(bào)錯(cuò)

canvasToTempFilePath:fail fail canvas is empty

這是需要多傳一個(gè)canvas，看看微信小程序的官方文檔是這樣寫(xiě)的

有個(gè)文章可以看看 canvasToTempFilePath:fail fail canvas is empty，

里面講了，組件canvas需要設(shè)置屬性type="2d"才能獲取，

而uniapp文檔上沒(méi)有說(shuō)，加這個(gè)就無(wú)法繪制…

uni.canvasGetImageData

這是獲取圖像數(shù)據(jù)的方法，

編譯在微信小程序上運(yùn)行報(bào)錯(cuò)內(nèi)容如下，使用uni.canvasGetImageData也報(bào)錯(cuò)了

canvasGetImageData:fail fail canvas is empty

需要獲取到canvas元素，然后使用它的原生方法ctx.getImageData()，代碼如下

let ctx = canvas.getContext('2d');
let data = ctx.getImageData(x,y,width,height);

uni.canvasPutImageData

這是設(shè)置圖像數(shù)據(jù)的方法，

編譯在微信小程序上運(yùn)行，使用uni.canvasPutImageData也會(huì)報(bào)錯(cuò)，

報(bào)錯(cuò)和上面的問(wèn)題一樣，都是沒(méi)有獲取到canvas造成的，

需要獲取到canvas元素，然后使用它的原生方法ctx.putImageData()，代碼如下

let ctx = canvas.getContext('2d');
ctx.putImageData(imageData,x,y);

組件canvas需要設(shè)置屬性type="2d"才能獲取canvas，
然后，draw()方法就無(wú)法繪制了，

這個(gè)2d屬性值有的要有的不要，該怎么辦呢，這是個(gè)兼容問(wèn)題，試試用條件編譯，

如把組件canvas加上屬性type=2d，就用以下代碼才能獲取canvas

uni.createSelectorQuery().in(this).select("#canv").fields({
	size:true,
	// #ifdef MP-WEIXIN
	node:true
	// #endif
},res=>{
	//res.node 就是 canvas 2d元素
	let canvas = res.node;
	//...
}).exec()

使用插件

可以看看這篇文章 微信小程序提示wx.createCanvasContext方法已廢棄的解決方案，

用上面講得已廢棄的解決方案重寫(xiě)，繪制邏輯就按照draw()的繪制原理方法實(shí)現(xiàn)即可，

zs-canvas

使用條件編譯，把編譯到微信小程序的代碼段區(qū)分開(kāi)來(lái)，

對(duì)新手來(lái)說(shuō)，若覺(jué)得使用條件編譯太麻煩，可以試試uniapp項(xiàng)目的畫(huà)布插件 zs-canvas，
將插件導(dǎo)入到自定義組件文件夾中就可以用，注意細(xì)節(jié)看說(shuō)明文檔，用法與uniapp API文檔大同小異

寫(xiě)到這里，點(diǎn)贊的人在哪呢 (?■_■)
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-784611.html

到了這里，關(guān)于【uniapp】使用canvas組件編譯到微信小程序兼容出錯(cuò)問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！