1. 程式人生 > >推薦一款快速生成海報的微信小外掛

推薦一款快速生成海報的微信小外掛

現在很多小程式都有生成海報,分享海報的功能。我們自己的幾個小程式 (如:爸媽搜商城、爸媽搜雲課堂、幼師大學、跟著外教學英語等) 也都有生成海報的功能。因此技術團隊萌生出製作一個簡單易用的微信小外掛,只要傳入簡單圖片和對應的座標值,就可以拼接成一幅完整的宣傳海報。

今天,我們提交了第一版,剛剛通過微信稽核,現在讓我開始說一說怎麼使用我們剛新鮮出爐的小程式外掛 —— 「爸媽搜海報 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 />

當然,只有這樣,肯定不行,還需要給該外掛控制元件傳入對應的圖片和文字屬性。

屬性

當前版本,傳入的屬性主要有兩個:drawingsavebtnText

屬性名 型別 預設值 說明
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 右對齊

如圖:

6302-afc03e2dbbaaf24a.png set-text-align

例項

頁面傳入的控制元件簡單明瞭:

<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;
}

注意: 樣式的優先順序!

好了,我們可以看看效果了

6302-9b6178971a2af240.jpg anli

總結

這是我們團隊做的第三個微信小外掛,每個外掛製作的標準就是,把複雜的邏輯交給我們來做。

使用者只要簡單的引入,用最便捷的輸入引數,以達到最好的效果。

歡迎微信小程式開發者使用我們的外掛:

  • 爸媽搜日曆

提供簡約不簡單的日曆基本功能,自定義樣式,考勤狀態等功能。

  • 爸媽搜富文字

小程式富文字處理 rich-text, 將無法識別的標籤改為可識別的, 適配移動裝置。

  • 爸媽搜海報Maker

最後,放出我們的外掛開發者的聯絡方式,有什麼問題都可以聯絡她哦~

6302-91616df64dcfb775.jpg erweima