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

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

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

為了滿足小程序高效生成海報(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)整

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

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

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

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

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

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

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

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

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

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