【移動應(yīng)用開發(fā)技術(shù)】微信小程序中如何使用一個json完成分享朋友圈圖片

【移動應(yīng)用開發(fā)技術(shù)】微信小程序中如何使用一個json完成分享朋友圈圖片

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中如何使用一個json完成分享朋友圈圖片，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。 寫在前面最近在做小程序，發(fā)現(xiàn)制作分享到朋友圈圖片是每個項目必須的。遇到坑比較多，寫起來也比較繁瑣，也沒有找到類似組件，所以就自己動手寫了一個。演示左側(cè)是canvasdrawer繪制的，右側(cè)是UI給的圖特性簡單易用——一個json搞定繪制圖片功能全——滿足90%的使用場景繪制文本（換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗）繪制圖片繪制矩形保存圖片多圖繪制...代碼量小體驗git

clone

/kuckboy1994/mp_canvas_drawer想在手機(jī)上使用配置自己的appid即可。編譯模式中已經(jīng)為你配置好比較常用的兩種模式：普通繪制，繪制單張分享圖。多圖繪制，連續(xù)繪制分享圖使用gitclone/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中返回繪制完成的圖片地址。當(dāng)前栗子中的painting簡單展示一下。詳細(xì)配置請看APIAPI數(shù)據(jù)對象的第一層需要三個參數(shù):width、height、views。配置中所有的數(shù)字都是沒有單位的。這就意味著canvas繪制的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到image標(biāo)簽中即可。當(dāng)前可以繪制3種類型的配置:image、text、rect。配置的屬性基本上使用的都是css的駝峰名稱，還是比較好理解的。image（圖片）text（文本）rect(矩形，線條)Q&A最佳實踐繪制操作的時候最好鎖住屏幕，例如在點擊繪制的時候wx.showLoading({

title:

'繪制分享圖片中',

mask:

true})繪制完成之后wx.hideLoading()具體可以參考項目下的/pages/multiple1.二維碼和小程序碼如何繪制？二維碼和小程序碼可以通過調(diào)用微信官方的接口產(chǎn)生，需要后端配合。然后走type:image類型進(jìn)行繪制即可。2.繪制流程相關(guān)views數(shù)組中的順序代表繪畫的先后順序，會有覆蓋的現(xiàn)象。請各位使用者注意。3.如何實現(xiàn)圓形頭像？canvas中沒有繪制圓形圖片的方法，所以使用了hack的方式來實現(xiàn)的。使用一張中間鏤空的圖片蓋在頭像上就可實現(xiàn)當(dāng)前效果。4.canvasdrawer組件為什么不直接顯示canvas畫板和其內(nèi)容呢？考慮到大部分場景，我們都是用來把圖片保存到本地，或用以展示。保存到本地，返回臨時文件給調(diào)用者一定是最佳的解決方式。展示，轉(zhuǎn)化成圖片之后，就可以使用image基礎(chǔ)組件的所有顯示模式了，還能設(shè)置寬高。關(guān)于“微信小程序中如何使用一個js