這篇文章將為大家詳細講解有關(guān)微信小程序中如何使用一個json完成分享朋友圈圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了武定免費建站歡迎大家使用！

寫在前面

---

最近在做小程序，發(fā)現(xiàn)制作分享到朋友圈圖片是每個項目必須的。遇到坑比較多，寫起來也比較繁瑣，也沒有找到類似組件，所以就自己動手寫了一個。

演示

---

左側(cè)是 canvasdrawer 繪制的，右側(cè)是UI給的圖

特性

---

• 簡單易用 —— 一個 json 搞定繪制圖片

• 功能全 —— 滿足 90% 的使用場景

• 繪制文本（換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗）

• 繪制圖片

• 繪制矩形

• 保存圖片

• 多圖繪制

• ...

• 代碼量小

體驗

git clone https://github.com/kuckboy1994/mp_canvas_drawer

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

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

• 普通繪制，繪制單張分享圖。

• 多圖繪制，連續(xù)繪制分享圖

使用

---

• 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 方法是繪圖完成之后的回調(diào)函數(shù)，在 event.detail 中返回繪制完成的圖片地址。

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

API

---

數(shù)據(jù)對象的第一層需要三個參數(shù): width、height、views。配置中所有的數(shù)字都是沒有單位的。這就意味著 canvas 繪制的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image 標簽中即可。

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

image（圖片）

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

text（文本）

屬性	含義		默認值	可選值
content	繪制的圖片地址		''(空字符串)
color	顏色		black
fontSize	字體大小		16
textAlign	文字對齊方式		left	center,right
lineHeight	行高，只有在多行文本中才有用		20

rect (矩形，線條)

屬性	含義		默認值	可選值
background	背景顏色		black
top	左上角距離畫板頂部的距離
left	左上角距離畫板左側(cè)的距離		16
width	要畫多寬		0
height	要畫多高		0

Q&A

---

最佳實踐

繪制操作的時候最好 鎖住屏幕 ，例如在點擊繪制的時候

wx.showLoading({  title: '繪制分享圖片中',  mask: true})

繪制完成之后

wx.hideLoading()

具體可以參考項目下的 /pages/multiple

1.二維碼和小程序碼如何繪制？

• 二維碼和小程序碼可以通過調(diào)用微信官方的接口產(chǎn)生，需要后端配合。

• 然后走 type: image 類型進行繪制即可。

2.繪制流程相關(guān)

• views 數(shù)組中的順序代表繪畫的先后順序，會有覆蓋的現(xiàn)象。請各位使用者注意。

3.如何實現(xiàn)圓形頭像？

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

4.canvas drawer 組件為什么不直接顯示canvas畫板和其內(nèi)容呢？

• 考慮到大部分場景，我們都是用來把圖片保存到本地，或用以展示。保存到本地，返回臨時文件給調(diào)用者一定是最佳的解決方式。展示，轉(zhuǎn)化成圖片之后，就可以使用 image 基礎(chǔ)組件的所有顯示模式了，還能設(shè)置寬高。

關(guān)于“微信小程序中如何使用一個json完成分享朋友圈圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：微信小程序中如何使用一個json完成分享朋友圈圖片
網(wǎng)頁URL：http://www.rwnh.cn/article12/gpojgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、標簽優(yōu)化、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)