Rumah > applet WeChat > Pembangunan program mini > Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam)

Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam)

青灯夜游
Lepaskan: 2021-09-13 18:36:17
ke hadapan
3109 orang telah melayarinya

Bagaimana untuk menggunakan program mini untuk menjana poster? Dalam artikel ini, saya akan mengesyorkan pemalam generasi poster - pelukis, dan melihat cara menggunakannya untuk menjana poster, saya harap ia akan membantu anda.

Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam)

Poster penjanaan kod asli program mini

Langkah pertama:

Muat turun pakej dan letakkan pakej pelukis dalam direktori komponen

 https://github.com/Kujiale-Mobile/Painter
Salin selepas log masuk

[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Langkah kedua:

Gunakan fail json halaman untuk mengimport

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  }
}
Salin selepas log masuk

Langkah tiga:

Gunakan wxml halaman

接收海报的图片容器
<image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt />

<painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />
  
palette        字段作为画图数据的数据源, 图案数据以 json 形式存在
widthPixels    强制指定生成的图片的像素宽度

绘图完成后,可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片或失败的原因
Salin selepas log masuk

Langkah 4:

Gunakan js halaman

生成海报的方法(){
this.setData({
        template: {
          width: "750rpx",
          height: "1500rpx",
          views: [
            {
              type: &#39;image&#39;,
              url: 图片路路径,
              css: {
                top: &#39;10rpx&#39;,
                left: &#39;10rpx&#39;,
                right: &#39;10rpx&#39;,
                width: &#39;730rpx&#39;,
                height: &#39;1500rpx&#39;
              }
            }
          ]
        }
     })
}

  海报生成完毕自动调用
  
  firstImg(e) {
    console.log(e.detail.path);
    this.setData({
      posterImg: e.detail.path
    })
  },
Salin selepas log masuk

Pengenalan pemalam dan tapak web rasmi: Pelukis menjana poster

https://codechina.csdn.net/mirrors/Kujiale-Mobile/ Painter?utm_source=csdn_github_accelerator

Alamat asal: https://juejin.cn/post/6995356720125968398

Penulis: Huang Yongchao>

Lebih banyak pengetahuan berkaitan pengaturcaraan, Sila lawati:
Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:掘金--黄勇超
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan