实现内容：将页面分享到朋友圈、钉钉、微信。
主要思想如图：
<div class="header-right" @click="shareDetail">分享</div>
/**
* 分享链接（微信、朋友圈、钉钉、工作圈）
*/
async shareDetail() {
this.$nextTick(() => {
html2canvas(this.$refs.main, {
//利用canvas将画面截图下来
width:
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth,
height: this.$refs.main.offsetHeight,
}).then(async (canvas) => {
//canvas为转换后的Canvas对象
console.log("canvas------",canvas)
let img = canvas.toDataURL("images/png"); //导出图片
console.log("img------",img)
let url = await this.getOss(img); //拿到直接可以浏览图片的路径
this.isUploading = false;
this.shareWeb(JSON.stringify({
type: 4, url }));
});
});
},
/**
* 生成oss链接
*/
async getOssUrl(dataUrl) {
let file = this.base64ToFile(dataUrl); //将base64得图片转换成文件
try {
let res = await commonApi.getOss(); //获取图片上传的一些
console.log(res.data)
let data = JSON.parse(res.data);
let randomNum = Math.random().toString().replace(".", "");
let ossParams = {
policy: data.policy,
OSSAccessKeyId: data.accessid,
signature: data.signature,
key: `${
data.dir}${
randomNum}.${
file.type.split("/")[1]}`, //拼接完成类似于front/2020/10/30/随机数.png（后缀名）
};
let formData = new FormData();
for (let i in ossParams) {
formData.append(i, ossParams[i]);
}
formData.append("file", file);
await postOss(data.host, formData); //请求接口，接口返回直接可以浏览图片的路径
return `${
data.host}/${
ossParams.key}`;
} catch (e) {
}
},
Vue.prototype.shareWeb = function shareWeb(data) {
try {
const device = whichdevice(); //判断是什么设备（函数省略）
if (window.webview || window.webkit) {
if (device.android) {
window.webview.shareWeb(data);
} else if (device.ios) {
window.webkit.messageHandlers.shareWeb.postMessage(data);
} else {
console.error("非ios或Android设备");
}
} else {
console.error("webview方法未注册");
}
} catch (e) {
console.error("无法调设备shareWeb方法");
}
};
一些后台输出内容
