微信小程序通過一個json實(shí)現(xiàn)分享朋友圈圖片

寫在前面

十載的如皋網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整如皋建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“如皋網(wǎng)站設(shè)計(jì)”,“如皋網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

演示

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

特性

• 簡單易用 —— 一個 json 搞定繪制圖片
• 功能全 —— 滿足 90% 的使用場景
  • 繪制文本（換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗）
  • 繪制圖片
  • 繪制矩形
  • 保存圖片
  • 多圖繪制
  • ...
• 代碼量小

體驗(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)目下。

在使用頁面注冊組件

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

在頁面 **.wxml 文件中加入如下代碼

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

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

當(dāng)前栗子中的 painting 簡單展示一下。詳細(xì)配置請看 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/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h5A/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: '發(fā)現(xiàn)一件好貨，邀請你一起0元免費(fèi)拿！',
 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: '原價(jià):￥138.00',
 fontSize: 13,
 color: '#7E7E8B',
 textAlign: 'left',
 top: 391,
 left: 110,
 textDecoration: 'line-through'
 },
 {
 type: 'text',
 content: '長按識別圖中二維碼幫我砍個價(jià)唄~',
 fontSize: 14,
 color: '#383549',
 textAlign: 'left',
 top: 460,
 left: 165.5,
 lineHeight: 20,
 MaxLineNumber: 2,
 breakWord: true,
 width: 125
 }
 ]
}

API

對象結(jié)構(gòu)一覽

{
 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
 }
 ]
}

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

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

image（圖片）

text（文本）

rect (矩形，線條)

Q&A

最佳實(shí)踐

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

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

繪制完成之后

wx.hideLoading()

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

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

• 二維碼和小程序碼可以通過調(diào)用微信官方的接口產(chǎn)生，需要后端配合。
• 然后走 type: image 類型進(jìn)行繪制即可。

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

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

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

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

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

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

TIPS

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

github：github.com/kuckboy1994…

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對創(chuàng)新互聯(lián)的支持。

本文名稱：微信小程序通過一個json實(shí)現(xiàn)分享朋友圈圖片
網(wǎng)站URL：http://muchs.cn/article34/pihose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、移動網(wǎng)站建設(shè)、網(wǎng)站制作、微信小程序、虛擬主機(jī)、動態(tài)網(wǎng)站

廣告

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