推薦一款快速生成海報的微信小外掛
現在很多小程式都有生成海報，分享海報的功能。我們自己的幾個小程式 (如：爸媽搜商城、爸媽搜雲課堂、幼師大學、跟著外教學英語等) 也都有生成海報的功能。因此技術團隊萌生出製作一個簡單易用的微信小外掛，只要傳入簡單圖片和對應的座標值，就可以拼接成一幅完整的宣傳海報。
今天，我們提交了第一版，剛剛通過微信稽核，現在讓我開始說一說怎麼使用我們剛新鮮出爐的小程式外掛 —— 「爸媽搜海報 Maker」。
爸媽搜海報
自定義生成海報。
使用方法
1、 在微信小程式管理後臺——設定——第三方服務，按 AppID（wxbf07f0f22c6c200d）搜尋到該外掛並申請授權（ps：一般不會出現拒絕的情況。如果申請被拒絕了，請重新申請，有時候管理員手抽點錯了，請見諒）。
2、在要使用該外掛的小程式 app.json 檔案中引入外掛宣告。
"plugins": {
"poster": {
"version": "1.0.0",
"provider": "wxbf07f0f22c6c200d"
}
}
複製程式碼
3、在需要使用到該外掛的小程式頁面的 JSON 配置檔案中，做以下配置：
{
"usingComponents": {
"poster": "plugin://poster/poster"
}
}
複製程式碼
4、在相應的 HTML 頁面中新增以下語句即可完成外掛的嵌入。
<poster /> 複製程式碼
當然，只有這樣，肯定不行，還需要給該外掛控制元件傳入對應的圖片和文字屬性。
屬性
當前版本，傳入的屬性主要有兩個： drawing 和 savebtnText ：
屬性名 |
型別 |
預設值 |
說明 |
|---|---|---|---|
drawing |
Array |
[] |
畫圖的資料 |
savebtnText |
String |
"點選按鈕進行圖片儲存" |
按鈕文字資訊 |
drawing引數說明
drawing 資料目前有兩種資料型別，一種是圖片資訊，另一種是文字資訊。
圖片資訊
屬性名 |
型別 |
值 |
說明 |
|---|---|---|---|
type |
String |
image |
圖片型別 |
url |
String |
圖片路徑，為線上圖片 |
|
left |
Number |
距離畫布的左邊距 |
|
top |
Number |
距離畫布的頂部距離 |
|
width |
Number |
繪畫圖片的寬度 |
|
height |
Number |
繪畫圖片的高度 |
|
circle |
Boolean |
true、false |
是否是繪製圓形，預設為 false |
文字資訊
屬性名 |
型別 |
值 |
說明 |
|---|---|---|---|
type |
String |
text |
文字型別 |
content |
String |
繪圖的文字內容 |
|
left |
Number |
距離畫布的左邊距 |
|
top |
Number |
距離畫布的頂部距離 |
|
width |
Number |
文字繪畫的寬度 |
|
color |
String |
文字資訊 |
|
textAlign |
String |
文字水平對齊方式 |
|
fontSize |
Number |
預設為 26 rpx |
文字大小 |
其中， textAlign 引數：
屬性名 |
型別 |
說明 |
|---|---|---|
left |
String |
左對齊 |
center |
String |
居中對齊 |
right |
String |
右對齊 |
如圖：
例項
頁面傳入的控制元件簡單明瞭：
<poster
drawing='{{drawing}}'
savebtnText='{{savebtnText}}'
canvas-style='canvas-style'
savebtn-style='savebtn-style' />
複製程式碼
我們接著看傳入的引數：
Page({
data: {
drawing: [
],
savebtnText: '點選按鈕，儲存圖片'
},
onLoad: function () {
wx.showLoading({
title: '繪圖中..'
})
},
onShow: function () {
this.setData({
drawing: [
{
type: 'image',
url: 'https://i.loli.net/2018/10/30/5bd85117675b3.png',
left: 0,
top: 0,
width: 650,
height: 960,
},
{
type: 'image',
url: 'https://wx.qlogo.cn/mmopen/vi_32/M8cK5rMR16udYRpanaZiaYz2KHgibVVHhFqG01h3rZUAGDKQerZwNv9baVDeNicjZ1bZzs4hUribjLX9bNaAmhia7pQ/132',
left: 72,
top: 53,
width: 78,
height: 75,
},
{
type: 'text',
content: '咖啡',
fontSize: 26,
color: 'white',
textAlign: 'left',
left: 170,
top: 50,
width: 650,
},
{
type: 'text',
content: '這裡是小程式碼',
fontSize: 30,
color: 'red',
textAlign: 'left',
left: 390,
top: 720,
width: 200
},
{
type: 'image',
url: 'https://i.loli.net/2018/10/30/5bd851175ce40.jpg',
left: 388,
top: 660,
width: 190,
height: 190,
circle: true
}
]
})
}
})
複製程式碼
樣式也很簡單：
| 類名 | 說明 |
|---|---|
canvas-style |
畫布樣式樣式 |
savebtn-style |
按鈕樣式 |
/* 畫布樣式 */
.canvas-style{
width: 650rpx !important;
height: 960rpx!important;
margin: 0 auto;
border: 1px solid orangered;
margin-top: 10rpx;
}
/* 儲存圖片按鈕樣式 */
.savebtn-style{
height: 70rpx;
line-height: 70rpx;
}
複製程式碼
注意： 樣式的優先順序！
好了，我們可以看看效果了
總結
這是我們團隊做的第三個微信小外掛，每個外掛製作的標準就是，把複雜的邏輯交給我們來做。
使用者只要簡單的引入，用最便捷的輸入引數，以達到最好的效果。
歡迎微信小程式開發者使用我們的外掛：
- 爸媽搜日曆
提供簡約不簡單的日曆基本功能，自定義樣式，考勤狀態等功能。
外掛地址： ofollow,noindex">mp.weixin.qq.com/wxopen/plug…
- 爸媽搜富文字
小程式富文字處理 rich-text， 將無法識別的標籤改為可識別的， 適配移動裝置。
外掛地址： mp.weixin.qq.com/wxopen/plug…
- 爸媽搜海報Maker
外掛地址： mp.weixin.qq.com/wxopen/plug…
最後，放出我們的外掛開發者的聯絡方式，有什麼問題都可以聯絡她哦~
