Waitme9 2022-11-21 23:41 采纳率: 79.4%
浏览 9
已结题

微信小程序开发使用painter组件,json数据导入之后没有渲染

微信小程序开发过程中,使用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)
  }
})

附图片:

img

  • 写回答

1条回答 默认 最新

  • hou1988426 2022-11-23 15:14
    关注
    
    data: {
        template:null,  //表示定义空对象
        imagePath:‘’
      },
    

    缺少 变量的定义

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 12月2日
  • 已采纳回答 11月24日
  • 修改了问题 11月21日
  • 创建了问题 11月21日

悬赏问题

  • ¥50 gki vendor hook
  • ¥15 centos7中sudo命令无法使用
  • ¥15 灰狼算法和蚁群算法如何结合
  • ¥15 这是一个利用ESP32自带按键和LED控制的录像代码,编译过程出现问题,请解决并且指出错误,指导如何处理 ,协助完成代码并上传代码
  • ¥20 stm32f103,hal库 hal_usart_receive函数接收不到数据。
  • ¥20 求结果和代码,sas利用OPTEX程序和D-efficiency生成正交集
  • ¥50 adb连接不到手机是怎么回事?
  • ¥20 抓取数据时发生错误: get_mooncake_data() missing 1 required positional argument: 'driver'的问题,怎么改出正确的爬虫代码?
  • ¥15 vs2022无法联网
  • ¥15 TCP的客户端和服务器的互联