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

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、利津ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的利津網(wǎng)站制作公司

寫(xiě)在前面

---

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

演示

---

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

特性

---

• 簡(jiǎn)單易用 —— 一個(gè) json 搞定繪制圖片

• 功能全 —— 滿(mǎn)足 90% 的使用場(chǎng)景

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

• 繪制圖片

• 繪制矩形

• 保存圖片

• 多圖繪制

• ...

• 代碼量小

體驗(yàn)

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

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

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

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

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

使用

---

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

• 把components中的canvasdrawer拷貝到自己項(xiàng)目下。

• 在使用頁(yè)面注冊(cè)組件

{
  "usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }
}

• 在頁(yè)面 **.wxml 文件中加入如下代碼

<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

painting是需要傳入的json。getImage 方法是繪圖完成之后的回調(diào)函數(shù)，在event.detail中返回繪制完成的圖片地址。

• 當(dāng)前栗子中的 painting 簡(jiǎn)單展示一下。詳細(xì)配置請(qǐng)看 API

API

---

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

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

image（圖片）

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

text（文本）

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

rect (矩形，線條)

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

Q&A

---

很好實(shí)踐

繪制操作的時(shí)候好 鎖住屏幕 ，例如在點(diǎn)擊繪制的時(shí)候

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

繪制完成之后

wx.hideLoading()

具體可以參考項(xiàng)目下的 /pages/multiple

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

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

• 然后走 type: image 類(lèi)型進(jìn)行繪制即可。

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

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

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

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

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

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

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

新聞標(biāo)題：微信小程序中如何使用一個(gè)json完成分享朋友圈圖片-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article2/discoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、Google、軟件開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)

廣告

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