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

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

drawing 資料目前有兩種資料型別，一種是圖片資訊，另一種是文字資訊。

圖片資訊

文字資訊

其中，textAlign 引數：

如圖：

例項

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

<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{
  width: 650rpx !important;
  height: 960rpx  !important;
  margin: 0 auto;
  border: 1px solid orangered;
  margin-top: 10rpx;
}

/* 儲存圖片按鈕樣式 */
.savebtn-style{
  height: 70rpx;
  line-height: 70rpx;
}

注意： 樣式的優先順序！

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

總結

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

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

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

• 爸媽搜日曆

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

• 爸媽搜富文字

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

• 爸媽搜海報Maker

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