設(shè)置
  • 日夜間
    隨系統(tǒng)
    淺色
    深色
  • 主題色

微信小程序推出 snapshot 生成海報(bào)組件,不用再手動(dòng)繪制畫布了

2023/9/14 18:11:06 來源:IT之家 作者:汪淼 責(zé)編:汪淼

IT之家 9 月 14 日消息,制作過微信小程序生成海報(bào)功能的小伙伴都知道,這一功能一般是通過 canvas 畫布繪制與服務(wù)端繪制 2 種方式實(shí)現(xiàn),不過都需要手動(dòng)編寫腳本,制作起來也不是很方便。

為了滿足小程序高效生成海報(bào)的需求,微信宣布在 Skyline 渲染引擎中推出 snapshot 組件,快速解決復(fù)雜排版、超長(zhǎng)海報(bào)等繪制難題。

據(jù)介紹,對(duì)比現(xiàn)有的 canvas 繪制與服務(wù)端繪制的方式,snapshot 組件具有如下優(yōu)勢(shì):

  • 輕松應(yīng)對(duì)復(fù)雜排版,如圓角、百分比、自定義字體等樣式均可輕松調(diào)整

  • 沒有寬高限制,支持超長(zhǎng)海報(bào)的輸出

  • 調(diào)用方式簡(jiǎn)單,直接使用 wxml 實(shí)現(xiàn)

圖片

▲ snapshot 組件生成海報(bào)并保存本地,圖源“微信開發(fā)者”公眾號(hào)

此外,通過 snapshot 組件完成小程序生成海報(bào)并保存本地的完整過程也非常簡(jiǎn)單:

  • 使用 wxml 繪制海報(bào)內(nèi)容

  • 使用 snapshot 組件包裹海報(bào)的 wxml

  • 調(diào)用 takeSnapshot 獲取圖片數(shù)據(jù)

  • 調(diào)用 fs.writeFileSync 將海報(bào)數(shù)據(jù)寫入本地文件

  • 調(diào)用 wx.saveImageToPhotosAlbum 將海報(bào)保存到本地

也就是說,用戶可以像寫小程序 UI 那樣使用 wxml 來寫海報(bào)布局,然后直接填充動(dòng)態(tài)數(shù)據(jù)就可以了,這樣易用性就大大提升,感興趣的IT之家小伙伴可以在項(xiàng)目中嘗試一下。

廣告聲明:文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接(包括不限于超鏈接、二維碼、口令等形式),用于傳遞更多信息,節(jié)省甄選時(shí)間,結(jié)果僅供參考,IT之家所有文章均包含本聲明。

相關(guān)文章

關(guān)鍵詞:海報(bào),微信小程序

軟媒旗下網(wǎng)站: IT之家 最會(huì)買 - 返利返現(xiàn)優(yōu)惠券 iPhone之家 Win7之家 Win10之家 Win11之家

軟媒旗下軟件: 軟媒手機(jī)APP應(yīng)用 魔方 最會(huì)買 要知