推薦一款快速生成海報的微信小插件

時間 2019-11-10

標籤推薦一款快速生成海報微信插件简体版

原文原文鏈接

如今不少小程序都有生成海報，分享海報的功能。咱們本身的幾個小程序 (如：爸媽搜商城、爸媽搜雲課堂、幼師大學、跟着外教學英語等) 也都有生成海報的功能。所以技術團隊萌生出製做一個簡單易用的微信小插件，只要傳入簡單圖片和對應的座標值，就能夠拼接成一幅完整的宣傳海報。css

今天，咱們提交了初版，剛剛經過微信審覈，如今讓我開始說一說怎麼使用咱們剛新鮮出爐的小程序插件 —— 「爸媽搜海報 Maker」。html

爸媽搜海報

自定義生成海報。

使用方法

一、在微信小程序管理後臺——設置——第三方服務，按 AppID（wxbf07f0f22c6c200d）搜索到該插件並申請受權（ps：通常不會出現拒絕的狀況。若是申請被拒絕了，請從新申請，有時候管理員手抽點錯了，請見諒）。 json

二、在要使用該插件的小程序 app.json 文件中引入插件聲明。canvas

"plugins": {
    "poster": {
        "version": "1.0.0",
        "provider": "wxbf07f0f22c6c200d"
    }
}

三、在須要使用到該插件的小程序頁面的 JSON 配置文件中，作如下配置：小程序

{
  "usingComponents": {
    "poster": "plugin://poster/poster"
  }
}

四、在相應的 HTML 頁面中添加如下語句便可完成插件的嵌入。微信小程序

<poster />

固然，只有這樣，確定不行，還須要給該插件控件傳入對應的圖片和文字屬性。微信

屬性

當前版本，傳入的屬性主要有兩個：drawing 和 savebtnText：app

`屬性名`	`類型`	`默認值`	`說明`
`drawing`	`Array`	`[]`	`畫圖的數據`
`savebtnText`	`String`	`"點擊按鈕進行圖片保存"`	`按鈕文字信息`

`drawing參數說明`

drawing 數據目前有兩種數據類型，一種是圖片信息，另外一種是文字信息。ide

圖片信息post

`屬性名`	`類型`	`值`	`說明`
`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;
}