微信小程序开发过程中,使用painter组件,在将json数据导入之后,画面没有渲染,但是不报错,请问问什么?
具体情况如下:
样式代码card.js:
export default class LastMayday {
palette(params) {
return ({
"width": "595px",
"height": "842px",
"background": "#F2F1F5",
"views": [{
"type": "text",
"text": "扫码关注",
"css": {
"color": "#ff0000",
"background": "rgba(0,0,0,0)",
"width": "200px",
"height": "43.89999999999999px",
"top": "4px",
"left": "1115px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "1px",
"borderColor": "#000000",
"shadow": "10 10 5 #888888",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "扫码关注",
"css": {
"color": "#ff0000",
"background": "rgba(0,0,0,0)",
"width": "200px",
"height": "43.89999999999999px",
"top": "4px",
"left": "1115px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "1px",
"borderColor": "#000000",
"shadow": "10 10 5 #888888",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "image",
"url": `${params.imgurl}`,
"css": {
"width": "568.01px",
"height": "475.27px",
"top": "17px",
"left": "11.189999999999998px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": "",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "57px",
"height": "185.89999999999998px",
"top": "540px",
"left": "541.5px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "130px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "187.59000000000003px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "webfontzkxw",
"textAlign": "left"
}
},
{
"type": "text",
"text": "",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "100px",
"height": "185.89999999999998px",
"top": "709px",
"left": "486px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "130px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "187.59000000000003px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "webfontzkxw",
"textAlign": "left"
}
},
{
"type": "text",
"text": `${params.name}`,
"css": {
"color": "#000000",
"background": "rgba(0,0,0,0)",
"width": "486px",
"height": "24.86px",
"top": "409px",
"left": "60px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "22px",
"fontWeight": "normal",
"maxLines": "22",
"lineHeight": "24.42px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "center"
}
},
{
"type": "text",
"text": `${params.note}`,
"css": {
"color": "#1F6CC0",
"background": "rgba(0,0,0,0)",
"width": "250px",
"height": "93.88px",
"top": "603px",
"left": "42px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "20px",
"fontWeight": "normal",
"maxLines": "6",
"lineHeight": "31.080000000000002px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "扫码关注",
"css": {
"color": "#1F6CC0",
"background": "rgba(0,0,0,0)",
"width": "30px",
"height": "175.10999999999996px",
"top": "530.94px",
"left": "519px",
"rotate": "0.06",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "normal",
"maxLines": "7",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "rect",
"css": {
"background": "#f8d4d4",
"width": "595px",
"height": "60px",
"top": "940px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"shadow": "",
"color": "#f8d4d4"
}
},
{
"type": "rect",
"css": {
"background": "#1F6CC0",
"width": "595px",
"height": "60px",
"top": "782px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"shadow": "",
"color": "#1F6CC0"
}
},
{
"type": "qrcode",
"content": `${params.qrcodecon}`,
"css": {
"color": "#000000",
"background": "#ffffff",
"width": "156.5px",
"height": "156.5px",
"top": "540px",
"left": "332px",
"rotate": "0",
"borderRadius": "7.825px"
}
},
{
"type": "text",
"text": "石林斗牛平台提供技术支持",
"css": {
"color": "#ffffff",
"background": "rgba(0,0,0,0)",
"width": "595px",
"height": "28.599999999999994px",
"top": "800px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "20px",
"fontWeight": "normal",
"maxLines": "1",
"lineHeight": "28.860000000000007px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "center"
}
},
{
"type": "text",
"text": "小贴士",
"css": {
"color": "#1F6CC0",
"background": "rgba(0,0,0,0)",
"width": "200px",
"height": "42.89999999999999px",
"top": "540px",
"left": "45px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#C87756",
"shadow": "",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "bold",
"maxLines": "2",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "webfontzk",
"textAlign": "left"
}
},
{
"type": "text",
"text": `${params.time}`,
"css": {
"color": "#000000",
"background": "rgba(0,0,0,0)",
"width": "595px",
"height": "22.88px",
"top": "467px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "16px",
"fontWeight": "normal",
"maxLines": "1",
"lineHeight": "23.088000000000005px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "center"
}
},
{
"type": "text",
"text": "地址"+`${params.site}`,
"css": {
"color": "#000000",
"background": "rgba(0,0,0,0)",
"width": "595px",
"height": "46.384px",
"top": "440px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "16px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "23.088000000000005px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "center"
}
}
]
});
}
}
wxml代码:
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000" />
js代码:
// import Poster from '../../template/mypainter/painter/painter'
// import Poster from '../../../../miniprogram-4/miniprogram/template/mypainter/painter/painter'
import card from '../../palette/card';
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let params = {
"imgurl":"https://img-mid.csdnimg.cn/release/static/image/mid/ask/726634900966197.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit",
"name":"测试比赛",
"note":"1. "+1+"\n2. "+2+"\n3. "+3+"",
"qrcodecon":"二维码内容",
"time":"2022年12月32日12:12-2022年12月12日12:12",
"site":"dqwwwwwwwwwwwwwwwwwwwwdwqdqwd",
}
this.setData({
template: new card().palette(params)
});
},
onImgOK(e){
let that = this;
that.setData({imagePath:e.detail.path})
console.log("成功",e.detail.path)
}
})
附图片: