微信小程序"海報"需求
發表時(shí)間：2021-4-13
發布人(rén)：融晨科技
浏覽次數：71
背景
- 最近手上(shàng)有一個(gè)小程序項目，上(shàng)周接到(dào)這(zhè)樣一個(gè)需求，用戶可以(yǐ)将一個(gè)頁面下載到(dào)本地(dì / de)，分享給朋友/朋友圈（這(zhè)裏的(de)分享是(shì)指将當前頁面作爲(wéi / wèi)小程序的(de)縮略圖進行小程序的(de)分享），需要(yào / yāo)下載或分享的(de)頁面如下：
- 用戶需要(yào / yāo)下載、分享的(de)就(jiù)是(shì)紅色框内的(de)海報。
OK，需求明确開始幹活了(le／liǎo)
實現方式，第一次該類型的(de)需求，網上(shàng)了(le／liǎo)解到(dào)兩種實現方式（應該還有更多）
wxml-to-canvas小程序内通過靜态模闆和(hé / huò)樣式繪制 canvas ，導出(chū)圖片，可用于(yú)生成分享圖等場景。該組件是(shì)由微信提供的(de)Painter一款輕量級的(de)小程序海報生成組件，我在(zài)項目中使用了(le／liǎo)這(zhè)一種實現方式，因爲(wéi / wèi)它支持可視化拖拽生成painter代碼，簡直不(bù)要(yào / yāo)太香。① 可視化工具地(dì / de)址 ② git地(dì / de)址
【PS】：兩種實現的(de)方式原理是(shì)一緻的(de)，提供物料--繪制canvas--生成圖片，關于(yú)物料提供：支持矩形，圖片，文字等...如果你的(de)需求有canvas，考慮使用
wx.downloadFile将canvas轉爲(wéi / wèi)圖片進行物料提供，我在(zài)項目中是(shì)這(zhè)麽做的(de)。分析用戶需要(yào / yāo)下載的(de)海報元素組成，圖片、文字、canvas（下方的(de)雷達圖是(shì)canvas标簽，需要(yào / yāo)先将canvas轉爲(wéi / wèi)圖片提供物料）
将
painter重git拉下來(lái)放在(zài)自己項目的(de)組件中，并在(zài)需要(yào / yāo)使用的(de)頁面中注冊組件。
.json
"usingComponents": {
"painter":"../../components/painter/painter"
}
複制代碼.wxml
<painter :dirty="true" palette="{{paintPallette}}" bind:imgOK="onImgOK"bind:touchEnd="touchEnd" widthPixels="1000" />
//palette 物料對象
//imgOK 繪制成功的(de)回調
//touchEnd 繪制失敗的(de)回調
還支持很多方法屬性不(bù)一一說(shuō)了(le／liǎo)
複制代碼//物料文件 在(zài)上(shàng)面說(shuō)的(de)可視化工具畫完之(zhī)後導出(chū)json文件就(jiù)是(shì)以(yǐ)下代碼，根據你的(de)需求再調整一下
export default class LastMayday {
palette(params) {
return (
{
"width": "375px",
"height": "580px",
"background": "#040406",
"views": [
{
"type": "image",
"url": "網絡圖片",
"css": {
"width": "355px",
"height": "560px",
"top": "3px",
"left": "10px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "image",
"url": "網絡圖片",
"css": {
"width": "11px",
"height": "13px",
"top": "16px",
"left": "64px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": params.point + '',
"css": {
"color": "#fff",
"background": "rgba(0,0,0,0)",
"width": "100px",
"height": "20.02px",
"top": "13px",
"left": "81px",
"borderColor": "#000000",
"fontSize": "14px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "20px",
"textAlign": "left"
}
},
{
"type": "image",
"url": "網絡圖片",
"css": {
"width": "211px",
"height": "209px",
"top": "43px",
"left": "82px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": params.email,
"css": {
"color": "#d4d4d4",
"width": "355px",
"height": "18px",
"top": "300px",
"borderColor": "#000000",
"fontSize": "13px",
"lineHeight": "18",
"textAlign": "center"
}
},
{
"type": "image",
"url": "網絡圖片",
"css": {
"width": "120px",
"height": "80px",
"top": "327px",
"left": "130px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": params.highestValue,
"css": {
"color": "#f5a623",
"width": "355px",
"height": "33.9px",
"top": "344px",
"left": "10px",
"borderColor": "#000000",
"fontSize": "30px",
"fontWeight": "600",
"lineHeight": "33px",
"textAlign": "center"
}
},
{
"type": "text",
"text": params.highestValueLabel,
"css": {
"color": "#f5a623",
"width": "355px",
"height": "14px",
"top": "381px",
"left": "11px",
"borderColor": "#000000",
"fontSize": "12px",
"fontWeight": "500",
"lineHeight": "13.32px",
"textDecoration": "none",
"textAlign": "center"
}
},
{
"type": "image",
"url": params.radarUrl,
"css": {
"width": "348.55px",
"height": "129.46px",
"top": "426px",
"left": "12px",
"borderColor": "#000000",
}
},
{
"type": "text",
"text": params.name,
"css": {
"color": "#99eff4",
"background": "rgba(0,0,0,0)",
"width": "177.5px",
"height": "24px",
"top": "266px",
"left": "26px",
"fontSize": "21px",
"fontWeight": "600",
"lineHeight": "23px",
"fontFamily": "PingFangSC",
"textAlign": "right"
}
},
{
"type": "text",
"text": params.position,
"css": {
"color": "#d4d4d4",
"width": "155px",
"height": "15px",
"top": "272px",
"left": "207.5px",
"borderColor": "#000000",
"fontSize": "13px",
"fontWeight": "normal",
"lineHeight": "15px",
"textDecoration": "none",
"fontFamily": "PingFangSC",
"textAlign": "left"
}
},
{
"type": "rect",
"css": {
"background": "rgba(247, 107, 28, 1)",
"width": "180px",
"height": "180px",
"top": "60px",
"left": "98px",
"borderRadius": "90px",
"color": "rgba(247, 107, 28, 1)"
}
},
{
"type": "rect",
"css": {
"background": "#000",
"width": "162px",
"height": "162px",
"top": "69px",
"left": "107px",
"borderRadius": "76px",
"color": "#000"
}
},
{
"type": "image",
"url": params.headUrl,
"css": {
"width": "150px",
"height": "150px",
"top": "74px",
"left": "113px",
"borderRadius": "75px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
}
]
}
);
}
}
複制代碼- 将該文件引入你的(de)js文件中
import Card from './card'
- 再合适的(de)時(shí)機生成對應canvas（用戶主動觸發或者頁面加載完成？看你需求）
this.setData({ paintPallette: new Card().palette(‘需要(yào / yāo)動态生成的(de)參數’), });
- 看一下繪制成功的(de)回調執行了(le／liǎo)嗎
onImgOK(e) {
console.log(e.detail.path) //到(dào)這(zhè)，你的(de)海報已經生成成功了(le／liǎo)
},
複制代碼接下來(lái)就(jiù)是(shì)剩下最簡單的(de)步驟了(le／liǎo)
- 分享
onShareAppMessage() onShareTimeline() 複制代碼- 保存到(dào)本地(dì / de)
saveImageToPhotosAlbum() //這(zhè)裏需要(yào / yāo)注意保存到(dào)本地(dì / de)需要(yào / yāo)用戶授權，需要(yào / yāo)處理的(de)是(shì)：如果用戶第一次點擊拒絕，想再次拉起授權框的(de)時(shí)候 複制代碼以(yǐ)上(shàng)，沒有貼很多代碼，以(yǐ)思路爲(wéi / wèi)主，不(bù)足的(de)地(dì / de)方請各位大(dà)佬指導~
