我的业务流程是:查询订单详情,将查询出的订单以excel的形式分享到微信,其中excel是后端接口生成好的。开始由于我一直执着于只看uniapp的api,发现它的方法不支持分享文件,只能支持分享图片、小程序等,所以就有了曲线救国的第二个方法。第二个方法需要先预览,再通过预览中右上角的菜单转发分享操作,能实现初衷目标;用户体验感不是很好。后面去看了微信小程序开发文档,发现了转发 api ,这样一写,代码和操作都很简洁。代码如下:
<template>
<view class="wx_img">
<button class="button_2" @click="goShare">
<uni-icons type="weixin" color="#FFFFFF" size="25"></uni-icons>
<text class="button_text_20">分享订单</text>
</button>
</view>
</template>
第一种方法:
<script>
export default {
data() {
return {
excelUrl:'', // excel地址
};
},
mounted() {
},
onShow() {
},
onShareAppMessage(res) {
return {
title: '微信小程序测试分享',
}
},
methods: {
// 分享-预览
goShare() {
uni.downloadFile({
url: this.excelUrl,
success: (res) => {
uni.shareFileMessage({
filePath: res.tempFilePath,
})
}
})
})
},
}
}
</script>
第二种方法
<script>
export default {
data() {
return {
excelUrl:'', // excel地址
};
},
mounted() {
},
onShow() {
},
onShareAppMessage(res) { // 这个是uniapp的方法,但是无法分享文件,具体使用方法参考官方文档
return {
title: '微信小程序测试分享'
}
},
methods: {
// 分享-预览
goShare() {
const downloadTask = uni.downloadFile({
url: this.excelUrl,
success: function(res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true, // 这个要设置,显示右上角的菜单
success: function(res) {
console.log('打开文档成功');
}
});
}
});
downloadTask.onProgressUpdate((res) => {
console.log('下载进度' + res.progress);
console.log('已经下载的数据长度' + res.totalBytesWritten);
console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
});
})
},
}
}
</script>
总结一下:开发微信小程序,一定一定要uniapp官方文档和微信小程序开发文档都看。