根据uniapp官网上的组件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'})}}) }})
以上代码就实现了图片分享qq。
二、遇到的坑及解决方法
一开始按照分享微信的方法来做分享qq,但是一直报错图片非法路径,后来百度了很多,发现qq分享图片地址必须是本地(这也太坑,就是图片地址不能是网络图片)。我有百度了很多,发现我无法获取本地图片地址,而且app上的图片本身就是网络上的,需要保存本地才能分享,wtf。
最后的解决办法是:线将图片保存到canvas,然后用uni.canvasToTempFilePath获取预览地址,然后放到uni.share后就可以了,wtm真是个天才。