UniApp 实现分享功能

文章目录

一、环境准备

1. 必要的权限配置

manifest 中添加以下权限:

bash 复制代码
{
  "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.各平台配置
微信配置

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

QQ配置

bash 复制代码
"qq": {
  "appid": "你的QQ APPID"
}

二、代码实现

bash 复制代码
<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>

三、常见问题解决

1.iOS 分享图片不显示

  • 确保图片小于32KB
  • 使用网络图片地址(本地路径需转base64)

2. Android 签名不一致

  • 检查开放平台配置的签名与打包签名是否一致
  • 使用官方提供签名校验工具
相关推荐
王富贵的记录1 分钟前
electron 控制台打印中文乱码问题
前端·javascript·electron
谈不譚网安1 小时前
XXE(外部实体注入)
前端·网络安全
图扑软件2 小时前
GIS 智慧环卫可视化管理系统
大数据·javascript·人工智能·智慧城市·数字孪生·可视化·智慧环卫
老K(郭云开)2 小时前
最新版Chrome浏览器调用ActiveX控件技术——alWebPlugin中间件V2.0.42版发布
前端·chrome·中间件
百锦再3 小时前
Vue环境下数据导出PDF的全面指南
前端·javascript·vue.js·python·django·pdf·pygame
融云5 小时前
融云 uni-app IMKit 上线,1 天集成,多端畅行
uni-app
菜鸟una6 小时前
【微信小程序 + 高德地图API 】键入关键字搜索地址,获取经纬度等
前端·vue.js·微信小程序·小程序·typescript
进取星辰7 小时前
33、魔法防御术——React 19 安全攻防实战
前端·安全·react.js
海天胜景8 小时前
vue3 el-table 行号
javascript·vue.js·ecmascript
小赖同学啊8 小时前
深度解析 Element Plus
前端·javascript·vue.js