uniapp开发APP&小程序分享功能分享到微信、QQ、微博等实战
前言说明 借鉴文档
在不同平台，分享的调用方式和逻辑有较大差异。
App：可以自主控制分享内容、分享形式及分享平台
- 使用
uni.shareAPI方式调用社交sdk分享- 使用 uni.shareWithSystem 呼起手机os的系统分享菜单
小程序：不支持
API调用，只能用户主动点击触发分享。可使用自定义按钮方式<button open-type="share">或监听系统右上角的分享按钮onShareAppMessage进行自定义分享内容。
H5：如果是普通浏览器，浏览器自带分享按钮；如果是在微信内嵌浏览器中，可调用js-sdk进行分享，参考。
APP：可以直接使用已经封装好的uni-share插件详情
APP端分享方式一、
注意：APP在安卓上面只支持本地图片，ios上可以支持网络图片。
// #ifdef APP-PLUS
// 监听APP导航栏按钮
// app端分享
onNavigationBarButtonTap(e) {
if (e.type === 'share') {
// app端 分享, 先保存本地，再分享
uni.downloadFile({
url: 'https://pic.ntimg.cn/file/20220207/56930_165226331107_2.jpg',
success: (res) => {
// 网络图片临时存储本地,本次启动期间可以正常使用
// console.log(res.tempFilePath, this.course.title)
if (res.statusCode === 200) {
uni.shareWithSystem({
summary: this.course.title,
href: 'https://www.baiduDemo.com',
imageUrl: 'https://pic.ntimg.cn/file/20220207/56930_165226331107_2.jpg', // android使用本地图片
type: 'image',
success(e) {
uni.showToast({
title: '分享成功'
})
}
})
}
}
});
}
},
// #endif
效果：
注意事项：
Android端当msg参数中设置图片（imageUrl属性）时，分享类型自动变为为image，在分享时可能只会发送图片如微信，没有设置图片时分享类型则认为是文本text。Android端高版本无法分析私有路径的图片，只能分享来自相册的图片（使用uni.chooseImage选择图像时请设置为原图）。- 新版本
Android的文件权限有较大的调整，如遇到无法分享的情况，推荐使用uts插件来解决：插件市场 iOS端不同的分享程序对分享内容有要求，如微信分享时必需添加链接地址href，否则微信分享失败。
APP端分享方式二、
因为方式一存在兼容问题，所以采用方式二自定义分享组件方法。
第一步，创建对应的组件
<template>
<view>
<view v-show="isShow" @click="showHandler" class="mask" @touchmove.stop.prevent="()=>{}">
</view>
<view class="share-body" v-show="isShow">
<scroll-view scroll-x class="share-scroll noScorll">
<view class="share-item">
<image src="/static/share/weixin.png" mode=""></image>
<view>微信好友</view>
</view>
<view class="share-item">
<image src="/static/share/pengyouquan.png" mode=""></image>
<view>微信朋友圈</view>
</view>
<view class="share-item">
<image src="/static/share/weibo.png" mode=""></image>
<view>新浪微博</view>
</view>
<view class="share-item">
<image src="/static/share/qq.png" mode=""></image>
<view>QQ好友</view>
</view>
<view class="share-item">
<image src="/static/share/link.png" mode=""></image>
<view>复制链接</view>
</view>
</scroll-view>
<view class="share-cancel" @click="showHandler">
取消
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow: false, //是否显示
}
},
methods: {
// 显示
showHandler() {
this.isShow = !this.isShow
},
}
}
</script>
<style lang="scss">
.mask {
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.share-body {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
.share-cancel {
background-color: #FFF;
text-align: center;
width: 100%;
padding: 25rpx 0;
}
.share-scroll {
background-color: #f7f7f7;
width: 100%;
height: 200rpx;
display: flex;
white-space: nowrap;
padding-top: 45rpx;
.share-item {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
}
view {
color: $mxg-text-color-grey;
font-size: 25rpx;
padding: 10rpx;
}
image {
height: 60rpx;
width: 60rpx;
}
}
}
</style>
第二步骤，父组件监听右上角按钮进行触发share分享弹窗组件，并给其加一个ref="share"，通过监听右上角分享按钮触发事件。
<share ref="share"></share>
// #ifdef APP-PLUS
// 监听APP导航栏按钮
onNavigationBarButtonTap(e) {
if (e.type === 'share') {
// 打开分享弹窗
this.$refs.share.showHandler()
}
},
// #endif
第三步、获取uniapp可分享的服务商，并渲染到组件中
<template>
<view>
<view v-show="isShow" @click="showHandler" class="mask" @touchmove.stop.prevent="()=>{}">
</view>
<view class="share-body" v-show="isShow">
<scroll-view scroll-x class="share-scroll noScorll">
<view class="share-item" v-for="(item,index) in providerList" :key="index">
<image :src="item.icon"></image>
<view>{{item.name}}</view>
</view>
</scroll-view>
<view class="share-cancel" @click="showHandler">
取消
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow: false, //是否显示
title: '在线教育APP实战', // 分享标题
shareText: 'uniapp之在线教育APP实战', // 分享内容
href: 'https://www.baidu.com', // 用访问链接
image: 'https://pic.ntimg.cn/file/20220207/56930_165226331107_2.jpg', // 分享图片
shareType: 0, // 分享的类型 0 图文，1 文字，2 图片
providerList: [] // 提供商【QQ,微信,微博】
}
},
created() {
// 获取提供商QQ,微信，微博
uni.getProvider({
service: 'share', // 分享服务
success: (e) => {
console.log('success', e);
let data = [] // 封装提供商
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '分享到微信好友',
id: 'weixin',
sort: 0,
icon: '/static/share/weixin.png'
})
data.push({
name: '分享到微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline',
sort: 1,
icon: '/static/share/pengyouquan.png'
})
break;
case 'sinaweibo':
data.push({
name: '分享到新浪微博',
id: 'sinaweibo',
sort: 2,
icon: '/static/share/weibo.png'
})
break;
case 'qq':
data.push({
name: '分享到QQ',
id: 'qq',
sort: 3,
icon: '/static/share/qq.png'
})
break;
default:
break;
}
}
// 追加复制链接
data.push({
name: '复制链接',
id: 'copy',
sort: 4,
icon: '/static/share/link.png'
})
this.providerList = data.sort((x, y) => {
return x.sort - y.sort
});
},
fail: (e) => {
console.log('获取分享通道失败', e);
uni.showModal({
content: '获取分享通道失败',
showCancel: false
})
}
});
},
methods: {
// 显示
showHandler() {
this.isShow = !this.isShow
},
}
}
</script>
<style lang="scss">
.mask {
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.share-body {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
.share-cancel {
background-color: #FFF;
text-align: center;
width: 100%;
padding: 25rpx 0;
}
.share-scroll {
background-color: #f7f7f7;
width: 100%;
height: 200rpx;
display: flex;
white-space: nowrap;
padding-top: 45rpx;
.share-item {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
}
view {
color: $mxg-text-color-grey;
font-size: 25rpx;
padding: 10rpx;
}
image {
height: 60rpx;
width: 60rpx;
}
}
}
</style>
效果：
第四步、给动态渲染的分享绑定分享事件@click="share(item)" ，完善逻辑代码
methods: {
async share(e) {
console.log('分享通道:' + e.id + '； 分享类型:' + this.shareType);
// 加载中
uni.showLoading()
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;
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') { //如果是分享文字到qq，则必须加上href和title
shareOPtions.href = this.href;
shareOPtions.title = this.title;
}
// 隐藏加载
uni.hideLoading()
uni.share(shareOPtions);
},
// 显示
showHandler() {
this.isShow = !this.isShow
},
//压缩图片 图文分享要求分享图片大小不能超过20Kb
compress() {
console.log('开始压缩');
let img = this.image;
return new Promise(async (res) => {
// var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
// console.log('after' + localPath);
if (img.startsWith("http")) {
// 如果是网络路径图片，则下载到本地存储的临时文件
img = await this.downFiled(img)
}
// 压缩size
plus.io.resolveLocalFileSystemURL(img, (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
})
});
})
},
downFiled(url) {
return new Promise((resolve) => {
uni.downloadFile({
url,
success: (res) => {
console.log("下载完成", res.tempFilePath)
resolve(res.tempFilePath)
}
})
})
},
}
第五步：创建 /config/env.js 环境配置文件，配置H5端部署域名。
// h5端主机名域名前缀
let HOST_H5 = 'https://www.mengxuegu.com/#/'
if (process.env.NODE_ENV === 'development') {
HOST_H5 = 'https://static-3f6cc99f-e041-4662-9069-5c1175816bf6.bspapp.com/#/'
} else {
console.log('生产环境')
}
export {
HOST_H5
}
第六步、在main.js中将/config/env.js导出的属性，全部挂载到Vue实例上，方便后续访问
第七步、完善app端分享的href: this.$env.HOST_H5 + this.$util.routePath()
全部代码如下：
<template>
<view>
<view v-show="isShow" @click="showHandler" class="mask" @touchmove.stop.prevent="()=>{}">
</view>
<view class="share-body" v-show="isShow">
<scroll-view scroll-x class="share-scroll noScorll">
<view class="share-item" v-for="(item,index) in providerList" :key="index" @click="share(item)">
<image :src="item.icon"></image>
<view>{{item.name}}</view>
</view>
</scroll-view>
<view class="share-cancel" @click="showHandler">
取消
</view>
</view>
</view>
</template>
<script>
export default {
props: {
shareData: Object
},
watch: {
shareData(newVal) {
console.log("监听value",newVal)
this.image = newVal.mainImage
this.title = newVal.title
this.href = this.$env.HOST_H5 + this.$util.routePath()
}
},
data() {
return {
isShow: false, //是否显示
title: '在线教育APP实战', // 分享标题
shareText: 'uniapp之在线教育APP实战', // 分享内容
href: this.$env.HOST_H5+this.$util.routePath(), // 用访问链接
image: 'https://gd4.alicdn.com/imgextra/i4/3603079088/O1CN01dczOSM2H0LvTowhkl_!!3603079088.png', // 分享图片
shareType: 0, // 分享的类型 0 图文，1 文字，2 图片
providerList: [] // 提供商【QQ,微信,微博】
}
},
created() {
// 获取提供商QQ,微信，微博
uni.getProvider({
service: 'share', // 分享服务
success: (e) => {
console.log('success', e);
let data = [] // 封装提供商
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '微信好友',
id: 'weixin',
sort: 0,
icon: '/static/share/weixin.png'
})
data.push({
name: '微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline',
sort: 1,
icon: '/static/share/pengyouquan.png'
})
break;
case 'sinaweibo':
data.push({
name: '新浪微博',
id: 'sinaweibo',
sort: 2,
icon: '/static/share/weibo.png'
})
break;
case 'qq':
data.push({
name: 'QQ',
id: 'qq',
sort: 3,
icon: '/static/share/qq.png'
})
break;
default:
break;
}
}
// 追加复制链接
data.push({
name: '复制链接',
id: 'copy',
sort: 4,
icon: '/static/share/link.png'
})
this.providerList = data.sort((x, y) => {
return x.sort - y.sort
});
},
fail: (e) => {
console.log('获取分享通道失败', e);
uni.showModal({
content: '获取分享通道失败',
showCancel: false
})
}
});
},
methods: {
async share(e) {
console.log('分享通道:' + e.id + '； 分享类型:' + this.shareType);
// 加载中
uni.showLoading()
if (!this.shareText && (this.shareType === 1 || this.shareType === 0)) {
uni.showModal({
content: '分享内容不能为空',
showCancel: false
})
// 隐藏加载
uni.hideLoading()
return;
}
if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
uni.showModal({
content: '分享图片不能为空',
showCancel: false
})
// 隐藏加载
uni.hideLoading()
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;
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') { //如果是分享文字到qq，则必须加上href和title
shareOPtions.href = this.href;
shareOPtions.title = this.title;
}
// 隐藏加载
uni.hideLoading()
uni.share(shareOPtions);
},
// 显示
showHandler() {
this.isShow = !this.isShow
},
//压缩图片 图文分享要求分享图片大小不能超过20Kb
compress() {
console.log('开始压缩');
let img = this.image;
return new Promise(async (res) => {
// var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
// console.log('after' + localPath);
if (img.startsWith("http")) {
// 如果是网络路径图片，则下载到本地存储的临时文件
img = await this.downFiled(img)
}
// 压缩size
plus.io.resolveLocalFileSystemURL(img, (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
})
uni.hideLoading()
});
}
});
}, (e) => {
console.log('Resolve file URL failed: ' + e.message);
uni.showModal({
content: '分享图片太大,需要请重新选择图片!',
showCancel: false
})
uni.hideLoading()
});
})
},
downFiled(url) {
return new Promise((resolve) => {
uni.downloadFile({
url,
success: (res) => {
console.log("下载完成", res.tempFilePath)
resolve(res.tempFilePath)
}
})
})
},
}
}
</script>
<style lang="scss">
.mask {
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.share-body {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
.share-cancel {
background-color: #FFF;
text-align: center;
width: 100%;
padding: 25rpx 0;
}
.share-scroll {
background-color: #f7f7f7;
width: 100%;
height: 200rpx;
display: flex;
white-space: nowrap;
padding-top: 45rpx;
.share-item {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
}
view {
color: $mxg-text-color-grey;
font-size: 25rpx;
padding: 10rpx;
}
image {
height: 60rpx;
width: 60rpx;
}
}
}
</style>
效果如下：
小程序分享,
小程序端点击右上角胶囊按钮，弹出窗口点击分享按钮可分享给好友、群，参考
第一步、/pages/course/course-details.vue 中监听小程序端分享事件
// 小程序端分享给好友（与onLoad同级）
onShareAppMessage(res) {
return {
title: this.course.title,
path: this.$util.routePath()
}
}
效果：
实现复制链接 参考uni.setClipboardData
async share(e) {
console.log('分享通道:' + e.id + '； 分享类型:' + this.shareType);
// 加载中
uni.showLoading()
// 复制链接
if (e.id === 'copy') {
uni.setClipboardData({
data: this.href,
success: () => {
// 隐藏默认提示
uni.hideToast()
this.$util.msg('已复制到剪贴板')
}
})
// 隐藏
this.showHandler()
return;
}
}
效果：
全部代码：
父组件使用：
<share ref="share" :shareData="course"></share>
// 小程序端分享给好友（与onLoad同级）
onShareAppMessage(res) {
return {
title: this.course.title,
path: this.$util.routePath()
}
},
// #ifdef APP-PLUS
// 监听APP导航栏按钮
// app端分享
onNavigationBarButtonTap(e) {
if (e.type === 'share') {
this.$refs.share.showHandler()
}
},
// #endif
分享组件代码：
<template>
<view>
<view v-show="isShow" @click="showHandler" class="mask" @touchmove.stop.prevent="()=>{}">
</view>
<view class="share-body" v-show="isShow">
<scroll-view scroll-x class="share-scroll noScorll">
<view class="share-item" v-for="(item,index) in providerList" :key="index" @click="share(item)">
<image :src="item.icon"></image>
<view>{{item.name}}</view>
</view>
</scroll-view>
<view class="share-cancel" @click="showHandler">
取消
</view>
</view>
</view>
</template>
<script>
export default {
props: {
shareData: Object
},
watch: {
shareData(newVal) {
console.log("监听value", newVal)
this.image = newVal.mainImage
this.title = newVal.title
this.href = this.$env.HOST_H5 + this.$util.routePath()
}
},
data() {
return {
isShow: false, //是否显示
title: '在线教育APP实战', // 分享标题
shareText: 'uniapp之在线教育APP实战', // 分享内容
href: this.$env.HOST_H5 + this.$util.routePath(), // 用访问链接
image: 'https://gd4.alicdn.com/imgextra/i4/3603079088/O1CN01dczOSM2H0LvTowhkl_!!3603079088.png', // 分享图片
shareType: 0, // 分享的类型 0 图文，1 文字，2 图片
providerList: [] // 提供商【QQ,微信,微博】
}
},
created() {
// 获取提供商QQ,微信，微博
uni.getProvider({
service: 'share', // 分享服务
success: (e) => {
console.log('success', e);
let data = [] // 封装提供商
for (let i = 0; i < e.provider.length; i++) {
switch (e.provider[i]) {
case 'weixin':
data.push({
name: '微信好友',
id: 'weixin',
sort: 0,
icon: '/static/share/weixin.png'
})
data.push({
name: '微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline',
sort: 1,
icon: '/static/share/pengyouquan.png'
})
break;
case 'sinaweibo':
data.push({
name: '新浪微博',
id: 'sinaweibo',
sort: 2,
icon: '/static/share/weibo.png'
})
break;
case 'qq':
data.push({
name: 'QQ',
id: 'qq',
sort: 3,
icon: '/static/share/qq.png'
})
break;
default:
break;
}
}
// 追加复制链接
data.push({
name: '复制链接',
id: 'copy',
sort: 4,
icon: '/static/share/link.png'
})
this.providerList = data.sort((x, y) => {
return x.sort - y.sort
});
},
fail: (e) => {
console.log('获取分享通道失败', e);
uni.showModal({
content: '获取分享通道失败',
showCancel: false
})
}
});
},
methods: {
async share(e) {
console.log('分享通道:' + e.id + '； 分享类型:' + this.shareType);
// 加载中
uni.showLoading()
// 复制链接
if (e.id === 'copy') {
uni.setClipboardData({
data: this.href,
success: () => {
// 隐藏默认提示
uni.hideToast()
this.$util.msg('已复制到剪贴板')
}
})
// 隐藏
this.showHandler()
return;
}
if (!this.shareText && (this.shareType === 1 || this.shareType === 0)) {
uni.showModal({
content: '分享内容不能为空',
showCancel: false
})
// 隐藏加载
uni.hideLoading()
return;
}
if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
uni.showModal({
content: '分享图片不能为空',
showCancel: false
})
// 隐藏加载
uni.hideLoading()
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;
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') { //如果是分享文字到qq，则必须加上href和title
shareOPtions.href = this.href;
shareOPtions.title = this.title;
}
// 隐藏加载
uni.hideLoading()
uni.share(shareOPtions);
},
// 显示
showHandler() {
this.isShow = !this.isShow
},
//压缩图片 图文分享要求分享图片大小不能超过20Kb
compress() {
console.log('开始压缩');
let img = this.image;
return new Promise(async (res) => {
// var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
// console.log('after' + localPath);
if (img.startsWith("http")) {
// 如果是网络路径图片，则下载到本地存储的临时文件
img = await this.downFiled(img)
}
// 压缩size
plus.io.resolveLocalFileSystemURL(img, (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
})
uni.hideLoading()
});
}
});
}, (e) => {
console.log('Resolve file URL failed: ' + e.message);
uni.showModal({
content: '分享图片太大,需要请重新选择图片!',
showCancel: false
})
uni.hideLoading()
});
})
},
downFiled(url) {
return new Promise((resolve) => {
uni.downloadFile({
url,
success: (res) => {
console.log("下载完成", res.tempFilePath)
resolve(res.tempFilePath)
}
})
})
},
}
}
</script>
<style lang="scss">
.mask {
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.share-body {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
.share-cancel {
background-color: #FFF;
text-align: center;
width: 100%;
padding: 25rpx 0;
}
.share-scroll {
background-color: #f7f7f7;
width: 100%;
height: 200rpx;
display: flex;
white-space: nowrap;
padding-top: 45rpx;
.share-item {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
}
view {
color: $mxg-text-color-grey;
font-size: 25rpx;
padding: 10rpx;
}
image {
height: 60rpx;
width: 60rpx;
}
}
}
</style>
完结~
扫一扫
1632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
