91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序中如何使用一個json完成分享朋友圈圖片

發布時間:2021-04-01 10:35:27 來源:億速云 閱讀:265 作者:小新 欄目:移動開發

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

寫在前面


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

演示


微信小程序中如何使用一個json完成分享朋友圈圖片

左側是 canvasdrawer 繪制的,右側是UI給的圖

微信小程序中如何使用一個json完成分享朋友圈圖片

特性


  • 簡單易用 —— 一個 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 是需要傳入的 jsongetImage 方法是繪圖完成之后的回調函數,在 event.detail 中返回繪制完成的圖片地址。

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

API


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

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

image(圖片)

屬性含義默認值
可選值
url繪制的圖片地址,可以是本地圖片,如:/images/1.jpeg

top左上角距離畫板頂部的距離

left左上角距離畫板左側的距離

width要畫多寬0
height要畫多高0

text(文本)

屬性含義默認值
可選值
content繪制的圖片地址''(空字符串)
color顏色black
fontSize字體大小16
textAlign文字對齊方式leftcenter,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完成分享朋友圈圖片”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

平乐县| 莱西市| 吴忠市| 绥滨县| 台安县| 汝州市| 丰台区| 葵青区| 禹州市| 虹口区| 曲水县| 启东市| 来安县| 昭通市| 无为县| 邵阳县| 霍城县| 监利县| 合阳县| 常熟市| 七台河市| 肥西县| 登封市| 同德县| 泽库县| 海口市| 于都县| 泰安市| 容城县| 河北省| 礼泉县| 蓝山县| 永兴县| 灵丘县| 日土县| 苍梧县| 三门峡市| 临清市| 湄潭县| 延吉市| 景谷|