<template>
<uni-popup ref="popup" type="bottom">
<view class="u-text-center ptb-2 font-md u-border-bottom">分享到</view>
<view class="flex align-center">
<view v-for="(item,index) in providerList" :key="index" @tap="share(item)" hover-class="bg-light" class="flex-1 flex flex-column align-center justify-center ptb-2">
<view :class="item.color +' '+item.icon" class="iconfont text-white flex align-center justify-center font-lg rounded-cirle" style="width: 100rpx; height: 100rpx;"></view>
<text class="font-sm text-muted">{{item.name}}</text>
</view>
</view>
<view class="u-text-center ptb-2 font-md u-border-top" @click="close">取消</view>
</uni-popup>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
components:{
uniPopup
},
data() {
return {
title: '',
shareText: '',
href:"",
image: '',
shareType:0,
providerList: []
}
},
onShareAppMessage() {
console.log(this.shareText)
return {
title: this.shareText ? this.shareText : "欢迎体验uni-app",
path: '/pages/tabBar/component/component',
imageUrl:this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
}
},
// 销毁之前
onShareAppMessage() {
return {
title: this.shareText ? this.shareText : "欢迎体验uni-app",
path: '/pages/tabBar/component/component',
imageUrl:this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
}
},
methods:{
open(options){
this.title = options.title;
this.shareText = options.shareText;
this.href = options.href;
this.image = options.image;
this.$refs.popup.open();
},
close(){
this.$refs.popup.close();
},
async share(e) {
if(e.id == 'qq' || e.id == 'sinaweibo'){
this.shareType = 1;
}else{
this.shareType = 0;
};
console.log('分享通道:'+ e.id +'; 分享类型:' + this.shareType);
if(!this.shareText && (this.shareType === 1 || this.shareType === 0)){
uni.showModal({
content:'分享内容不能为空',
showCancel:false
})
return;
}
if(!this.image && (this.shareType === 2 || this.shareType === 0)){
uni.showModal({
content:'分享图片不能为空',
showCancel:false
})
return;
}
let shareOPtions = {
provider: e.id,
scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面,“WXSenceTimeline”分享到朋友圈,“WXSceneFavorite”分享到微信收藏
type: this.shareType,
success: (e) => {
console.log('success', e);
uni.showModal({
content: '已分享',
showCancel:false
})
},
fail: (e) => {
console.log('fail', e)
uni.showModal({
content: e.errMsg,
showCancel:false
})
},
complete:function(){
console.log('分享操作结束!')
}
}
switch (this.shareType){
case 0:
shareOPtions.summary = this.shareText;
shareOPtions.imageUrl = this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png';
shareOPtions.title = this.title;
shareOPtions.href = this.href;
break;
case 1:
shareOPtions.summary = this.shareText;
break;
case 2:
shareOPtions.imageUrl = this.image;
break;
case 5:
shareOPtions.imageUrl = this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
shareOPtions.title = '欢迎体验uniapp';
shareOPtions.miniProgram = {
id:'gh_33446d7f7a26',
path:'/pages/tabBar/component/component',
webUrl:'https://uniapp.dcloud.io',
type:0
};
break;
default:
break;
}
if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享,且是ios平台,则压缩图片
shareOPtions.imageUrl = await this.compress();
}
if(shareOPtions.type === 1 && (shareOPtions.provider === 'qq' || shareOPtions.provider === 'sinaweibo')){//如果是分享文字到qq,则必须加上href和title
shareOPtions.title = this.title;
shareOPtions.href = this.href;
}
uni.share(shareOPtions);
},
radioChange(e){
console.log('type:' + e.detail.value);
this.shareType = parseInt(e.detail.value);
},
chooseImage() {
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
sizeType: ['compressed', 'original'],
success: (res) => {
this.image = res.tempFilePaths[0];
},
fail: (err) => {
// #ifdef MP
uni.getSetting({
success: (res) => {
let authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相机或相册获取图片,请在设置界面打开相关权限',
success: (res) => {
if (res.confirm) {
uni.openSetting()
}
}
})
}
}
})
// #endif
}
})
},
compress(){//压缩图片 图文分享要求分享图片大小不能超过20Kb
console.log('开始压缩');
let img = this.image;
return new Promise((res) => {
var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
console.log('after' + localPath);
// 压缩size
plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
entry.file((file) => {// 可通过entry对象操作图片
console.log('getFile:' + JSON.stringify(file));
if(file.size > 20480) {// 压缩后size 大于20Kb
plus.zip.compressImage({
src: img,
dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'),
width: '10%',
height: '10%',
quality: 1,
overwrite: true
}, (event) => {
console.log('success zip****' + event.size);
let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG');
res(newImg);
}, function(error) {
uni.showModal({
content:'分享图片太大,需要请重新选择图片!',
showCancel:false
})
});
}
});
}, (e) => {
console.log('Resolve file URL failed: ' + e.message);
uni.showModal({
content:'分享图片太大,需要请重新选择图片!',
showCancel:false
})
});
})
}
},
created() {
uni.getProvider({
service: 'share',
success: (e) => {
// console.log(e)
let data = []
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '微信好友',
icon:'icon-weixin1',
color:'uni-badge-success',
id: 'weixin',
sort:0
})
data.push({
name: '朋友圈',
icon:'icon-pengyouquan1',
color:'bg-dark',
id: 'weixin',
type:'WXSenceTimeline',
sort:1
})
break;
case 'sinaweibo':
data.push({
name: '新浪微博',
icon:'icon-weibo1',
color:'uni-badge-danger',
id: 'sinaweibo',
sort:2
})
break;
case 'qq':
data.push({
name: 'QQ好友',
icon:'icon-icon',
color:'uni-badge-primary',
id: 'qq',
sort:3
})
break;
default:
break;
}
}
this.providerList = data.sort((x,y) => {
return x.sort - y.sort
});
},
fail: (e) => {
uni.showModal({
content:'获取分享通道失败',
showCancel:false
})
}
});
}
}
</script>
<style>
</style>
- 发布:2020-09-03 10:53
- 更新:2020-09-03 10:53
- 阅读:885
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7 旗舰版
HBuilderX类型: 正式
HBuilderX版本号: 2.8.6
手机系统: Android
手机系统版本号: Android 8.0
手机厂商: 华为
手机机型: p-30
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
此代码我封装成了组件,
1.在打开时会触发方法中的open函数,并把参数传入,
2.在方法share中我用来判断是否为qq,若为qq则this.shareType = 1,分享文字
此代码我封装成了组件,
1.在打开时会触发方法中的open函数,并把参数传入,
2.在方法share中我用来判断是否为qq,若为qq则this.shareType = 1,分享文字
预期结果:
预期是可以分享微博的图文
预期是可以分享微博的图文
实际结果:
报fail, [Object] {"errMsg":"share:fail"}
报fail, [Object] {"errMsg":"share:fail"}
bug描述:
分享功能,分享微博发布图文报error,但是发布文字没问题,其它比如微信发图文正常,求解决
0 个回复