微信小程式：一個json幫你完成分享朋友圈圖片

kuckboy1994發表於2018-07-13
微信小程式JSON

寫在前面

最近在做小程式，發現製作分享到朋友圈圖片是每個專案必須的。遇到坑比較多，寫起來也比較繁瑣，也沒有找到類似元件，所以就自己動手寫了一個。

演示

微信小程式：一個json幫你完成分享朋友圈圖片

左側是 canvasdrawer 繪製的，右側是UI給的圖

微信小程式：一個json幫你完成分享朋友圈圖片

特性

  • 簡單易用 —— 一個 json 搞定繪製圖片
  • 功能全 —— 滿足 90% 的使用場景
    • 繪製文字（換行、超出內容省略號、中劃線、下劃線、文字加粗）
    • 繪製圖片
    • 繪製矩形
    • 儲存圖片
    • 多圖繪製
    • ...
  • 程式碼量小

體驗

git clone https://github.com/kuckboy1994/mp_canvas_drawer
複製程式碼

想在手機上使用配置自己的 appid 即可。

編譯模式中已經為你配置好比較常用的兩種模式：

  • 普通繪製，繪製單張分享圖。
  • 多圖繪製，連續繪製分享圖

使用

  • git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地

  • 把 components 中的 canvasdrawer 拷貝到自己專案下。

  • 在使用頁面註冊元件

    {
  "usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }
}
複製程式碼

  • 在頁面 **.wxml 檔案中加入如下程式碼

    <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
複製程式碼

    painting 是需要傳入的 json。 getImage 方法是繪圖完成之後的回撥函式，在 event.detail 中返回繪製完成的圖片地址。

  • 當前栗子中的 painting 簡單展示一下。詳細配置請看 API

    painting（點選展開）
    {
  width: 375,
  height: 555,
  views: [
    {
      type: 'image',
      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    },
    {
      type: 'image',
      url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/132',
      top: 27.5,
      left: 29,
      width: 55,
      height: 55
    },
    {
      type: 'image',
      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',
      top: 27.5,
      left: 29,
      width: 55,
      height: 55
    },
    {
      type: 'text',
      content: '您的好友【kuckboy】',
      fontSize: 16,
      color: '#402D16',
      textAlign: 'left',
      top: 33,
      left: 96,
      bolder: true
    },
    {
      type: 'text',
      content: '發現一件好貨，邀請你一起0元免費拿！',
      fontSize: 15,
      color: '#563D20',
      textAlign: 'left',
      top: 59.5,
      left: 96
    },
    {
      type: 'image',
      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
      top: 136,
      left: 42.5,
      width: 290,
      height: 186
    },
    {
      type: 'image',
      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',
      top: 443,
      left: 85,
      width: 68,
      height: 68
    },
    {
      type: 'text',
      content: '正品MAC魅可口紅禮盒生日脣膏小辣椒Chili西柚情人',
      fontSize: 16,
      lineHeight: 21,
      color: '#383549',
      textAlign: 'left',
      top: 336,
      left: 44,
      width: 287,
      MaxLineNumber: 2,
      breakWord: true,
      bolder: true
    },
    {
      type: 'text',
      content: '￥0.00',
      fontSize: 19,
      color: '#E62004',
      textAlign: 'left',
      top: 387,
      left: 44.5,
      bolder: true
    },
    {
      type: 'text',
      content: '原價:￥138.00',
      fontSize: 13,
      color: '#7E7E8B',
      textAlign: 'left',
      top: 391,
      left: 110,
      textDecoration: 'line-through'
    },
    {
      type: 'text',
      content: '長按識別圖中二維碼幫我砍個價唄~',
      fontSize: 14,
      color: '#383549',
      textAlign: 'left',
      top: 460,
      left: 165.5,
      lineHeight: 20,
      MaxLineNumber: 2,
      breakWord: true,
      width: 125
    }
  ]
}
複製程式碼

API

物件結構一覽
{
  width: 375,
  height: 555,
  views: [
    {
      type: 'image',
      url: 'url',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    },
    {
      type: 'text',
      content: 'content',
      fontSize: 16,
      color: '#402D16',
      textAlign: 'left',
      top: 33,
      left: 96,
      bolder: true
    },
    {
      type: 'rect',
      background: 'color',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    }
  ]
}
複製程式碼

資料物件的第一層需要三個引數: width、height、views。配置中所有的數字都是沒有單位的。這就意味著 canvas 繪製的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image 標籤中即可。

當前可以繪製3種型別的配置: image、text、rect。配置的屬性基本上使用的都是 css 的駝峰名稱，還是比較好理解的。

image（圖片）

屬性 含義 預設值 可選值
url 繪製的圖片地址，可以是本地圖片，如：/images/1.jpeg
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側的距離
width 要畫多寬 0
height 要畫多高 0

text（文字）

屬性 含義 預設值 可選值
content 繪製的圖片地址 ''（空字串）
color 顏色 black
fontSize 字型大小 16
textAlign 文字對齊方式 left center、right
lineHeight 行高，只有在多行文字中才有用 20
top 文字左上角距離畫板頂部的距離 0
left 文字左上角距離畫板左側的距離 0
breakWord 是否需要換行 false true
MaxLineNumber 最大行數，只有設定 breakWord: true ，當前屬性才有效，超出行數內容的顯示為... 2
width 和 MaxLineNumber 屬性配套使用，width 就是達到換行的寬度
bolder 是否加粗 false true
textDecoration 顯示中劃線、下劃線效果 none underline（下劃線）、line-through（中劃線）

rect (矩形，線條)

屬性 含義 預設值 可選值
background 背景顏色 black
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側的距離
width 要畫多寬 0
height 要畫多高 0

Q&A

  1. 最佳實踐

    繪製操作的時候最好 鎖住螢幕 ，例如在點選繪製的時候

    wx.showLoading({
  title: '繪製分享圖片中',
  mask: true
})
複製程式碼

    繪製完成之後

    wx.hideLoading()
複製程式碼

    具體可以參考專案下的 /pages/multiple

  2. 二維碼和小程式碼如何繪製？

    • 二維碼和小程式碼可以通過呼叫微信官方的介面產生，需要後端配合。
    • 然後走 type: image 型別進行繪製即可。

  3. 繪製流程相關

    • views 陣列中的順序代表繪畫的先後順序，會有覆蓋的現象。請各位使用者注意。

  4. 如何實現圓形頭像？

    • canvas 中沒有繪製圓形圖片的方法，所以使用了 hack 的方式來實現的。使用一張中間鏤空的圖片蓋在頭像上就可實現當前效果。

  5. canvas drawer 元件為什麼不直接顯示canvas畫板和其內容呢？

    • 考慮到大部分場景，我們都是用來把圖片儲存到本地，或用以展示。
    • 儲存到本地，返回臨時檔案給呼叫者一定是最佳的解決方式。
    • 展示，轉化成圖片之後，就可以使用 image 基礎元件的所有顯示模式了，還能設定寬高。

TIPS

如果有什麼疑問，歡迎 issues。 如果覺得不錯，能不能送我小 ✨ ✨ ，然我有更多的動力更新。

github：github.com/kuckboy1994…

相關文章