您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關微信小程序中如何使用一個json完成分享朋友圈圖片,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
寫在前面
最近在做小程序,發現制作分享到朋友圈圖片是每個項目必須的。遇到坑比較多,寫起來也比較繁瑣,也沒有找到類似組件,所以就自己動手寫了一個。
演示
左側是 canvasdrawer
繪制的,右側是UI給的圖
特性
簡單易用 —— 一個 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
API
數據對象的第一層需要三個參數: 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 |
rect (矩形,線條)
屬性 | 含義 | 默認值 | 可選值 | |
background | 背景顏色 | black | ||
top | 左上角距離畫板頂部的距離 | |||
left | 左上角距離畫板左側的距離 | 16 | ||
width | 要畫多寬 | 0 | ||
height | 要畫多高 | 0 |
Q&A
最佳實踐
繪制操作的時候最好 鎖住屏幕 ,例如在點擊繪制的時候
wx.showLoading({ title: '繪制分享圖片中', mask: true})
繪制完成之后
wx.hideLoading()
具體可以參考項目下的 /pages/multiple
1.二維碼和小程序碼如何繪制?
二維碼和小程序碼可以通過調用微信官方的接口產生,需要后端配合。
然后走 type: image 類型進行繪制即可。
2.繪制流程相關
views 數組中的順序代表繪畫的先后順序,會有覆蓋的現象。請各位使用者注意。
3.如何實現圓形頭像?
canvas 中沒有繪制圓形圖片的方法,所以使用了 hack 的方式來實現的。使用一張中間鏤空的圖片蓋在頭像上就可實現當前效果。
4.canvas drawer 組件為什么不直接顯示canvas畫板和其內容呢?
考慮到大部分場景,我們都是用來把圖片保存到本地,或用以展示。保存到本地,返回臨時文件給調用者一定是最佳的解決方式。展示,轉化成圖片之后,就可以使用 image 基礎組件的所有顯示模式了,還能設置寬高。
關于“微信小程序中如何使用一個json完成分享朋友圈圖片”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。