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

coding01發表於2019-03-02

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

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