UniApp 实现分享功能

2025/5/2 20:07:45 来源：https://blog.csdn.net/weixin_44732078/article/details/147585087 浏览: 次关键词：UniApp 实现分享功能

文章目录

一、环境准备
二、代码实现
三、常见问题解决

一、环境准备

1. 必要的权限配置
在 manifest 中添加以下权限：

{"app-plus": {"distribute": {"android": {"permissions": ["<uses-permission android:name=\"android.permission.INTERNET\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"]}}}
}

2.各平台配置
微信配置

前往微信开放平台注册应用
在 manifest.json 中添加：

"app-plus": {"distribute": {"sdkConfigs": {"share": {"weixin": {"appid": "你的微信APPID","UniversalLinks": "https://你的域名/app/"}}}}
}

QQ配置

前往QQ互联平台注册应用
在 manifest.json 中添加：

"qq": {"appid": "你的QQ APPID"
}

二、代码实现

<template><view><button @click="share('weixin','WXSceneSession)">微信好友</button><button @click="share('qq','')">QQ好友</button><button @click="share('weixin','WXSceneTimeline')">朋友圈</button></view>
</template><script>
export default {methods: {async share(provider, scene) {if (!await this.checkInstall(provider)) return;try {await uni.share({provider,type: 0, // 0-图文，1-纯文字，2-图片，5-小程序title: "优质内容分享",summary: "点击查看详情内容",href: "https://example.com",imageUrl: "/static/share.jpg",scene,});} catch (e) {this.handleError(e);}},async checkInstall(provider) {const installed = await checkAppInstalled(provider);if (!installed) {uni.showModal({title: '提示',content: `请先安装${provider === 'weixin' ? '微信' : 'QQ'}`,showCancel: false});return false;}return true;},checkAppInstalled(provider) {return new Promise((resolve) => {uni.getProvider({service: 'share',success: (res) => {resolve(res.provider.includes(provider));}});});},handleError(error) {console.error('分享失败:', error);const msg = {'-1': '分享已取消','2': '未安装应用','3': '参数错误'}[error.errCode] || '分享失败';uni.showToast({title: msg,icon: 'none'});}}
}
</script>