根據(jù)uniapp官網(wǎng)上的組件https://uniapp.dcloud.io/api/plugins/share進行微信,qq分享。微信分享看文檔即可,今天主要說一說圖片分享qq,及遇到的一些坑。
一、源碼
代碼1,html代碼。
<canvas canvas-id="myCanvas" style="border:1px solid #c3c3c3;visibility: hidden;position: fixed;min-width: 300px;min-height: 400px;"></canvas>
代碼2,將圖片放入canvas中。
// app生成canvas預覽圖
createCanvas(){
const ctx = uni.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.drawImage( this.Logo );
ctx.draw();
console.log(ctx);
},
代碼3,分享。
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
fileType: 'jpg',
success: res=> {
? ? // 在H5平臺下,tempFilePath 為 base64
? console.log(res.tempFilePath)
? uni.share({
provider: 'qq',
type: 2,
Scene : "WXSenceTimeline",
// url:strurl,
title: '知識島',
// summary: strShareSummary,
imageUrl: res.tempFilePath,
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
uni.showToast({
title: '分享失敗',
position: 'bottom'})}}) }})
以上代碼就實現(xiàn)了圖片分享qq。
二、遇到的坑及解決方法
????????一開始按照分享微信的方法來做分享qq,但是一直報錯圖片非法路徑,后來百度了很多,發(fā)現(xiàn)qq分享圖片地址必須是本地(這也太坑,就是圖片地址不能是網(wǎng)絡圖片)。我有百度了很多,發(fā)現(xiàn)我無法獲取本地圖片地址,而且app上的圖片本身就是網(wǎng)絡上的,需要保存本地才能分享,wtf。
最后的解決辦法是:線將圖片保存到canvas,然后用uni.canvasToTempFilePath獲取預覽地址,然后放到uni.share后就可以了,wtm真是個天才。