先是在uni-app的插件庫(kù)找了N個(gè)插件杂数,都會(huì)報(bào)錯(cuò)??
canvasToTempFilePath: fail canvas is empty
搜了各種解決方案瘸洛,都不行揍移,只能棄用uni-app的插件,可能是因?yàn)榘姹镜脑蚍蠢撸〕绦虻腸anvas已經(jīng)改成了原生的canvas
可以在uni-app項(xiàng)目中引用原生的wxml-to-canvas
1.官網(wǎng)鏈接:https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/wxml-to-canvas.html
2.打開代碼片段代碼片段
3.在程序中新建wxcomponents文件夾那伐,將代碼片段中的miniprogram_npm下的widget-ui和wxml-to-canvas兩個(gè)文件夾復(fù)制進(jìn)去
4.將/wxcomponents/wxml-to-canvas/index.js
中的module.exports = require("widget-ui");
引用路徑改成module.exports = require("../widget-ui/index.js");
5.配置pages.json(這樣uni-app才會(huì)打包wxcomponents)
"pages": [
{
"path": "components/articleShare",
"style": {
"usingComponents": {
"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
}
}
}
wxml-to-canvas的使用問題
1. 要在彈出框unipopup中展示canvas有問題
由于需求是要在彈出框中展示canvas,但是wxml-to-canvas
是在生命周期attached
中就初始化了canvas信息石蔗,但此時(shí)canvas元素是彈出框被隱藏(可見源碼/wxcomponents/wxml-to-canvas/index.js
第160行罕邀,或搜索attached
)
解決辦法:
思路:等對(duì)話框彈出后,再初始化canvas
- 在
methods
中添加initCanvas
方法养距,將上述attatched
中的代碼剪切進(jìn)去 - 在彈出對(duì)話框的方法中調(diào)用如下
open() {
uni.showLoading();
//先彈出對(duì)話框
this.$refs.popup.open("center");
this.$nextTick(() => {
//等對(duì)話框展示后诉探,調(diào)用剛剛添加的方法
this.$refs.widget.initCanvas();
// 延時(shí),等canvas初始化
setTimeout(() => {
this.renderToCanvas();
}, 500); attached
});
},
2. wxml-to-canvas要注意的一些問題
- 只能畫view棍厌,text肾胯,img
- 每個(gè)元素必須要設(shè)置寬高
- 默認(rèn)是flex布局,可以通過
flexDirection: "column"
來改變排列方式
3. 如何畫出自適應(yīng)的canvas(由于默認(rèn)是px單位,所以要改源代碼來實(shí)現(xiàn)自適應(yīng))
思路:用屏幕的寬度/設(shè)計(jì)圖的寬度
第一步,修改/wxcomponents/wxml-to-canvas/index.js
- 在
attached
生命周期中,獲取設(shè)備的寬度,拿到屏幕寬度比率
lifetimes: {
attached() {
const sys = wx.getSystemInfoSync();
//拿到設(shè)備的寬度牲览,跟設(shè)計(jì)圖寬度的比例
const screenRatio = sys.screenWidth / 375;
this.setData({
screenRatio,
width: this.data.width * screenRatio,
height: this.data.height * screenRatio,
});
},
},
- 修改
initCanvas
方法中的代碼
// canvas.width = res[0].width * dpr;
// canvas.height = res[0].height * dpr;
//以上代碼改為如下代碼
canvas.width = this.data.width * dpr;
canvas.height = this.data.height * dpr;
- 修改
renderToCanvas
方法
//const { wxml, style } = args;
//改為
const { wxml, fnGetStyle } = args;
const style = fnGetStyle(this.data.screenRatio)
第二步庸毫,修改傳入renderToCanvas
的sytle
對(duì)象改為函數(shù)fnGetStyle(屏幕的寬度比率)
const fnGetStyle = (screenRatio) => {
return {
share: {
backgroundColor: "#fff",
//所有數(shù)值都要拿設(shè)計(jì)圖上的數(shù)值再乘以屏幕寬度比率
width: 320 * screenRatio,
height: 395 * screenRatio,
padding: 24 * screenRatio,
},
...
}
The EndshareImage